React - React Developer Tools的安装与使用（Chrome调试插件）

2017-01-01 发布：hangge 阅读：26928

1，React Developer Tools介绍

React Developer Tools 是一款由 facebook 开发的有用的 Chrome 浏览器扩展。通过它我们可以查看应用程序的 React 组件分层结构，而不是更加神秘的浏览器 DOM 表示。
注意：该插件只对 ReactJS 开发有效。如果是 React Native 的话则无法使用这个插件调试。

2，安装步骤

（1）点击 Chrome 的“菜单”->“更多工具”->“扩展程序”。

（2）在打开的“扩展程序”页面中，点击最下方的“获取更多扩展程序”打开谷歌在线商店。（当然你首先要已经能科学上网了）

（3）最后搜索“React Developer Tools”并安装即可。

（4）安装完毕后打开扩展程序管理页面。将 React Developer Tools 的“允许访问文件网址”勾选。

3，使用说明

（1）首先使用 Chrome 打开需要调试的 React 页面，并打开“开发者工具”。

（2）在“开发者工具”上方工具栏最右侧会有个 react 标签。点击这个标签就可以看到当前应用的结构。

这里我们以前文使用 JSX 实现的盒子模型为例（React - 实现一个盒子模型的展示效果）。通过 React Developer Tools 我们可以很方便地看到各个组件之间的嵌套关系以及每个组件的事件、属性、状态等信息。