你如何debuggingreact-native？

当应用程序在应用程序模拟器中运行时，如何使用react-nativedebugging其反应代码？

Cmd + D从模拟器中。 它会popupChrome，从那里你可以使用开发工具。

编辑：

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

debugging回应原生应用程序

要debugging您的反应应用程序的JavaScript代码，请执行以下操作：

  1. 在iOS模拟器中运行您的应用程序。
  2. 按下Command + D ，网页将打开http：// localhost：8081 / debugger-ui 。 （仅适用于Chrome）或使用Shake Gesture
  3. 在捕获exception时启用暂停以获得更好的debugging体验。
  4. 按Command + Option + I打开Chrome开发人员工具，或通过View – > Developer – > Developer Tools打开它。
  5. 您现在应该可以像往常一样进行debugging。

可选的

为Google Chrome安装React Developer Tools扩展程序。 如果您在开发人员工具处于打开状态时select“ React选项卡，则这将允许您浏览视图层次结构。

Live Reload

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

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

对于Android应用程序，如果您正在使用Genymotion，则可以通过按CMD + m切换菜单，但是您可能必须通过执行此操作在菜单中启用它。

  • 解开不固定的小部件
  • 通过CMD + m启用它，点击chrome中的debug

cmd + D奇怪的是没有为我工作。 在iOS模拟器中按ctrl + cmd + z确实为我启动了debugging浏览器窗口。 这是popup的屏幕： React Native调试选项

更多详情： https ： //facebook.github.io/react-native/docs/debugging.html#content

除了其他的答案。 您可以使用debugging器语句来debuggingreact-native

例： 

 debugger; //breaks execution

你的chrome开发工具必须打开才能工作

我没有足够的声望来评论以前的答案，这很好。 :)以下是我在开发反应本机应用程序时如何进行debugging的一些方法。

  1. 实时重新加载

    react-native使用⌘+ R键轻松查看您的更改，甚至只需启用实时刷新function ，守望者就可以使用最新更改“刷新”模拟器。 如果出现错误，您可以从红色屏幕的行号中得到线索。 几个撤消会让你回到工作状态，并重新开始。

  2. console.log('yeah, seriously.')

    我发现自己更喜欢让程序运行并logging一些信息，而不是添加debugger断点。 （当试图使用外部包/库时，艰难的debugging器是有用的，并且它带有自动完成，所以你知道你可以使用其他方法。）

  3. 使用debugger; Enable Chrome Debugging debugger; 在你的程序中的断点。

那么这取决于你遇到的错误的types和你如何debugging的首选项。 对于大多数undefined is not an object (evaluating 'something.something') ，方法1和2对我来说就足够了。

而处理由其他开发人员编写的外部库或包需要更多的努力来进行debugging，因此Chrome Debugging等很好的工具

有时它来自反应原生平台本身，所以谷歌search反应原生问题肯定会有所帮助。

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

在Debian 8（Jessie）上debuggingreact-native 0.40.0可以通过在Chromium或Firebug中导航到http：// localhost：8081 / debugger-ui ，而您的应用在android模拟器中运行来完成。 要访问应用内开发者菜单，请在另一个terminal窗口中运行以下命令，如下所示：

adb shell input keyevent 82

在这里输入图像说明

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

适用于： windows ， osx和linux 。

它支持： react native和redux

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

  1. 在模拟器中运行你的应用 – react-native run-ios
  2. 按下ctrl + d并点击Debug JS Remotely

在这里输入图像说明

  1. 网页应在http：// localhost：8081 / debugger-ui中打开，如果没有inputurl并转到Chrome中的此链接
  2. 右键单击该页面，然后单击检查，它应该打开Chrome的开发人员工具

在这里输入图像说明

  1. 转到顶部菜单中的源代码，并在右侧文件浏览器中find您的js类文件

  2. 您可以将断点放到视图中，然后在图像中看到debugging代码。 

 adb logcat *:S ReactNative:V ReactNativeJS:V

在Android日志中运行这个terminal。

对于android应用程序，请按Ctrl + M远程debuggingjs，它将使用url http：// localhost：8081 / debugger-ui在chrome中打开一个新窗口。 您现在可以在Chrome浏览器中debugging应用程序

对我来说，在React-Native上debugging的最好方法是使用“Reactotron” 。

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

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

现在，它只是login你的代码的问题。 例如： console.tron.log('debug')

默认情况下，我的ios模拟器没有拿起击键，这就是为什么CMD-D不工作。 我不得不使用模拟器的菜单打开键盘的设置：

硬件>键盘>连接键盘

现在cmd-D启动chromedebugging。

在文件path中有一个空格可以防止 Cmd + D工作。 我把我的项目移动到一个没有空间的位置，我终于得到了Chromedebugging器的工作。 看起来像一个错误 。

假设你想在Android模拟器上显示这个菜单 在这里输入图像说明

  • 然后，尝试⌘+m在Mac上的Android模拟器上popup此开发设置对话框。

  • 如果没有显示，请转到AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box 。 在这里输入图像说明

  • 然后重试⌘+m 。

  • 如果它不显示静止然后去运行仿真器设置，并在Send keyboard shortcuts tocombobox/下拉，然后selectEmulator controls (default)选项。

在这里输入图像说明

  • 然后重试⌘+m 。

  • 我希望这有助于，它为我工作。

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

 adb shell input keyevent 82

它会提示一个像图片一样的屏幕 在这里输入图像说明

然后select 

 debug JS Remotely

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

很简单，只有两个命令 

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

如果您使用Microsoft Visual代码，则安装React Native Tools扩展。 然后，您只需点击所需的行号即可添加断点。 按照以下步骤设置和debugging应用程序： 建立 跑

不要忘记在模拟器中启用debuggingJS远程，如果你使用它。

debugging您的反应本机应用程序只需转到以下地址：

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

如果您在Atom编辑器中使用Nuclide进行React本地应用程序开发，那么您还可以在开发阶段在设备上运行应用程序时帮助观察道具和状态值变化的“元素检查器”。 在这里了解更多 – https://nuclide.io/docs/platforms/react-native/#element-inspector enter image description here

Reactotron还有一个很好的debuger名字。 https://github.com/infinitered/reactotron

您不必在debugging模式下查看一些数据值，并有很多选项。

去看看是非常有用的。 ;）

在Windows和使用Android模拟器，你可以做这个步骤：

  1. 模拟器运行后，在其上的应用程序，按菜单button，然后select“debuggingJS远程”或“在Chrome中debugging”（这取决于使用模拟器）。 您可以看到下一个图像作为参考： 带有步骤图像的模拟器
  2. 一个新的Chrome标签将出现。 您必须按Ctrl +⇧J才能显示开发人员工具并开始跟踪debugging步骤。 看到这个图像作为参考

此外，您应该使用console.log()function使debugging过程更具描述性。

您可以从brew安装React Native Debugger。 在Chrome中使用比debugging器更舒适

这真的取决于我在做什么。 如果我正在进行UI更改或debugging用户界面，我通常打开实时和热重新加载，然后进行更改，然后立即获得反馈。 如果是更具技术性的东西，我打开JSdebugging来查看应用程序的状态。 然而，因为重新加载是非常快的反应本地，如果状态太乱，我只是控制台日志。

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

你可以使用expo进行debugging： https ： //expo.io/

世博会让networking开发人员只用JavaScript编写一次真正的本地应用程序，可以跨iOS和Android使用。 它是开源的，免费的，并使用React Native。

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

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

我在Android中使用的一种非常类似于debugging策略的技术是在我的所有.js文件中包含名为TAG的全局variables。 

 const TAG = 'APP_NAME+SCREEN_NAME';

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

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

  1. 如果您正在使用模拟器，请使用Ctrl + M和模拟器Cmd + D

  2. 点击 – 远程debuggingjs

  3. 谷歌浏览器转到控制台

这其实很简单。 只需按cmd D（如果在Mac上），模拟器将创build一个popup式菜单。 从那里只需点击“远程debuggingJS”或其他的东西。 请注意，在执行与特定软件包相关的代码时运行debugging器已知会给人们带来麻烦。 我有一个反应原生地图和debugging器的问题。 但是这是固定的。 大多数情况下，你应该罚款。

Interesting Posts

将整个对象转储到C＃中的日志的最佳方法是什么？

从JavaScriptlogin到Firefox错误控制台

我怎样才能在Android上debuggingJavaScript？

最难追踪的错误types？

python脚本的文件名和行号

如何传递参数并将stdin从文件redirect到程序在gdb中运行？

如何使用Eclipse逐行debuggingAndroid应用程序？

Objective-C中的NS_BLOCK_ASSERTIONS

后缀#DEN表示variables的值是什么意思

开始学Windbg