跳至主要内容

其他调试方法

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

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

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

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

Opening Safari Web Inspector

提示

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

提示

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

远程 JavaScript 调试（已弃用）​

警告

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

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

设置​

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

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 中的 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 命令行工具 设置从设备到计算机的端口转发。

adb reverse tcp:8081 tcp:8081
注意

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