调试react项目可以使用React Developer Tools插件。下面我们就介绍下谷歌浏览器使用插件调试react项目的方法！希望对学习react的伙伴有帮助！
谷歌浏览器怎么调试react项目？
（1）首先使用 Chrome 打开需要调试的 React 页面，并打开“开发者工具”。
（2）在“开发者工具”上方工具栏最右侧会有个 react 标签。点击这个标签就可以看到当前应用的结构。
通过 React Developer Tools 我们可以很方便地看到各个组件之间的嵌套关系以及每个组件的事件、属性、状态等信息。
（3）React Developer Tools会自动检测React组件，不过在webpack-dev-server模式下，webpack会自动将React组件放入到iframe下，导致React组件检测失败，变通方法是webpack-dev-server配置在–inline模式下即可:
webpack-dev-server --inline
（4）截止目前几乎没有浏览器原生支持es6标准，对于这种情况，chrome引入了source-map文件，标识es5代码对应的转码前的es6代码哪一行，唯一要做的就是配置webpack自动生成source-map文件，这也很简单，在webpack.config.js中增加一行配置即可（需要重新启动webpack-dev-server使配置生效）
（5）修改某一处为错误，然后观察结果
更多React相关技术文章，请访问gaodaima搞代码网进行学习！
以上就是谷歌浏览器怎么调试react项目？的详细内容，更多请关注gaodaima搞代码网其它相关来源gaodai$ma#com搞$$代**码网文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：谷歌浏览器怎么调试react项目？
转载请注明原文链接：谷歌浏览器怎么调试react项目？
