介绍
这篇文章主要介绍了谷歌如何调试反应项目,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
谷歌调试反应项目的方法:首先使用Chrome打开需要调试的反应页面,并打开“开发者工具”,然后点击“开发者工具”上方工具栏最右侧的反应标签;最后查看各个组件之间的嵌套关系以及每个组件的事件,属性,状态等信息即可。
<强>谷歌浏览器怎么调试反应项目?
(1)首先使用Chrome打开需要调试的反应页面,并打开“开发者工具”。
(2)在“开发者工具”上方工具栏最右侧会有个反应标签。点击这个标签就可以看到当前应用的结构。
通过反应开发工具我们可以很方便地看到各个组件之间的嵌套关系以及每个组件的事件,属性,状态等信息。
(3)反应开发工具会自动检测反应组件,不过在webpack-dev-server模式下,webpack会自动将反应组件放入到内嵌框架下,导致反应组件检测失败,变通方法是webpack-dev-server配置在——内联模式下即可:
webpack-dev-server——内联
(4)截止目前几乎没有浏览器原生支持es6标准,对于这种情况,Chrome引入了源映射文件,标识es5代码对应的转码前的es6代码哪一行,唯一要做的就是配置webpack自动生成源映射文件,这也很简单,在webpack.config。js中增加一行配置即可(需要重新启动webpack-dev-server使配置生效)
(5)修改某一处为错误,然后观察结果
感谢你能够认真阅读完这篇文章,希望小编分享谷歌如何调试反应项目内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
谷歌如何调试反应项目
