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是使用频率很高的两个工具。

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

4.React Native项目开发如何配置调试相关推荐

React Native 项目iOS真机调试红屏
错误信息: 反应本地版本不匹配. javascript版本xx.xx.xx 本地版本xx.xx.xx 原因:开启的反应原生服务与你当前运行的反应原生项目不一致造成的. 解决办法:打开终端,将路径切到R ...
React Native组件开发指南
React Native的组件开发一直处在一个比较尴尬的处境.在官方未给予相关示例与脚手架的情况下,社区中依然诞生了许许多多的React Native组件.因为缺少示例与规范,很多组件库仅含有一个in ...
十大最受欢迎的 React Native 应用开发编辑器
市面上用于开发工作的编辑器非常多,笔者会经常因为不同的编程语言该如何选择好用的编辑器而感到纠结.而在随后从事 React Native 开发工作过程中,对相应的编辑器做了一些探索和研究,本文总结了一些 ...
React Native 移动开发入门与实战
课程简介本课程主要讲解 React 的基础知识及应用案例,包括 props.state.生命周期函数等,样式和 Flex 布局,React Native 内置的 API 和 UI 组件介绍.路由.状 ...
React Native 一:开发环境搭建
在学习React Native的过程中,相信对于一个App开发工程师,没有充分的学习过前端开发技术的同学来说,顺利的搭建好开发环境还是比较纠结的. 下面,我就根据我自己学习过程中的总结,跟大家讲解讲解 ...
React native 项目进阶(redux, redux saga, redux logger)
之前利用知乎日报的api写了react-native的一个入门项目,传送文章地址React Native 项目入门和源码地址RN入门项目源码,目前github上的代码已经在原文的基础上增加了新的功能, ...
vscode 连接夜神模拟器运行 react native项目 (很简单的方法)
前言:我这种方式不需要过多配置,只是需要先启动Android studio ,之后再启动vsCode 准备阶段:下载夜神模拟器 1. 开启夜神服务进入到夜神安装的bin目录下,执行 nox_adb. ...
React Native 项目整合 CodePush 完全指南
作者 | 钱凯杏仁移动开发工程师,前嵌入式工程师,关注大前端技术新潮流. 本文使用的环境: React@16.3.1 React Native@0.55.4 react-native-code-pu ...
【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 "8小时内拼工作,8小 ...
React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...

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

4.React Native项目开发如何配置调试相关推荐

最新文章

热门文章