跳到主要内容

其他调试方法

本页介绍如何使用旧版 JavaScript 调试方法。如果您正在开始使用新的 React Native 或 Expo 应用程序，我们建议使用 React Native DevTools。

Safari 开发者工具（直接 JSC 调试）​

当使用 JavaScriptCore (JSC) 作为应用程序的运行时，您可以使用 Safari 调试应用程序的 iOS 版本。

  1. 仅限物理设备：打开“设置”应用程序，导航到“Safari”>“高级”，并确保“Web 检查器”已开启。
  2. 在您的 Mac 上，打开 Safari 并启用“开发”菜单。这可以在“Safari”>“设置...”下找到，然后是“高级”选项卡，然后选择“显示 Web 开发者功能”。
  3. 在“开发”菜单下找到您的设备，然后从子菜单中选择“JSContext”项。这将打开 Safari 的 Web 检查器，其中包括类似于 Chrome DevTools 的“控制台”和“源代码”面板。

Opening Safari Web Inspector

提示

虽然默认情况下可能未启用源映射，但您可以按照本指南或视频启用它们，并在源代码中的正确位置设置断点。

提示

每次重新加载应用程序时，都会创建一个新的 JSContext。选择“自动显示 JSContext 的 Web 检查器”可以避免您手动选择最新的 JSContext。

远程 JavaScript 调试（已弃用）​

警告

远程 JavaScript 调试在 React Native 0.73 中已弃用，并将在未来的版本中移除。

远程 JavaScript 调试将外部 Web 浏览器（Chrome）连接到您的应用程序，并在网页中运行您的 JavaScript 代码。这使您可以使用 Chrome 的调试器，就像使用任何 Web 应用程序一样。请注意，浏览器环境可能非常不同，并非所有 React Native 模块在以这种方式调试时都能正常工作。

设置​

自 React Native 0.73 起，远程 JavaScript 调试必须使用 NativeDevSettings 模块手动启用。

js
import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings';

function MyApp() {
  // Assign this to a dev-only button or useEffect call
  const connectToRemoteDebugger = () => {
    NativeDevSettings.setIsDebuggingRemotely(true);
  };
}

当调用 NativeDevSettings.setIsDebuggingRemotely(true) 时，这将打开一个新标签页，网址为 https://127.0.0.1:8081/debugger-ui。

从此页面，通过以下方式打开 Chrome DevTools

  • 视图 > 开发者 > 开发者工具
  • ⌥ Option + Cmd ⌘ + I (macOS) / Ctrl + Shift + I (Windows 和 Linux)。

“控制台”和“源代码”面板将允许您检查您的 React Native 代码。

The remote debugger window in Chrome

信息

在远程 JavaScript 调试下，Chrome 中的 Web 版本 React DevTools 将无法与 React Native 一起使用。请参阅 React Native DevTools 指南，了解如何在我们的集成调试器中使用 React DevTools。

注意

在 Android 上，如果调试器和设备之间的时间出现偏差，动画和事件行为等内容可能无法正常工作。这可以通过运行 adb shell "date `date +%m%d%H%M%Y.%S%3N`" 来修复。如果使用物理设备，则需要 root 访问权限。

在物理设备上调试​

信息

如果您正在使用 Expo CLI，则已为您配置好。

在通过 USB 连接的 Android 5.0+ 设备上，您可以使用 adb 命令行工具来设置从设备到计算机的端口转发

sh
adb reverse tcp:8081 tcp:8081
注意

如果您遇到任何问题，可能是您的某个 Chrome 扩展程序以意外的方式与调试器交互。尝试禁用所有扩展程序，然后逐个重新启用它们，直到找到有问题的扩展程序。