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


当前回答

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

其他回答

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

Expo让web开发者能够构建真正的本地应用程序,可以在这两个平台上运行 iOS和Android只需要用JavaScript写一次。它是开放 源代码,免费并使用React Native。

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

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

非常简单,只有两个命令

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

步骤1: 把调试器放在你想要停止脚本的地方,比如:

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

这将在控制到达此代码块时暂停调试器。

步骤2: 在ios模拟器上按Cmd+D,在Android模拟器上按Cmd+M。 如果你有真正的设备,摇动设备打开开发菜单,如果你不想摇动设备,请关注这个博客

步骤3: 选择启用远程JS调试,这将打开Chrome

步骤4: 选择开发人员工具。

步骤5: 在源代码中编写调试器的任何地方,调试器都会在Sources选项卡中暂停。进入控制台,输入任何你想调试的参数(出现在代码块中),例如: 要移动到下一个调试器点,再次移动到Sources ->单击恢复脚本执行按钮(右下角蓝色按钮)

把调试器放在你想暂停脚本的任何地方。

享受调试! !

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

取消小部件 通过CMD + m单击debug在chrome中启用它

对于Android: Ctrl + M(模拟器)或摇动手机(在设备中)显示菜单。

对于iOS: Cmd + D或摇晃手机显示菜单

确保你有铬。

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

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

那里显示控制台,你可以看到日志被记录。