Developer Menu

React Native给开发者定制的一个开发者菜单，来帮助开发者调试React Native应用。

* Android 模拟器开启 Command* + M
* iOS模拟器 Command* + D
* 真机可以通过摇动手机开启

手动刷新 Reload

只修改了JS代码的情况下，不需要重新编译应用，只需要React Native 重新加载JS即可

自动刷新（Enable Live Reload）

当JS代码发生变化后， ReactNative会自动生成bundle然后传输到模拟器或者手机上

Error and Warings

在 development 模式下， JS部分的Errors 和 Warings 会直接打印在手机或者模拟器屏幕上，以红屏和黄屏展示

Chrom Developer Tools

Chrome 开发工具

谷歌 Chrome 开发工具，是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题，设置 JavaScript 断点并可深入理解代码的最优化策略。 Chrome 开发工具一共提供了8大组工具：
    •   Element 面板： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
    •   Network 面板：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。
    •   Source 面板：用于查看和调试当前页面所加载的脚本的源文件。
    •   TimeLine 面板： 用于查看脚本的执行时间、页面元素渲染时间等信息。
    •   Profiles 面板：用于查看 CPU 执行时间与内存占用等信息。
    •   Resource 面板：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等。
    •   Audits 面板：用于优化前端页面，加速网页加载速度等。
    •   Console 面板：用于显示脚本中所输出的调试信息，或运行测试脚本等。

启用Chrome 调试React Native程序步骤：

第一步

在Developer Menu下单击”Debug JS Remotely” 启动JS远程调试功能。此时Chrome会被打开，同时会创建一个“http://localhost:8081/debugger-ui.” Tab页。

第二步

在该“http://localhost:8081/debugger-ui.”Tab页下打开开发者工具。打开Chrome菜单->选择更多工具->选择开发者工具。你也可以通过快捷键(Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows)打开开发者工具。

RN-调试技巧