当前位置: 首页 > Chrome插件推荐 > React - React Developer Tools开发者工具的安装与使用(Chrome调试插件)

React - React Developer Tools开发者工具的安装与使用(Chrome调试插件)

Chrome插件推荐
虽然我们曾经在React开发者工具的基础介绍里面有概括性的介绍过React Developer Tools的基本使用方法,但是由于使用的频率比较高,所以今天就专门整理的一篇文章来仔细介绍React Developer Tools的安装和使用。在React Developer Tools使用过程常遇到的问题及解决办法我们也会介绍。

1,React Developer Tools介绍

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

2,安装步骤

(1)点击 Chrome 的“菜单”->“更多工具”->“扩展程序”。
react安装

2.在打开的“扩展程序”页面中,点击最下方的“获取更多扩展程序”打开谷歌在线商店。
扩展程序
3.最后搜索“React Developer Tools”并安装即可。当然本站提供其下载地址,所以大家可以自行离线下载安装。
 
插件
4.安装完毕后打开扩展程序管理页面。将 React Developer Tools 的“允许访问文件网址”勾选。
安装成功
通过以上4步我们就安装好React Developer Tools了。

3,React Developer Tools使用说明 

(1)首先使用 Chrome 打开需要调试的 React 页面,并打开“开发者工具”。
(2)在“开发者工具”上方工具栏最右侧会有个 react 标签。点击这个标签就可以看到当前应用的结构。
通过 React Developer Tools 我们可以很方便地看到各个组件之间的嵌套关系以及每个组件的事件、属性、状态等信息。
react使用方法
(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 Developer Tools的使用方法就介绍到这里,如果有问题大家可以给我留言哦

Postman Chrome插件

Postman是一个非常有力的Http Client工具,Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件,可在Web服务测 试中用来进行接口测试。

Web Developer - 网页开发者必备工具 Chrome插件

Web Developer 这款扩展集成了各种各样的 Web 开发工具,几乎是网页开发人员必备的 Chrome 开发者工具扩展插件,安装之后会在浏览器工具栏添加一个齿轮状的小图标,点击小图标之后就可以看到大量的 Web 开发工具。不过,目前这款扩展还没有提供禁用 Javascript 的功能,因为目前 Chrome 扩展的 API 还不支持该功能。

JSONView:web开发格式化和高亮插件 Chrome插件

Jsonview是目前最热门的一款开发者工具插件,确切的来说jQuery JSONView是一款非常实用的格式化和语法高亮JSON格式数据查看器jQuery插件。它是查看json数据的神器。

webstorm网页开发调试工具:JetBrains IDE Support Chrome插件

HTML / CSS / JavaScript编辑和JavaScript使用JetBrains公司的IDE调试。

安卓调试工具ADB Chrome插件

ADB 是Android的一个很重要的调试工具,熟练掌握后可实现很多功能,比如有些手机的解锁、ROOT就会用到adb工具。可很多朋友都说不会安装,今天就从最开始的安装方法说起。想要查看Android设备运行应用或者游戏时的实时输出日志,可以直接借助Android调试工具 adb 来完成。ADB 是Android的一个很重要的调试工具,熟练掌握后可实现很多功能,比如有些手机的解锁、ROOT就会用到adb工具。这里介绍的是ADB插件用于远程调试Chrome浏览器在Android ,ADB插件是一个Chrome扩展,运行ADB守护,使远程调试移动。有了它,你不需要下载Android SDK或命令行运行ADB自己。ADB插件用于远程调试Chrome浏览器在Android (现已取消)。

Vue.js devtools:调试vue.js应用的浏览器扩展 Chrome插件

相关插件内容推荐

Web Developer - 网页开发者必备工具

开发者插件 2022-05-03 11:14:06

Web Developer 这款扩展集成了各种各样的 Web 开发工具,几乎是网页开发人员必备的 Chrome 开发者工具扩展插件,安装之后会在浏览器工具栏添加一个齿轮状的小图标,点击小图标之后就可

XPath Helper:chrome爬虫网页解析工具

开发者插件 2018-05-02 07:26:41

xPath helper是一款Chrome浏览器的开发者插件,安装了xPath helper后就能轻松获取HTML元素的xPath,程序员就再也不需要通过搜索html源代码,定位一些id去找到对应的位置去解析网页了。

Cookie Inspector

开发者插件 2020-04-25 22:17:06

Cookie Inspector是由Big Bad Goose LLC发布的免费开发人员工具扩展,Google Chrome 缺少 cookie 编辑器和管理器。该插件直接在开发人员工具中编辑 cookies 、创建 cookies 和管理 cookies,只需右键单击

Xdebug helper

开发者插件 2019-12-06 11:21:12

每个人都必须拥有使用Xdebug调试,分析和跟踪PHP代码的功能。 此扩展将帮助您轻松地启用/禁用调试,性能分析和跟踪,而不必费力地处理POST / GET变量或cookie。对于使用带有Xdebug支持的

Chrome Poster

开发者插件 2020-03-13 21:06:25

Chrome Poster是开发人员工具,可让您与http服务器进行交互,主要用于与http服务器交互的开发人员工具。 也被称为简单的休息客户。

掘金

开发者插件 2018-02-18 21:29:27

为设计师、程序员、产品经理每日发现优质内容。
包含Android、前端、产品、设计、iOS、后端六大频道,每个频道内都有一到多个为你精心准备的优质内容源。

掘金是中国质量