android - 你如何调试 React Native？

Question

当应用在应用模拟器中运行时，如何使用 React Native 调试他们的 React 代码？

score 178 · Accepted Answer

Cmd+D从模拟器中。它会弹出 Chrome 并从那里你可以使用开发者工具。

编辑：

这现在链接在帮助文档中。

score 91 · Accepted Answer

调试 React Native 应用程序

要调试您的 react 应用程序的 javascript 代码，请执行以下操作：

在 iOS 模拟器中运行您的应用程序。
按下并在http://localhost:8081/debugger-uiCommand + D打开一个网页。（目前仅限 Chrome）或使用Shake Gesture
启用捕获异常时暂停以获得更好的调试体验。
按Command + Option + I打开 Chrome 开发者工具，或通过View-> Developer->打开它Developer Tools。
您现在应该能够像往常一样进行调试了。

可选的

为 Google Chrome安装React 开发者工具扩展。React如果您在开发人员工具打开时选择选项卡，这将允许您导航视图层次结构。

实时重新加载

要激活 Live Reload，请执行以下操作：

在 iOS 模拟器中运行您的应用程序。
按Control + Command + Z。
您现在将看到和Enable/Disable Live Reload选项。ReloadEnable/Disable Debugging

score 68 · Accepted Answer

对于 Android 应用程序，如果您使用 Genymotion，您可以通过按来切换菜单CMD + m，但您可能必须通过这样做在菜单中启用它。

取消勾选小部件
CMD + m通过单击chrome 中的调试启用它

score 44 · Accepted Answer

如果您想在 Windows 上使用 android 设备进行调试，只需打开命令提示符然后键入（确保您的 adb 正常工作）

adb shell input keyevent 82

它会提示一个像图像一样的屏幕

然后选择

debug JS Remotely

它将自动打开一个新窗口。然后打开检查元素或按 F12 进入控制台。

score 35 · Accepted Answer

除了其他答案。您可以使用 debugger 语句调试 react-native

例子：

debugger; //breaks execution

您的 chrome 开发工具必须打开才能正常工作

score 29 · Accepted Answer

cmd ⌘</kbd> + D oddly didn't work for me. Pressing ctrl + cmd ⌘</kbd> + Z in the iOS simulator did kick off the debugging browser window for me.

这是弹出的画面：

React Native 调试选项

更多细节在这里。

score 29 · Accepted Answer

试试这个程序：https ://github.com/jhen0409/react-native-debugger

适用于windows：osx和linux。

它支持：react native和redux

您还可以检查虚拟组件树并修改反映在应用程序中的样式。

score 17 · Accepted Answer

在 Debian 8 (Jessie) 上调试 react-native 0.40.0 可以通过在您的应用程序在 android 模拟器中运行时导航到 Chromium 或 Firebug 中的http://localhost:8081/debugger-ui来完成。要访问应用内开发人员菜单，请在另一个终端窗口中运行以下命令，如此处所述：

adb shell input keyevent 82

score 17 · Accepted Answer

我没有足够的声誉来评论以前很棒的答案。:) 以下是我在开发 react-native 应用程序时调试的一些方法。

实时重新加载

react-native 使用 ⌘ + R 键可以非常轻松地查看您的更改，甚至只需启用实时重新加载，watchman 将使用最新更改“刷新”模拟器。如果出现错误，您可以从该红色屏幕的行号中获得线索。几次撤消将使您回到工作状态并重新开始。
console.log('yeah, seriously.')

我发现自己更喜欢让程序运行并记录一些信息，而不是添加debugger断点。（调试器在尝试使用外部包/库时很有用，它带有自动完成功能，因此您知道可以使用哪些其他方法。）
Enable Chrome Debugging在你的程序中有debugger;断点。

好吧，这取决于您遇到的错误类型以及您对如何调试的偏好。对于大多数人来说undefined is not an object (evaluating 'something.something')，方法 1 和 2 对我来说已经足够了。

而处理由其他开发人员编写的外部库或包将需要更多的努力来调试，因此一个好的工具，如Chrome Debugging

有时它来自 react-native 平台本身，因此在谷歌上搜索 react-native 问题肯定会有所帮助。

希望这可以帮助那里的人。

score 14 · Accepted Answer

而不是Cmd+M, 用于 Windows 中的 Android Emulator Press F10。模拟器开始显示所有 react-native 调试选项。

score 13 · Accepted Answer

对于 Android：Ctrl + M（模拟器）或摇动手机（在设备中）以显示菜单。

对于 iOS：Cmd + D 或摇动手机以显示菜单

确保你有铬。

在显示的菜单上选择远程调试 JS 选项。

Chrome 将在 localhost:8081/debugger-ui 自动打开。您也可以使用此链接手动转到调试器。

那里显示控制台，您可以看到记录的日志。

score 12 · Accepted Answer

12

adb logcat *:S ReactNative:V ReactNativeJS:V

在终端中运行它以获取 android 日志。

于 2016-06-15T11:45:46.967 回答

score 11 · Accepted Answer

React Native 0.62 发布 -官方解决方案是 Flipper

Flipper是 Android 和 iOS 移动调试工具，无需在 react native 中使用调试模式。

从 RN 0.62（参见此链接）开始，Flipper使用默认项目进行初始化。

Flipper 有一些用于调试的插件。插件包括Layout, Network,Shared preferences

Flipper 最大的好处是插件不多，但也可以轻松看到 Android / iOS 设备控制台调试。

Flipper 也会提醒您有关崩溃或网络拒绝的情况。

布局插件包括可访问性模式和目标模式。

您还可以在应用程序中查看原始网络请求/响应。

score 11 · Accepted Answer

如果您使用的是 Microsoft Visual Code ，请安装 React Native Tools 扩展。然后，您只需单击所需的行号即可添加断点。请按照以下步骤设置和调试应用程序：

如果您使用它，请不要忘记在模拟器中启用远程调试 JS。

score 9 · Accepted Answer

对我来说，在 React-Native 上进行调试的最佳方式是使用"Reactotron"。

安装 Reactotron，然后将这些添加到您的 package.json 中：

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2",

现在，只需登录您的代码即可。例如：console.tron.log('debug')

score 9 · Accepted Answer

在模拟器中运行您的应用程序 - react-native run-ios
按 ctrl + d 并单击远程调试 JS

网页应在http://localhost:8081/debugger-ui打开，如果没有输入 URL 并在 Chrome 中转到此链接
右键单击页面并单击检查，它应该打开 chrome 的开发人员工具

转到顶部菜单中的源并在右侧文件资源管理器中找到您的 js 类文件
您可以在视图中放置断点并在其中调试代码，如图所示。

score 7 · Accepted Answer

如果要默认启用调试：

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

要使其在 Android 上运行：

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

参考：默认启用“远程调试 JS”启动 React Native 应用程序

score 7 · Accepted Answer

首先在你的 ios 模拟器中，如果你按下 [command + D] 键然后你可以看到这个屏幕。

然后单击远程调试 JS 按钮。

之后你可能会看到这样的 React Native Debugger 页面。

然后打开你的inspector[f12]，然后去控制台选项卡调试它！:)

score 6 · Accepted Answer

默认情况下，我的 ios 模拟器没有拾取击键，这就是 cmd-D 不起作用的原因。我不得不使用模拟器的菜单打开键盘的设置：

硬件 > 键盘 > 连接键盘

现在 cmd-D 启动 chrome 调试。

score 6 · Accepted Answer

对于 android 应用程序。按 Ctrl+M 远程选择调试 js，它将在 chrome 中打开一个带有 URL http://localhost:8081/debugger-ui的新窗口。您现在可以在 chrome 浏览器中调试应用程序

score 5 · Accepted Answer

在文件路径中有一个空格会阻止+Cmd工作D。我将我的项目移动到一个没有空间的位置，我终于让 Chrome 调试器工作了。似乎是一个错误。

score 4 · Accepted Answer

您可以使用 Safari 来调试您的应用程序的 iOS 版本，而无需启用“远程调试 JS”，只需按照以下步骤操作：

1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger

score 4 · Accepted Answer

如果您使用的是模拟器，请使用Ctrl+M和模拟器Cmd+D
点击 - 远程调试 js
谷歌浏览器转到控制台

score 4 · Accepted Answer

假设您想在Android 模拟器上显示此菜单

然后，尝试⌘+m在 Mac 上的 Android 模拟器上弹出此开发设置对话框。
如果未显示，请转到AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box。
然后重试⌘+m。
如果它仍然没有显示，请转到正在运行的模拟器设置，然后在Send keyboard shortcuts to组合框/下拉列表中选择该Emulator controls (default)选项。

然后重试⌘+m。
我希望这会有所帮助，它对我有用。

score 4 · Accepted Answer

这是使用反应原生调试器应用程序的替代方法。

您可以使用下面的链接下载应用程序，它是用于管理 redux 存储以及源代码的非常好的应用程序。

反应本机调试器

现在你也可以直接使用下面的链接来帮助你。

chrome 开发者工具

score 4 · Accepted Answer

如果你使用 Redux，我强烈推荐 React Native Debugger。它包括 Chrome devtools，但也有 Redux devtools 和 React devtools。

Redux Devtools：这允许您查看您的操作，并在它们之间来回切换。它还允许您查看您的 redux 存储，并具有自动区分先前状态与每个操作的更新状态的功能，因此您可以在一系列操作中来回切换时看到这一点。

React Devtools：这允许您检查某个组件，即它的所有道具以及它的组件状态。如果你有一个布尔值的组件状态，它可以让你点击它来切换它，看看你的应用程序在它改变时如何反应。很棒的功能。

Chrome Devtools允许您查看所有控制台输出、使用断点、在调试器上暂停；等标准调试功能。如果您右键单击 Redux Devtools 中列出您的操作的区域并选择“允许网络检查”，那么您可以在 Chrome Devtools 的网络选项卡中检查您的 API 调用，这很不错。

总之，将这些都放在一个地方真是太棒了！如果您不需要其中之一，您可以打开/关闭它。获取 React Native Debugger 并享受生活。

score 4 · Accepted Answer

4

很简单只有两个命令

For IOS $ react-native log-ios
For Android $ react-native log-android

于 2017-03-30T05:29:14.783 回答

score 3 · Accepted Answer

还有一个非常好的调试器名称 Reactotron。 https://github.com/infinitered/reactotron

您不必处于调试模式即可查看某些数据值，并且有很多选项。

去看看，真的很有用。;)

score 3 · Accepted Answer

第 1 步： 放置debugger您想要停止脚本的位置，例如：

  async saveItem(item, selectedValue) {
    debugger
    try {
        await AsyncStorage.setItem(item, selectedValue);
    }
    catch (error) {
        console.error('AsyncStorage error: ' + error.message);
    }
}

当控制到这个代码块时，这将暂停调试器。

Cmd+D第2步：按下ios 模拟器和Android 模拟器Cmd+M。如果您使用的是真实设备，请摇动设备以打开开发菜单，如果您不想摇动设备，请关注此博客

第 3 步： 选择Enable Remote JS Debugging，这将打开 Chrome

第 4 步： 选择Developer Tools.

第 5 步： 您的调试器暂停在您在代码Sources中编写的任何选项卡中。debugger转到控制台并键入您要调试的任何参数（存在于代码块中），例如：移动到下一个调试器点再次移动到源 - >单击恢复脚本执行按钮（右上角的蓝色按钮）

将调试器放在要暂停脚本的任何位置。

享受调试！

score 3 · Accepted Answer

在 React-Native 中调试要容易得多。

在 IOS 中调试使用

cmd + d

ctrl + cmd + z （用于模拟器）

在android中调试

通过触摸摇动设备（确保您的开发人员选项已启用）

score 2 · Accepted Answer

使用可视化代码工作室调试原生 android 和 ios 应用程序的最佳方法

步骤1。

安装React Native - 完整包扩展

第2步。

使用USB 调试模式连接移动设备或从 android studio 打开模拟器。

步骤 3。

在visual code studio的左侧菜单中点击debugging选项点击Add configuration并选择React Native然后创建launch.json

第4步。

长按后打开手机中的开发选项或摇动手机并远程启用调试js

步骤 5。

最后一步点击播放按钮并选择Debug android或Debug ios

有关更多信息，请参阅此链接

https://medium.com/@tunvirrahmantusher/android-debug-with-vscode-for-react-native-96f54d73462a

score 1 · Accepted Answer

如果您在 Atom 编辑器中使用 Nuclide 进行 React Native 应用程序开发，那么您还可以使用“元素检查器”，当应用程序在开发阶段在设备上运行时，它有助于观察道具和状态值的变化。

在这里了解更多

score 1 · Accepted Answer

要调试您的 React Native 应用程序，只需转到以下地址：

localhost:8081/debugger-ui 在您的默认浏览器（chrome）中并打开开发人员工具来调试您的反应原生应用程序

score 1 · Accepted Answer

如果您不想每 2 分钟晃动一次真正的手机，也可以使用自定义库

我创建了一个库，允许您在开发模式下使用 3 个手指触摸而不是摇晃来打开开发菜单

https://github.com/pie6k/react-native-dev-menu-on-touch

您只需将您的应用程序包装在里面：

从“react-native-dev-menu-on-touch”导入 DevMenuOnTouch；// or: import { DevMenuOnTouch } from 'react-native-dev-menu-on-touch'

class YourRootApp extends Component {
  render() {
    return (
      <DevMenuOnTouch>
        <YourApp />
      </DevMenuOnTouch>
    );
  }
}

当您必须在真实设备上进行调试并且有同事坐在您旁边时，它非常有用。

score 1 · Accepted Answer

其实很简单。只需按 cmd D（如果在 mac 上），模拟器就会创建一个弹出菜单。从那里只需单击“远程调试 JS”或类似的东西。请注意，在执行与某些包相关的代码时运行调试器会给人们带来问题。我遇到了 react-native-maps 和调试器的问题。但这是固定的。不过，在大多数情况下，您应该没问题。

score 1 · Accepted Answer

在终端运行adb logcat *:S ReactNative:V ReactNativeJS:V
在 Android Studio 中打开项目，打开logcat（底部面板上的按钮）
在终端运行react-native run-android

构建后，您应该会在 Android Studio 中看到详细的日志logcat。

score 1 · Accepted Answer

使用Flipper或reactotron。每个都有自己的好处，没有一个需要您启用调试模式，因此您的环境不会变慢！

score 0 · Accepted Answer

在 Windows 中并使用 android 模拟器，您可以执行以下步骤：

模拟器运行和应用程序运行后，按菜单按钮，然后选择“远程调试 JS”或“在 Chrome 中调试”（这取决于使用的模拟器）。您可以看到下一张图片作为参考：emulator with steps image
将出现一个新的 Chrome 选项卡。您必须按 Ctrl + ⇧J 才能显示开发工具并开始跟踪调试步骤。请参阅此图像作为参考

此外，您应该使用该console.log()功能使调试过程更具描述性。

score 0 · Accepted Answer

您可以使用 expo 进行调试：https ://expo.io/

Expo 让 Web 开发人员只需用 JavaScript 编写一次即可构建真正的原生应用程序，这些应用程序可以在 iOS 和 Android 上运行。它是开源的、免费的并使用 React Native。

这是一个很棒的工具，你可以在 React Europe conf 观看这个研讨会：

https://www.youtube.com/watch?v=HygXkQDMSGU&t=6675s

score 0 · Accepted Answer

如果您想了解检查网络流量并了解本机 UI 视图层次结构。凭借其可扩展的插件 API，React Native Update 版本提供了用于调试移动应用程序的开发人员工具。

Flipper 是一款出色的开发者工具，用于调试移动应用程序。此工具随附 react-native 62

score 0 · Accepted Answer

0

在模拟器上按下Cmd+D并选择调试将打开浏览器调试器

于 2021-06-24T11:09:39.443 回答

score 0 · Accepted Answer

这真的取决于我在做什么。如果我正在进行 UI 更改或调试 UI，我通常会打开实时和热重载并进行更改，然后获得即时反馈。如果是更技术性的东西，我会打开 JS 调试来查看应用程序的状态。但是，由于重新加载对本机反应非常快，如果状态太混乱，我只是控制台日志。

score 0 · Accepted Answer

我使用这个库来调试 react-native 项目

https://github.com/jhen0409/react-native-debugger 它包括

包括来自 react-devtools-core 的 React Inspector。
包括 Redux DevTools，与 redux-devtools-extension 制作了相同的 API。

或者你可以使用

For IOS $ react-native log-ios
For Android $ react-native log-android

score 0 · Accepted Answer

我使用的一种与 Android 中的调试策略非常相似的技术是在我的所有 .js 文件中包含一个名为 TAG 的全局变量。

const TAG = 'APP_NAME+SCREEN_NAME';

然后在需要的地方，我会做：console.log(TAG + 'ACTION');

这样，我可以跟踪操作并查看日志语句的来源。

score 0 · Accepted Answer

0

您可以从 brew 安装 React Native Debugger。使用起来比 chrome 中的调试器更舒服

于 2017-03-26T09:09:06.877 回答

score 0 · Accepted Answer

在新版本的 react-native 中，您可以使用react-native log-android或 react-native log-android在开发模式下查看应用程序的日志。

score 0 · Accepted Answer

如果您在连接到笔记本电脑的真实设备上运行您的应用程序，您可以使用react-native log-ios或通过终端调试它react-native log-android（它也适用于模拟器）

score 0 · Accepted Answer

0

反应本机调试器。它帮助我解决了 90% 的问题

于 2019-02-25T01:08:28.337 回答

android - 你如何调试 React Native？

48 回答 48

调试 React Native 应用程序

可选的

实时重新加载

React Native 0.62 发布 -官方解决方案是 Flipper

Related

Reference