当应用程序在应用模拟器中运行时,如何用React Native调试他们的React代码?
当前回答
在Windows中,使用android模拟器,你可以执行以下步骤:
模拟器运行后,应用程序在它上面,按下菜单按钮,然后选择“调试JS远程”或“调试在Chrome中”(这取决于模拟器使用)。你可以看到下一个图像作为参考:模拟器的步骤图像 一个新的Chrome标签将出现。你必须按Ctrl + J来显示开发人员工具,并开始跟踪调试步骤。请看这张图片作为参考
此外,您应该使用console.log()特性来使调试过程更具描述性。
其他回答
你可以使用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
在文件路径中设置空格会阻止Cmd+D的工作。我把我的项目移动到一个没有空间的位置,我终于让Chrome调试器工作了。看起来像个bug。
默认情况下,我的ios模拟器没有捕捉到击键,这就是为什么cmd-D不能工作的原因。我必须使用模拟器的菜单打开键盘设置:
硬件>键盘>连接键盘
现在cmd-D启动chrome调试。
如果你正在使用Redux,我强烈推荐React Native Debugger。它包括Chrome开发工具,但也有Redux开发工具和React开发工具。
Redux Devtools:这允许你查看你的操作,并在它们之间来回切换。它还允许您查看redux存储,并具有自动区分每个操作的先前状态和更新状态的功能,因此当您在一系列操作中来回执行时,您可以看到这一点。
React Devtools:这允许你检查某个组件,即它的所有道具以及它的组件状态。如果你有一个组件状态的布尔值,它让你点击它来切换它,看看当它改变时你的应用程序是如何反应的。很棒的特性。
Chrome Devtools允许你看到你所有的控制台输出,使用断点,暂停调试器;等。标准调试功能。如果你右键单击Redux Devtools中列出的操作区域,并选择“允许网络检查”,你可以在Chrome Devtools的网络选项卡中检查你的API调用。
总之,把这些都放在一个地方真是太棒了!如果你不需要其中一个,你可以打开/关闭它。获得React本机调试器并享受生活。
对于Android应用程序,如果你正在使用Genymotion,你可以通过按CMD + m来切换菜单,但你可能必须在菜单中启用它。
取消小部件 通过CMD + m单击debug在chrome中启用它
推荐文章
- BottomSheetDialogFragment的圆角
- 在应用程序启动时出现“无法获得BatchedBridge,请确保您的bundle被正确打包”的错误
- 我如何改变默认对话框按钮的文本颜色在安卓5
- 更改单选按钮的圆圈颜色
- 如何在android中复制一个文件?
- adb找不到我的设备/手机(MacOS X)
- 如何使用Xcode创建。ipa文件?
- 动态改变UILabel的字体大小
- 如何在新的材质主题中改变背面箭头的颜色?
- androidviewpager与底部点
- 相同的导航抽屉在不同的活动
- 如何从视图中获得托管活动?
- 单一的TextView与多种颜色的文本
- 如何在非活动类(LocationManager)中使用getSystemService ?
- 在清单中注册应用程序类?