React开发调试工具 v4.6.0

React Developer Tools(React开发调试工具) v4.6.0

  • 版本:v4.6.0
  • 大小:313 KB
  • 语言:English
  • 更新:2021-02-01 09:43:10
点击下载 360通过 腾讯通过 金山通过
React Developer Tools是一款React调试类别的chrome浏览器插件,目前更新的版本为v4.6.0,语言支持为English,React调试类别插件评分7.5,目前已被157人关注,本插件由常雅绿 上传分享。

React开发调试工具插件介绍

React Developer Tools是一款类似于浏览器调试台的插件开发者调试工具,由facebook官方开发推出,非常好用。

在浏览器中安装这个插件后,可以查看Chrome开发者工具中组件的层次、各个组件的Props、States等信息。

安装完成后,你将在Chrome DevTools中看到一个名为React的新选项。点击它,就可以查看新增的内容了。

通过这里提供的组件之一,你可以在右侧面板中进行多项操作。

React Developer Tools插件是什么?React Developer Tools是一款由facebook开发的有用的Chrome 浏览器扩展,可以通过 Chrome Web存储获取。使用 Chrome Devtools 进行调试时,可以查看应用程序的 React 组件分层结构,而不是更加神秘的浏览器 DOM 表示。添加react developer tools到chrome,是对chrome开发工具的React调试工具。React的开发工具是开源Chrome DevTools延伸反应的JavaScript库。它允许你检查React在Chrome开发者工具组件的层次结构(原名WebKit Web Inspector)。你会得到新的标签要求在你的Chrome DevTools反应。这表明你的根反应组件在页面渲染,以及他们最终渲染组件。

react developer tools

React Developer Tools 插件功能介绍

React Developer Tools插件有什么用?在了解React Developer Tools之前最好先了解一下,React!
React究竟是什么?Facebook把它简单低调地定义成一个“用来构建UI的JavaScript库”。这个定义也许会让我们联想到许多JavaScript模板语言(比如Handlebars和Swig),或者早期的控件库(比如YUI和Dojo),但是React所基于的几个核心概念使它与那些模板和控件库迥然不同。事实上这几个核心概念非常超前,已经给整个前端世界带来了冲击性的影响。它们包括:

组件和基于组件的设计流程;

单向数据流动;

虚拟DOM取代物理DOM作为操作对象;

用JSX语法取代HTML模板,在JavaScript里声明式地描述UI。

这几条简单的原则放在一起带来了大量的好处:

前端和后端都能够从React组件渲染页面,完全解决了SEO长期困扰JavaScript单页应用的问题;

我们可以简单直接地写前端测试而完全忘掉DOM依赖;

组件的封装方式和单向数据流动能够极大地简化前端架构的理解难度。

插件使用方法

1.React Developer Tools插件如何使用?怎么用?

安装成功后,浏览器的右上方出现现图示的log,用户如果想要调试的话就点击log就可以了。

通过选择树中的一个组件,你可以在右边的面板中检查和编辑它的当前的道具和状态。在面包屑,你可以检查所选组件,创建它的组件,创建一个组件,等等。如果您使用常规元素选项卡检查页面上的一个反应元素,然后切换到“React”选项卡,该元素将在“React树”中自动选择。

2.如下图所示显示了安装了 React Developer Tools 的 example3 组件分层结构外观。

reactdevelopertools的安装成功分层
 

3.类似地,如果在一个组件的渲染阶段有一个断点,将在“React”选项卡中自动选择。这允许你在渲染树中一步一步看到一个组件如何影响另一个。通过打破错误,你可以很容易地找到哪些组件在渲染过程中抛出一个错误,和什么样的道具导致它。

如何利用reactdevelopertools进行调试

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

You will get a new tab called React in your Chrome DevTools. This shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.

By selecting one of the components in the tree, you can inspect and edit its current props and state in the panel on the right. In the breadcrumbs you can inspect the selected component, the component that created it, the component that created that one, and so on.

If you inspect a React element on the page using the regular Elements tab, then switch over to the React tab, that element will be automatically selected in the React tree.<p><br></p>

React开发调试工具插件安装

1、在打开的谷歌浏览器Chrome的扩展管理器(方法:点击最左侧的三个点,在弹出的菜单中选择【更多工具】-【扩展程序】,或者你可以在地址栏中直接输入chrome://extensions/)

2、进入扩展程序页面后将开发者模式打勾

3、最后将解压出来的React开发调试工具.crx离线文件拖入到浏览器中即可安装添加(安装前可以确认插件版本是否为v4.6.0)

4、如果出现无法添加到个人目录中的情况,可以将crx文件右键,然后选择【管理员取得所有权】,再尝试重新安装

5、安装好后即可使用,安装成功以后该插件会立即显示在浏览器右上角(如果有插件按钮的话),如果没有插件按钮的话,用户还可以通过Chrome扩展管理器找到已经安装的插件。

下载地址

用户留言

插件分类

最新更新