如何调试React Native?

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

当前回答

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

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

其他回答

还有一个非常好的调试器Reactotron。 https://github.com/infinitered/reactotron

您不必在调试模式下查看一些数据值，而且有很多选项。

去看看真的很有用。；）

如果你正在使用Redux，我强烈推荐React Native Debugger。它包括Chrome开发工具，但也有Redux开发工具和React开发工具。

Redux Devtools:这允许你查看你的操作，并在它们之间来回切换。它还允许您查看redux存储，并具有自动区分每个操作的先前状态和更新状态的功能，因此当您在一系列操作中来回执行时，您可以看到这一点。

React Devtools:这允许你检查某个组件，即它的所有道具以及它的组件状态。如果你有一个组件状态的布尔值，它让你点击它来切换它，看看当它改变时你的应用程序是如何反应的。很棒的特性。

Chrome Devtools允许你看到你所有的控制台输出，使用断点，暂停调试器;等。标准调试功能。如果你右键单击Redux Devtools中列出的操作区域，并选择“允许网络检查”，你可以在Chrome Devtools的网络选项卡中检查你的API调用。

总之，把这些都放在一个地方真是太棒了!如果你不需要其中一个，你可以打开/关闭它。获得React本机调试器并享受生活。

在React-Native中，调试要容易得多。

在IOS中使用调试

CMD + d ctrl + cmd + z(用于模拟器)

在android中调试

用触摸摇动设备(确保你的开发者选项是启用的)

试试这个程序:https://github.com/jhen0409/react-native-debugger

适用于:windows, osx和linux。

它支持:react native和redux

你还可以检查虚拟组件树，修改应用中反映的样式。

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

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

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

推荐文章