4.React Native项目开发如何配置调试

本篇主要项目开发中如何调试及调试配置；

RN调试感觉比较痛苦，没有Android开发或者IOS开发那么灵活，说说如何配置；

1.在你运行起来的Android项目界面按住⌘-M会弹出如下列表

2.选择Debug JS Remotely选项会自动打开浏览器http://10.0.2.2:8081/debugger-ui，我们将IP地址改为127.0.0.1，然后开发控制台窗口

接下来就是配置Chrome插件，安装Allow-Control-Allow-Origin: *插件，插件下载地址是：

https://pan.baidu.com/s/19h-loTTclbXtlZv9K6McdQ

为Chrome添加插件扩展，添加插件扩展应该都会加，实在不会的留言吧；

3.测试调试环境是否配置成功

打开HelloWorld/App.js添加如下代码

    componentWillMount() {
        console.log("componentWillMount");
    }

重新运行项目查看Chrome控制台是否有日志输入

Running application "HelloWorld" with appParams: {"rootTag":131}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
App.js:32 componentWillMount
YellowBox.js:67 Debugger and device times have drifted by more than 60s. Please correct this by running adb shell "date `date +%m%d%H%M%Y.%S`" on your debugger machine.

当看到有componentWillMount字符串输出时恭喜你调试工具配置成功了；

4.Chrome 开发工具说明

谷歌 Chrome 开发工具，是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题，设置 JavaScript 断点并可深入理解代码的最优化策略。 Chrome 开发工具一共提供了8大组工具：

Element 面板： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
Network 面板：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。
Source 面板：用于查看和调试当前页面所加载的脚本的源文件。
TimeLine 面板： 用于查看脚本的执行时间、页面元素渲染时间等信息。
Profiles 面板：用于查看 CPU 执行时间与内存占用等信息。
Resource 面板：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等。
Audits 面板：用于优化前端页面，加速网页加载速度等。
Console 面板：用于显示脚本中所输出的调试信息，或运行测试脚本等。

提示：对于调试React Native应用来说，Sources和Console是使用频率很高的两个工具。

后面会不断更新，实际开发中的用途；