如何调试React Native?

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

当前回答

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

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

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

其他回答

在终端adb logcat *:S ReactNative:V ReactNativeJS:V 在Android Studio中打开项目，打开logcat(底部面板上的按钮) 在终端react-native Run -android中运行

构建完成后，您应该在logcat中看到Android Studio中的详细日志。

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

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

如果你想了解检查网络流量和理解原生UI视图层次结构。通过其可扩展的插件API, React Native Update版本为调试移动应用程序提供了开发人员工具。

Flipper是一个调试移动应用程序的很棒的开发工具。该工具随react-native 62一起发布

我使用这个库来调试react-native项目

https://github.com/jhen0409/react-native-debugger 它包括

包括React -devtools-core中的React Inspector。包括回家的 DevTools，用redux-devtools-extension做了相同的API。

或者你可以用

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

你也可以使用自定义库，如果你不想摇你的真实手机每2分钟

我创建了一个库，允许你在开发模式下使用3个手指触摸而不是摇晃来打开开发菜单

https://github.com/pie6k/react-native-dev-menu-on-touch

你只需要在里面包装你的应用程序:

从react-native-dev-menu-on-touch导入DevMenuOnTouch; //或:import {DevMenuOnTouch} from 'react-native-dev-menu-on-touch'

class YourRootApp extends Component {
  render() {
    return (
      <DevMenuOnTouch>
        <YourApp />
      </DevMenuOnTouch>
    );
  }
}

当你必须在真正的设备上调试并且你有同事坐在你旁边时，它真的很有用。

推荐文章