什么是React Developer Tools?

React Developer Tools 是一款由 facebook 开发的有用的 Chrome浏览器扩展。使用 React Developer Tools 进行调试时,可以查看应用程序的 React 组件分层结构,而不是更加神秘的浏览器 DOM 表示。

注意:该插件只对 ReactJS 开发有效。如果是 React Native 的话则无法使用这个插件调试。

React Developer Tools的安装步骤

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

2、在打开的“扩展程序”页面中,点击“打开Chrome网上应用店”,进入Chrome网上应用店

3、搜索react developer tools,选择安装、添加至Chrome 即可。

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

React Developer Tools使用说明

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

更多前端开发知识,请查阅 HTML中文网 !!

以上就是什么是React Developer Tools?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读