本篇主要项目开发中如何调试及调试配置;
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是使用频率很高的两个工具。
后面会不断更新,实际开发中的用途;