调试 react 项目可以使用 React Developer Tools 插件. 下面我们就介绍下谷歌浏览器使用插件调试 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) 修改某一处为错误, 然后观察结果
来源: http://www.css88.com/qa/react/15954.html