跳到主要内容
版本：0.78

其他调试方法

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

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

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

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

打开 Safari 网页检查器

提示

虽然源代码映射可能默认未启用，但你可以遵循 本指南 或 视频 来启用它们，并在源代码中的正确位置设置断点。

提示

每次应用重新加载时，都会创建一个新的 JSContext。选择“自动显示 JSContext 的网页检查器”可以省去手动选择最新 JSContext 的步骤。

远程 JavaScript 调试（已弃用）​

注意

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

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

设置​

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

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

function MyApp() {
  // 将其分配给仅用于开发的按钮或 useEffect 调用
  const connectToRemoteDebugger = () => {
    NativeDevSettings.setIsDebuggingRemotely(true);
  };
}

当调用 NativeDevSettings.setIsDebuggingRemotely(true) 时，这将在 http://localhost:8081/debugger-ui 打开一个新标签页。

在此页面中，通过以下方式打开 Chrome DevTools：

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

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

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 扩展以意外方式与调试器交互。尝试禁用所有扩展，然后逐个重新启用，直到找到有问题的扩展。