react developer tools(附安装使用教程)

　　react developer tools是款功能非常强大的查看和调试React组件的浏览器插件；这款插件是非常的小巧，并且支持用户这谷歌的浏览器的扩展程序里面进行快速的安装，当然也可以直接的这河东软件园进行下载；软件的安装是非常的简单，下载之后，点击插件的图标即可快速的进行安装，几步即可安装成功，成功之后会出现这您的浏览器的右上角，需要的朋友千万不要错过！

软件功能

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

　　单向数据流动；

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

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

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

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

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

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

软件特色

　　配套工具

　　如果您希望使devtools反映创建的反应元素的源文件和行号，则需要使用babel插件transform-react-jsx-source。如果信息存在，其显示位于右侧面板的底部。不要忘了在生产中禁用它！

　　反应本地

　　有一个与React Native配合使用的独立版本。

　　树视图

　　箭头键或hjkl导航

　　右键单击要在元素窗格中显示的组件，滚动到视图，显示源代码等。

　　使用搜索栏按名称查找组件

　　红色collapser意味着组件具有状态/上下文

安装说明

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

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

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

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

使用方法

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

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

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

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

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

常问问题

　　“反应”选项卡不显示

　　如果您是通过file://网址运行应用程序，请不要忘记在Chrome扩展设置页面上选中“允许访问文件网址”。

　　如果站点不使用React，或者React无法与devtools进行通信，则“React”选项卡将不显示。当页面加载时，devtools设置全局命名__REACT_DEVTOOLS_GLOBAL_HOOK__，然后React在初始化期间与该钩子进行通信。

　　您可以在React网站或通过检查Facebook进行测试。

　　如果您的应用位于iframe，Chrome扩展程序，React Native或其他异常环境中，请尝试使用独立版本。

　　Chrome应用程式目前无法检视。

　　“跟踪反应更新”跟踪是否呈现？

　　是的，但如果组件可能呈现，它也会进行跟踪。为了充分了解什么是“更新”，您需要了解应用程序应用程序的工作原理。

　　这里“跟踪反应更新”将围绕每个节点绘制边框，但C4和C5。为什么跟踪不实际更新的组件？（通过shouldComponentUpdate（） - > false）这是用于跟踪更新的系统的限制，并且将来希望改变。然而，它并不追踪选择退出的组件的孩子，因为他们不可能更新。每秒更新的速度越高，颜色从蓝色变为红色越多。

　　ProTips

　　如果您使用常规“ 元素 ”选项卡检查页面上的“ React ” 元素，则切换到“ React ”选项卡，该元素将在“React”树中自动选择。

　　调试（在Chrome中）

　　如果延期中断，该怎么办

　　检查devtools的错误控制台。React Devtools的一部分在您的页面的上下文中运行脚本，并且容易受到行为不当的polyfills的影响。

　　打开devtools进入一个新的窗口，然后再点击快捷方式再次打开devtools（cmd + option + j或ctrl + shift + j）。这是“debug devtools”调试器。检查控制台是否有错误。

　　打开chrome://extensions，找到反应devtools，然后单击“检查视图”下的“背景页面”。你可能会发现错误。