React Native真机调试安卓版

React Native真机调试安卓版

一、准备工作

1.1 环境搭建

  React Native中文网的文档已经非常清晰地描述了,按照步骤即可。http://reactnative.cn/docs/0.43/getting-started.html#content

1.2 安装React Developer Tool

  在chrome中安装插件React Developer Tool。

1.3 新建项目

  打开doc命令,初始化一个项目。

二、开始调试

  用数据线连接电脑和手机,然后运行命令react-native run-android。

  如果手机上出现白屏,那么在手机的“授权管理”中“显示悬浮窗”权限中允许当前APP。

  React Native真机调试安卓版

  修改好白屏后,出现红色错误(程序没问题的情况下),左右摇晃手机,在出现的管理界面中,点击“Dec Settings”,将“Debug server host & port for device”中设置为电脑的IP后加上:8081。

  React Native真机调试安卓版React Native真机调试安卓版

  当A项目能够正常运行后,左右摇晃手机,选择“Debug JS Remotely”。打开chrome,按ctrl + shit + J 或者按F12出现调试界面。

  React Native真机调试安卓版

  在调试窗口,当前选择的Sources。

  中间的窗口中,可以设置断点,也就是在代码的标号出点击鼠标左键。右边窗口的自动打开“BreakPoints”,而且会显示一些状态值、属性值。在右边窗口的上方,还可以进行异步调试。

上一篇:Cordova应用的JavaScript代码和自定义插件代码的调试


下一篇:JavaScript调用App原生代码(iOS、Android)通用解决方案