ReactNative 学习笔记- Debug

真机调试

• 开启USB调试 adb reverse tcp:8081 tcp:8081（Android 5.0以上：不使用设定ip和端口）
• 摇晃手机，弹出Menu。选择debug （需要安装chrome浏览器）
• console.log() 打出调试信息
• breakpoint 断点调试

设备端 Menu

手机摇晃会出现Menu

1. ReloadJS

   重新加载JS和刷新http://localhost:8081/index.android.bundle?platform=android 同样的效果
   
   当应用启动运行的时候，会自动拉取这个bundle文件。
   
   该文件里存放的是应用的全部逻辑代码，在目录中并不存在这个文件。
   事实上，这个地址只是一个请求地址，而非真正的静态资源文件。
   
   是通过包服务器packager通过动态分析index.android.js中的依赖，并对其进行合并得到的.

2. 调试

   http://localhost:8081/debugger-ui （chrome浏览器）

   F12打开右侧窗口

3. Enable Hot Reloading

   热更新

4. Enable Live Reload

   JS变动后自动刷新，不需要点击Reload JS. 不过不太稳定

5. 检查元素

   点击后可以在设备端查看各组件layout信息，给服务器端的检查元素类似

6. Enable Perf Monitor

   性能监视器，可以看到fps等信息

breakpoint

• chrome 浏览器 Sources里面，选择code添加breakpoint. reload JS查看效果

• 鼠标移动查看变量值或者在Console中输入