当应用程序在应用模拟器中运行时,如何用React Native调试他们的React代码?


当前回答

如果你正在使用Redux,我强烈推荐React Native Debugger。它包括Chrome开发工具,但也有Redux开发工具和React开发工具。

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

React Devtools:这允许你检查某个组件,即它的所有道具以及它的组件状态。如果你有一个组件状态的布尔值,它让你点击它来切换它,看看当它改变时你的应用程序是如何反应的。很棒的特性。

Chrome Devtools允许你看到你所有的控制台输出,使用断点,暂停调试器;等。标准调试功能。如果你右键单击Redux Devtools中列出的操作区域,并选择“允许网络检查”,你可以在Chrome Devtools的网络选项卡中检查你的API调用。

总之,把这些都放在一个地方真是太棒了!如果你不需要其中一个,你可以打开/关闭它。获得React本机调试器并享受生活。

其他回答

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

步骤1。

安装React Native -完整的扩展包

步骤2。

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

步骤3。

在可视代码工作室的左侧菜单中单击调试选项 点击添加配置,选择React Native,然后创建launch.json

步骤4。

打开dev选项在手机上的长后按或摇手机和启用调试js远程

第5步。

最后一步点击播放按钮,选择调试android或调试ios

更多信息请参考这个链接

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

如果你正在使用Microsoft Visual Code,那么安装React Native Tools扩展。然后,只需单击所需的行号就可以添加断点。 按照以下步骤来安装和调试应用程序:

不要忘记启用调试JS远程模拟器,如果你使用它。

在Windows中,使用android模拟器,你可以执行以下步骤:

模拟器运行后,应用程序在它上面,按下菜单按钮,然后选择“调试JS远程”或“调试在Chrome中”(这取决于模拟器使用)。你可以看到下一个图像作为参考:模拟器的步骤图像 一个新的Chrome标签将出现。你必须按Ctrl + J来显示开发人员工具,并开始跟踪调试步骤。请看这张图片作为参考

此外,您应该使用console.log()特性来使调试过程更具描述性。

如果您正在使用模拟器使用Ctrl+M和模拟器Cmd+D 远程单击- Debug js 谷歌Chrome浏览器进入控制台

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

Live reloading react-native makes it super easy to see your changes with the ⌘ + R keys or even just enable live reload and watchman will "refresh" the simulator with the latest changes. If you get an error, you can get a clue from the line number from that red screen. A couple of undo will get you back to working state and start again. console.log('yeah, seriously.') I find myself prefer letting the program run and logging some informations than adding a debugger break point. (tough debugger is useful when trying to work with external packages/libraries and it comes with autocompletion, so you know what other methods you can utilise.) Enable Chrome Debugging with debugger; break point in your program.

这取决于您遇到的错误类型以及您对如何调试的偏好。对于大多数未定义的不是一个对象(评估'something.something'),方法1和2对我来说已经足够好了。

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

有时它来自react-native平台本身,所以谷歌一下react-native问题肯定会有帮助。

希望这能帮助到一些人。