当应用程序在应用模拟器中运行时,如何用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>
    );
  }
}

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

其他回答

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

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远程”

我没有足够的声誉来评论之前的答案,这些答案都很好。:) 以下是我在开发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问题肯定会有帮助。

希望这能帮助到一些人。

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

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

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

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

在文件路径中设置空格会阻止Cmd+D的工作。我把我的项目移动到一个没有空间的位置,我终于让Chrome调试器工作了。看起来像个bug。

要调试你的react原生应用程序,只需到以下地址:

localhost: 8081 / debugger-ui 在你的默认浏览器(chrome)和打开开发者工具来调试你的react原生应用程序