如何调试React Native?

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

当前回答

在模拟器- react-native Run -ios中运行你的应用程序按ctrl + d，然后点击Debug JS remote

网页应该在http://localhost:8081/debugger-ui打开，如果没有输入URL，在Chrome中进入这个链接右键点击页面，点击检查，它应该打开chrome开发工具

转到顶部菜单中的源代码，在右侧的文件资源管理器中找到你的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远程”

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

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

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

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

你也可以使用自定义库，如果你不想摇你的真实手机每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>
    );
  }
}

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

使用Flipper或retotron。每一种都有自己的好处，没有一种要求您启用调试模式，所以您的环境不会变慢!

推荐文章