8.React 开发者工具调试

开发者工具安装：

  压缩包解压后，文件夹内的文件如下：

  打开谷歌游览器 - 更多工具 - 扩展程序 - 加载已解压的扩展程序 - 选择文件夹

  安装成功：

  点击右上角的扩展程序 - 选中图钉，可以把工具固定在界面

  打开之前写的html，看箭头

  发现右上角的图标亮了，是红色的上面还有个小虫子，这个表示当前处于开发的状态并不是打包后的

  那么打包部署运行的图标是什么样子的呢，以美团举例，这种的图标才是正常的

作用：

  打开之前写的html，审查元素F12，发现多了两个按钮：

  Components：Component表示组件，s表示复数，可以观察网页由多少组件组成的，每个组件里都有什么属性

  Profiler：用于记录网站的性能，渲染用了多久，那个组件加载慢