chrome 安装react-devtools

这个工具可以查看react 组件在浏览器中的位置

react-devtools地址：https://github.com/facebook/react-devtools/tree/v3，直接download ZIP格式

 

知道下载位置，解压到自己可以找见的目录下，进入到react-devtools-3目录，cnpm i一下安装一下依赖

再进入到react-devtools-3\shells\chrome切换到chrome目录下，运行node build.js，当前目录下会生成build目录 这个build目录下的unpacked目录就是chrome中所需react-devtools的工具扩展程序包

打开谷歌浏览器，网址输入chrome://extensions/，

 选择react-detools-3目录下的shells->chrome中build目录中的unpacked即可

到此 react-devtools安装成功!

安装 React DevTools 之后，右键点击页面的任何一个元素，然后选择“查看”，这样就能打开浏览器的开发者工具了，并且工具栏最后会多展示一个 React 的选项卡（包含 “⚛️ Components” 和 “⚛️ Profiler”）。你可以使用 “⚛️ Components” 来检查组件树。