当应用程序在应用模拟器中运行时,如何用React Native调试他们的React代码?
当前回答
在模拟器上按Cmd+D并选择Debug将打开浏览器调试器
其他回答
奇怪的是,⌘+ D对我不起作用。在iOS模拟器中按ctrl + cmd⌘+ Z确实为我打开了调试浏览器窗口。
这是弹出的屏幕:
详情请点击这里。
在React-Native中,调试要容易得多。
在IOS中使用调试
CMD + d ctrl + cmd + z(用于模拟器)
在android中调试
用触摸摇动设备(确保你的开发者选项是启用的)
你可以从brew安装React本机调试器。它比chrome中的调试器使用起来更舒服
调试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,重新加载和启用/禁用调试选项。
你也可以使用自定义库,如果你不想摇你的真实手机每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>
);
}
}
当你必须在真正的设备上调试并且你有同事坐在你旁边时,它真的很有用。
推荐文章
- BottomSheetDialogFragment的圆角
- 在应用程序启动时出现“无法获得BatchedBridge,请确保您的bundle被正确打包”的错误
- 我如何改变默认对话框按钮的文本颜色在安卓5
- 更改单选按钮的圆圈颜色
- 如何在android中复制一个文件?
- adb找不到我的设备/手机(MacOS X)
- 如何使用Xcode创建。ipa文件?
- 动态改变UILabel的字体大小
- 如何在新的材质主题中改变背面箭头的颜色?
- androidviewpager与底部点
- 相同的导航抽屉在不同的活动
- 如何从视图中获得托管活动?
- 单一的TextView与多种颜色的文本
- 如何在非活动类(LocationManager)中使用getSystemService ?
- 在清单中注册应用程序类?