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


当前回答

首先在你的ios模拟器中,如果你按[command + D]键,然后你可以看到这个屏幕。

然后单击远程调试JS按钮。

之后你可能会看到这样的React本机调试器页面。

然后打开你的检查器[f12],去控制台选项卡调试它!:)

其他回答

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

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

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

在react-native的新版本中,您可以使用react-native log-android或react-native log-android查看应用程序在dev模式下的日志。

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

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

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

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

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

我没有足够的声誉来评论之前的答案,这些答案都很好。:) 以下是我在开发react-native应用程序时调试的一些方法。

Live reloading react-native makes it super easy to see your changes with the ⌘ + R keys or even just enable live reload and watchman will "refresh" the simulator with the latest changes. If you get an error, you can get a clue from the line number from that red screen. A couple of undo will get you back to working state and start again. console.log('yeah, seriously.') I find myself prefer letting the program run and logging some informations than adding a debugger break point. (tough debugger is useful when trying to work with external packages/libraries and it comes with autocompletion, so you know what other methods you can utilise.) Enable Chrome Debugging with debugger; break point in your program.

这取决于您遇到的错误类型以及您对如何调试的偏好。对于大多数未定义的不是一个对象(评估'something.something'),方法1和2对我来说已经足够好了。

然而,处理由其他开发人员编写的外部库或包将需要更多的努力来调试,因此有一个像Chrome Debugging这样的好工具

有时它来自react-native平台本身,所以谷歌一下react-native问题肯定会有帮助。

希望这能帮助到一些人。