当应用程序在应用程序模拟器中运行时，如何使用React Native调试其React代码？
调试您的react本机应用程序只需转到以下地址：
localhost:8081/debugger-ui 在您的默认浏览器（chrome）中打开开发人员工具来调试您的本机应用程序
在React-Native中调试要容易得多 .
cmd d ctrl cmd z（适用于模拟器）
触摸摇动设备（确保启用了开发人员选项）
Cmd D来自模拟器 . 它会弹出Chrome，然后你可以使用开发人员工具 .
编辑：
现在链接在help docs中 .
对于Android：Ctrl M（模拟器）或摇动手机（在设备中）以显示菜单 .
对于iOS：Cmd D或摇动手机以显示菜单
确保你有铬 .
在显示的菜单上选择Debug JS Remotely Option .
Chrome将在localhost：8081 / debugger-ui自动打开 . 您也可以使用此链接手动转到调试器 .
显示控制台，您可以看到记录的日志 .
cmd⌘D奇怪的是不适合我 . 在iOS模拟器中按ctrlcmd⌘Z确实为我启动了调试浏览器窗口 .
这是弹出的屏幕：
More details here.
对于Android应用程序，如果您正在使用Genymotion，您可以通过按 CMD + m 切换菜单，但您可能必须通过执行此操作在菜单中启用它 .
CMD + m
Untick widget
启用 CMD + m 点击 debug in chrome
如果你想在Windows上使用Android设备进行调试，只需打开一个命令提示符然后输入（确保你的adb正常工作）
adb shell input keyevent 82
它会提示像图像的屏幕
然后选择
debug JS Remotely
它将自动打开一个新窗口 . 然后打开检查元件或按F12键进入控制台 .
您可以从brew安装React Native Debugger . 它比使用chrome的调试器更舒适
如果您使用的是模拟器，请使用Ctrl M＆simulator Cmd D.
单击 - 远程调试js
Google Chrome转到控制台
试试这个程序：https://github.com/jhen0409/react-native-debugger
适用于： windows ， osx 和 linux .
windows
osx
linux
它支持： react native 和 redux
react native
redux
您还可以检查虚拟组件树并修改应用程序中反映的样式 .
在Windows中并使用Android模拟器，您可以执行以下步骤：
模拟器运行并在其上运行应用程序后，按 Menu 按钮，然后选择"Debug JS Remotely"或"Debug in Chrome"（这取决于模拟器的使用） . 您可以看到下一张图片作为参考：emulator with steps image
将显示新的Chrome标签 . 您必须按Ctrl⇧J以显示开发人员工具并开始跟踪调试步骤 . See this image as reference
此外，您应该使用 console.log() 功能来使调试过程更具描述性 .
console.log()
除了其他答案 . 您可以使用调试器语句调试react-native
例：
debugger; //breaks execution
您的chrome dev工具必须打开才能工作
还有一个非常好的debuger名称Reactotron . https://github.com/infinitered/reactotron
您不必处于调试模式以查看某些数据值，并且有很多选项 .
去看看真的很有用 . ;）
很简单只有两个命令
For IOS $ react-native log-ios For Android $ react-native log-android
假设您要在 Android emulator 上显示此菜单
然后，尝试 ⌘+m 在Mac上的Android模拟器上弹出此开发设置对话框 .
⌘+m
如果没有显示则转到 AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box .
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) 选项 .
Send keyboard shortcuts to
Emulator controls (default)
我希望这有帮助，它对我有用 .
对我来说，在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')
console.tron.log('debug')
对于Android应用程序 . 按Ctrl M远程选择调试js它将在chrome中打开一个新窗口，其中包含url http://localhost:8081/debugger-ui . 您现在可以在Chrome浏览器中调试应用程序
在模拟器中运行您的应用程序 - react-native run-ios
按ctrl d并远程单击Debug JS
网页应该在http://localhost:8081/debugger-ui打开，如果没有输入网址并转到Chrome中的此链接
右键单击页面并单击Inspect，它应该打开chrome的开发人员工具
转到顶层菜单中的源，在右侧文件资源管理器中找到您的js类文件
您可以在视图中放置断点并调试其中的代码，如图中所示 .
在你的应用程序在android模拟器中运行时，可以通过导航到Chromium或Firebug中的http://localhost:8081/debugger-ui来调试Debian 8（Jessie）上的react-native 0.40.0 . 要访问应用内开发人员菜单，请在另一个终端窗口中运行以下命令，如here所示：
要调试您的react应用程序的javascript代码，请执行以下操作：
在iOS模拟器中运行您的应用程序 .
按 Command + D ，网页应在http://localhost:8081/debugger-ui打开 . （仅适用于Chrome）或使用 Shake Gesture
Command + D
Shake Gesture
启用Pause On Caught Exceptions以获得更好的调试体验 .
按 Command + Option + I 打开Chrome开发者工具，或通过 View - > Developer - > Developer Tools 打开它 .
Command + Option + I
View
Developer
Developer Tools
您现在应该可以像平常一样进行调试将 .
安装Google Chrome的React Developer Tools扩展程序 . 如果在打开开发人员工具时选择 React 选项卡，则可以导航视图层次结构 .
React
要激活Live Reload，请执行以下操作：
按 Control + Command + Z .
Control + Command + Z
您现在将看到 Enable/Disable Live Reload ， Reload 和 Enable/Disable Debugging 选项 .
Enable/Disable Live Reload
Reload
Enable/Disable Debugging
默认情况下，我的ios模拟器没有接受击键，这就是为什么cmd-D不起作用的原因 . 我必须使用模拟器的菜单打开键盘的设置：
硬件>键盘>连接键盘
现在cmd-D启动了chrome调试 .
如果您使用的是Microsoft Visual Code，请安装React Native Tools扩展 . 然后，您只需单击所需的行号即可添加断点 . 请按照以下步骤设置和调试应用程序：
如果您使用它，请不要忘记在模拟器中启用Debug JS Remotely .
adb logcat *:S ReactNative:V ReactNativeJS:V
在Android日志终端中运行此命令 .
我没有足够的声誉评论以前的答案，这些答案很棒 . :)以下是我在开发react-native app时调试的一些方法 .
react-native使得使用⌘R键可以非常轻松地查看更改，甚至只需启用实时重新加载，看门人将使用最新更改进行模拟器 . 如果出现错误，您可以从该红色屏幕的行号中获取线索 . 一些撤消将让您回到工作状态并重新开始 .
我发现自己更喜欢让程序运行并记录一些信息而不是添加 debugger 断点 . （艰难的调试器在尝试使用外部软件包/库时非常有用，它带有自动完成功能，因此您可以了解可以使用的其他方法 . ）
debugger
那么这取决于您遇到的错误类型以及您如何调试的偏好 . 对于大多数 undefined is not an object (evaluating 'something.something') ，方法1和方法2对我来说已经足够了 .
undefined is not an object (evaluating 'something.something')
而处理外部库或其他开发人员编写的包需要更多的努力来调试，因此像 Chrome Debugging 这样的好工具
Chrome Debugging
有时它来自本地反应平台本身，所以谷歌搜索反应原生问题肯定会有所帮助 .
希望这有助于那里的人 .
它实际上非常简单 . 只需按cmd D（如果在Mac上），模拟器将创建一个弹出菜单 . 从那里只需单击“远程调试JS”或类似的东西 . 请注意，在执行与某些软件包相关的代码时运行调试程序会让人产生问题 . 我遇到了react-native-maps和调试器的问题 . 但这是固定的 . 在大多数情况下，你应该没事 .
如果您在Atom编辑器中使用Nuclide进行React Native App Development，那么您还可以使用"Element Inspector"，这有助于在应用程序在开发阶段的设备上运行时观察道具和状态值的变化 . 在这里了解更多 - https://nuclide.io/docs/platforms/react-native/#element-inspector enter image description here
如果您使用的是Redux，我强烈推荐使用React Native Debugger . 它包括Chrome devtools，还有Redux devtools和React devtools .
Redux Devtools ：这允许您查看您的操作，并在它们之间来回切换 . 它还允许您查看您的redux商店，并具有自动区分每个操作的更新状态的先前状态的功能，因此您可以在一系列操作中来回查看 .
React Devtools ：这允许您检查某个组件，即所有组件状态.343406_组件状态 . 如果您有一个组件状态是布尔值，它允许您单击它以切换它，并查看应用程序在更改时的反应 . 很棒的功能 .
Chrome Devtools 允许您查看所有控制台输出，使用断点，在调试器上暂停;等标准调试功能 . 如果您右键单击Redux Devtools中列出您的操作的区域并选择'Allow Network Inspect'，则可以在Chrome Devtools的网络选项卡中检查您的API调用 .
总之，将这些全部集中在一个地方真是太棒了！如果您不需要其中一个，您可以打开/关闭它 . 获取React Native Debugger并享受生活 .
这真的取决于我在做什么 . 如果我正在进行UI更改或调试UI，我通常会打开实时和热重新加载并进行更改然后获得即时反馈 . 如果它更具技术性，我打开JS调试来查看应用程序的状态 . 但是因为重新加载在本地反应如此之快，如果状态太乱，我只是控制日志 .
在文件路径中有一个空格 prevents Cmd D起作用 . 我将项目移动到没有空间的位置，我终于让Chrome调试器工作了 . 看起来像bug .
而不是Cmd M，用于Android模拟器在Windows中按F10 . 模拟器开始显示所有react-native调试选项 .
30 回答
调试您的react本机应用程序只需转到以下地址：
localhost:8081/debugger-ui 在您的默认浏览器（chrome）中打开开发人员工具来调试您的本机应用程序
在React-Native中调试要容易得多 .
Cmd D来自模拟器 . 它会弹出Chrome，然后你可以使用开发人员工具 .
编辑：
现在链接在help docs中 .
对于Android：Ctrl M（模拟器）或摇动手机（在设备中）以显示菜单 .
对于iOS：Cmd D或摇动手机以显示菜单
确保你有铬 .
在显示的菜单上选择Debug JS Remotely Option .
Chrome将在localhost：8081 / debugger-ui自动打开 . 您也可以使用此链接手动转到调试器 .
显示控制台，您可以看到记录的日志 .
cmd⌘D奇怪的是不适合我 . 在iOS模拟器中按ctrlcmd⌘Z确实为我启动了调试浏览器窗口 .
这是弹出的屏幕：
More details here.
对于Android应用程序，如果您正在使用Genymotion，您可以通过按
CMD + m切换菜单，但您可能必须通过执行此操作在菜单中启用它 .Untick widget
启用
CMD + m点击 debug in chrome如果你想在Windows上使用Android设备进行调试，只需打开一个命令提示符然后输入（确保你的adb正常工作）
它会提示像图像的屏幕
然后选择
它将自动打开一个新窗口 . 然后打开检查元件或按F12键进入控制台 .
您可以从brew安装React Native Debugger . 它比使用chrome的调试器更舒适
如果您使用的是模拟器，请使用Ctrl M＆simulator Cmd D.
单击 - 远程调试js
Google Chrome转到控制台
试试这个程序：https://github.com/jhen0409/react-native-debugger
适用于：
windows，osx和linux.它支持：
react native和redux您还可以检查虚拟组件树并修改应用程序中反映的样式 .
在Windows中并使用Android模拟器，您可以执行以下步骤：
模拟器运行并在其上运行应用程序后，按 Menu 按钮，然后选择"Debug JS Remotely"或"Debug in Chrome"（这取决于模拟器的使用） . 您可以看到下一张图片作为参考：emulator with steps image
将显示新的Chrome标签 . 您必须按Ctrl⇧J以显示开发人员工具并开始跟踪调试步骤 . See this image as reference
此外，您应该使用
console.log()功能来使调试过程更具描述性 .除了其他答案 . 您可以使用调试器语句调试react-native
例：
您的chrome dev工具必须打开才能工作
还有一个非常好的debuger名称Reactotron . https://github.com/infinitered/reactotron
您不必处于调试模式以查看某些数据值，并且有很多选项 .
去看看真的很有用 . ;）
很简单只有两个命令
假设您要在 Android emulator
上显示此菜单
然后，尝试
⌘+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.我希望这有帮助，它对我有用 .
对我来说，在React-Native上调试的最佳方法是使用"Reactotron" .
安装Reactotron然后将这些添加到你的package.json：
现在，只需登录您的代码即可 . 例如：
console.tron.log('debug')对于Android应用程序 . 按Ctrl M远程选择调试js它将在chrome中打开一个新窗口，其中包含url http://localhost:8081/debugger-ui . 您现在可以在Chrome浏览器中调试应用程序
在模拟器中运行您的应用程序 - react-native run-ios
按ctrl d并远程单击Debug JS
网页应该在http://localhost:8081/debugger-ui打开，如果没有输入网址并转到Chrome中的此链接
右键单击页面并单击Inspect，它应该打开chrome的开发人员工具
转到顶层菜单中的源，在右侧文件资源管理器中找到您的js类文件
您可以在视图中放置断点并调试其中的代码，如图中所示 .
在你的应用程序在android模拟器中运行时，可以通过导航到Chromium或Firebug中的http://localhost:8081/debugger-ui来调试Debian 8（Jessie）上的react-native 0.40.0 . 要访问应用内开发人员菜单，请在另一个终端窗口中运行以下命令，如here所示：
adb shell input keyevent 82调试React Native Apps
要调试您的react应用程序的javascript代码，请执行以下操作：
在iOS模拟器中运行您的应用程序 .
按
Command + D，网页应在http://localhost:8081/debugger-ui打开 . （仅适用于Chrome）或使用Shake Gesture启用Pause On Caught Exceptions以获得更好的调试体验 .
按
Command + Option + I打开Chrome开发者工具，或通过View- >Developer- >Developer Tools打开它 .您现在应该可以像平常一样进行调试将 .
可选
安装Google Chrome的React Developer Tools扩展程序 . 如果在打开开发人员工具时选择
React选项卡，则可以导航视图层次结构 .Live Reload
要激活Live Reload，请执行以下操作：
在iOS模拟器中运行您的应用程序 .
按
Control + Command + Z.您现在将看到
Enable/Disable Live Reload，Reload和Enable/Disable Debugging选项 .默认情况下，我的ios模拟器没有接受击键，这就是为什么cmd-D不起作用的原因 . 我必须使用模拟器的菜单打开键盘的设置：
硬件>键盘>连接键盘
现在cmd-D启动了chrome调试 .
如果您使用的是Microsoft Visual Code，请安装React Native Tools扩展 . 然后，您只需单击所需的行号即可添加断点 . 请按照以下步骤设置和调试应用程序：
如果您使用它，请不要忘记在模拟器中启用Debug JS Remotely .
在Android日志终端中运行此命令 .
我没有足够的声誉评论以前的答案，这些答案很棒 . :)以下是我在开发react-native app时调试的一些方法 .
react-native使得使用⌘R键可以非常轻松地查看更改，甚至只需启用实时重新加载，看门人将使用最新更改进行模拟器 . 如果出现错误，您可以从该红色屏幕的行号中获取线索 . 一些撤消将让您回到工作状态并重新开始 .
我发现自己更喜欢让程序运行并记录一些信息而不是添加
debugger断点 . （艰难的调试器在尝试使用外部软件包/库时非常有用，它带有自动完成功能，因此您可以了解可以使用的其他方法 . ）那么这取决于您遇到的错误类型以及您如何调试的偏好 . 对于大多数
undefined is not an object (evaluating 'something.something')，方法1和方法2对我来说已经足够了 .而处理外部库或其他开发人员编写的包需要更多的努力来调试，因此像
Chrome Debugging这样的好工具有时它来自本地反应平台本身，所以谷歌搜索反应原生问题肯定会有所帮助 .
希望这有助于那里的人 .
它实际上非常简单 . 只需按cmd D（如果在Mac上），模拟器将创建一个弹出菜单 . 从那里只需单击“远程调试JS”或类似的东西 . 请注意，在执行与某些软件包相关的代码时运行调试程序会让人产生问题 . 我遇到了react-native-maps和调试器的问题 . 但这是固定的 . 在大多数情况下，你应该没事 .
如果您在Atom编辑器中使用Nuclide进行React Native App Development，那么您还可以使用"Element Inspector"，这有助于在应用程序在开发阶段的设备上运行时观察道具和状态值的变化 . 在这里了解更多 - https://nuclide.io/docs/platforms/react-native/#element-inspector enter image description here
如果您使用的是Redux，我强烈推荐使用React Native Debugger . 它包括Chrome devtools，还有Redux devtools和React devtools .
Redux Devtools ：这允许您查看您的操作，并在它们之间来回切换 . 它还允许您查看您的redux商店，并具有自动区分每个操作的更新状态的先前状态的功能，因此您可以在一系列操作中来回查看 .
React Devtools ：这允许您检查某个组件，即所有组件状态.343406_组件状态 . 如果您有一个组件状态是布尔值，它允许您单击它以切换它，并查看应用程序在更改时的反应 . 很棒的功能 .
Chrome Devtools 允许您查看所有控制台输出，使用断点，在调试器上暂停;等标准调试功能 . 如果您右键单击Redux Devtools中列出您的操作的区域并选择'Allow Network Inspect'，则可以在Chrome Devtools的网络选项卡中检查您的API调用 .
总之，将这些全部集中在一个地方真是太棒了！如果您不需要其中一个，您可以打开/关闭它 . 获取React Native Debugger并享受生活 .
这真的取决于我在做什么 . 如果我正在进行UI更改或调试UI，我通常会打开实时和热重新加载并进行更改然后获得即时反馈 . 如果它更具技术性，我打开JS调试来查看应用程序的状态 . 但是因为重新加载在本地反应如此之快，如果状态太乱，我只是控制日志 .
在文件路径中有一个空格 prevents Cmd D起作用 . 我将项目移动到没有空间的位置，我终于让Chrome调试器工作了 . 看起来像bug .
而不是Cmd M，用于Android模拟器在Windows中按F10 . 模拟器开始显示所有react-native调试选项 .