跳至主内容
版本：0.77

其他调试方法

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

本文介绍传统的 JavaScript 调试方法。如果您正在开发新的 React Native 或 Expo 应用，我们推荐使用 React Native DevTools。

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

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

  1. 仅限物理设备：打开设置应用，进入 Safari > 高级，确保开启 "Web Inspector"。

  2. 在 Mac 上打开 Safari，启用开发菜单：通过 Safari > 设置... > 高级选项卡，勾选"为网页开发者显示功能"。

  3. 在开发菜单中找到您的设备，选择子菜单中的 "JSContext" 项。这将打开 Safari 的 Web Inspector，其中包含类似 Chrome DevTools 的控制台和源代码面板。

开启 Safari Web Inspector

技巧

源码映射可能默认未启用，您可以参考这篇指南或这个视频启用它，并在源代码的正确位置设置断点。

技巧

每次应用重新加载时都会创建新的 JSContext。勾选"自动为 JSContext 显示 Web 检查器"可避免手动选择最新 JSContext。

远程 JavaScript 调试（已弃用）​

警告

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

远程 JavaScript 调试将外部浏览器（Chrome）连接到您的应用，并在网页中运行 JavaScript 代码。这样您可以像调试网页应用一样使用 Chrome 调试器。请注意浏览器环境可能存在显著差异，且并非所有 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) 后，将在 http://localhost:8081/debugger-ui 打开新标签页。

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

  • 视图 > 开发者 > 开发者工具

  • ⌥ Option + Cmd ⌘ + I（macOS）/ Ctrl + Shift + I（Windows 和 Linux）。

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

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，此配置已经自动完成。

On Android 5.0+ devices connected via USB, you can use the adb command line tool to set up port forwarding from the device to your computer:

sh
adb reverse tcp:8081 tcp:8081
备注

如果遇到任何问题，可能是某个 Chrome 扩展程序与调试器发生了意料之外的交互。请尝试禁用所有扩展程序，然后逐一重新启用，直到找到有问题的扩展程序。