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


当前回答

其实很简单。只需按cmd D(如果在mac上),模拟器将创建一个弹出菜单。从那里只需点击“调试JS远程”或类似的东西。注意,在执行与某些包相关的代码时运行调试器会给人们带来问题。我有一个问题与反应本机映射和调试器。但这是固定的。不过,在大多数情况下,你应该没问题。

其他回答

如果你在连接到笔记本电脑的真实设备上运行应用程序,你可以使用react-native log-ios或react-native log-android通过终端调试它(它也适用于模拟器)

对我来说,在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(调试)

我使用的一种技术非常类似于Android中的调试策略,即在所有.js文件中包含一个名为TAG的全局变量。

const TAG = 'APP_NAME+SCREEN_NAME';

然后在需要的地方,我将这样做:console.log(TAG + 'ACTION');

通过这种方式,我可以跟踪操作并查看日志语句的来源。

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

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

如果你想在默认情况下打开调试:

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

要让它在Android上工作:

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

参考:启动一个React Native应用程序,默认启用“调试JS远程”