当应用程序在应用模拟器中运行时,如何用React Native调试他们的React代码?
当前回答
如果你想在默认情况下打开调试:
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 log-ios或react-native log-android通过终端调试它(它也适用于模拟器)
奇怪的是,⌘+ D对我不起作用。在iOS模拟器中按ctrl + cmd⌘+ Z确实为我打开了调试浏览器窗口。
这是弹出的屏幕:
详情请点击这里。
调试React原生应用程序
要调试react应用程序的javascript代码,请执行以下操作:
在iOS模拟器中运行应用程序。 按Command + D,打开一个网页http://localhost:8081/debugger-ui。(Chrome只现在)或使用摇手势 为更好的调试体验启用暂停捕获异常。 按命令+选项+ I打开Chrome开发工具,或通过视图->开发人员->开发人员工具打开。 现在您应该能够像往常一样进行调试了。
可选
为谷歌Chrome安装React开发人员工具扩展。当开发人员工具打开时,如果你选择React选项卡,这将允许你在视图层次结构中导航。
生活重新加载
要激活Live Reload,请执行以下操作:
在iOS模拟器中运行应用程序。 按Control + Command + Z键。 您现在将看到启用/禁用Live Reload,重新加载和启用/禁用调试选项。
我使用这个库来调试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
如果你在React原生应用程序开发中使用Atom编辑器中的Nuclide,那么你也可以使用“元素检查器”,这有助于观察开发阶段应用程序在设备上运行时的道具和状态值变化。
在这里了解更多
推荐文章
- 如何删除默认的导航栏空间在SwiftUI导航视图
- 警告:API ' variable . getjavacompile()'已过时,已被' variable . getjavacompileprovider()'取代
- 安装APK时出现错误
- 碎片中的onCreateOptionsMenu
- TextView粗体通过XML文件?
- 如何使线性布局的孩子之间的空间?
- DSL元素android.dataBinding。enabled'已过时,已被'android.buildFeatures.dataBinding'取代
- ConstraintLayout:以编程方式更改约束
- PANIC: AVD系统路径损坏。检查ANDROID_SDK_ROOT值
- 如何生成字符串类型的buildConfigField
- 在react native中隐藏/显示组件
- Recyclerview不调用onCreateViewHolder
- 如何在iOS中使用Swift编程segue
- Swift -整数转换为小时/分钟/秒
- Android API 21工具栏填充