React 安装chrome调试工具

由于chrome无法连接外网，所以需要下载调试工具，到本地进行二次安装

安装流程 （版本较react脚手架4.0.3过与陈旧，浏览器渲染错误，已经放弃） 【见底部4.13.2版本 开发工具安装】

1. 官网下载开发工具代码包 官方链接

2. 解压安装包，解压目录下打开命令行工具，修改下载源并安装依赖

npm --registry https://registry.npm.taobao.org install

3. 打包chrome调试工具

npm run build:extension:chrome 

打包后的路径为
shells -> chrome -> build -> unpacked文件夹

4. 打开chrome浏览器，进行工具安装
   右上角菜单 -> 更多工具 -> 扩展程序 -> 开发者模式 -> 加载已解压的扩展程序 -> 选择上面的unpacked文件夹

   
   
   安装离线调试工具

5. 固定开发工具至导航栏

   
   
   固定开发工具至导航栏

调试工具的使用事项

1. 只有打开react开发的项目时候，图标才能显示蓝色高亮

2. F12打开调试工具，react选项卡，查看数据

报错

1. 谷歌浏览器无法渲染 react项目
   http://localhost:3000/ 白屏 无法渲染页面 ( 关闭react dev-tool插件后，可以正常浏览 )
   调试插件的版本： React Developer Tools 3.6.0
   react脚手架版本： 4.0.3

谷歌浏览器报错

谷歌浏览器报错 信息展开

产生原因：
开发者工具版本过低，不支持react核心库 语法

解决方案：
安装较新版本的 谷歌react-devtools V4.13.2 地址

react devtools 4.13.2 （5/7/2021） 安装

crx安装方式:
打开chrome浏览器，打开右上角菜单 -> 更多工具 -> 扩展程序
将.crx文件直接拖入，点击安装即可
关闭之前的旧版本调试工具

关闭旧的开发工具