chrome react插件

chromereact插件是一款可以安装到谷歌浏览器上使用的谷歌react插件chromereact插件又名chromereactdevelopertools如果您正在寻找这款react插件马上下载吧。。

　　chrome react插件是一款可以安装到谷歌浏览器上使用的谷歌react插件,chrome react插件又名chrome react developer tools,如果您正在寻找这款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！

　　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 组件分层结构外观。

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

安装方法

　　1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

　　2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序。

　　3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

　　4.松开鼠标就可以把当前正在拖动的插件安装到谷歌浏览器中去，但是谷歌考虑用户的安全隐私，在用户松开鼠标后还会给予用户一个确认安装的提示。

　　5.用户这时候只需要点击添加按钮就可以把该离线Chrome插件安装到谷歌浏览器中去，安装成功以后该插件会立即显示在浏览器右上角（如果有插件按钮的话），如果没有插件按钮的话，用户还可以通过Chrome扩展管理器找到已经安装的插件。

　　用户只需要通过上面介绍的五个步骤就可以轻松地把离线谷歌浏览器插件安装到Chrome中去，希望这个离线Chrome插件的安装方法能够帮助到您。