由于chrome无法连接外网，所以需要下载调试工具，到本地进行二次安装
安装流程 （版本较react脚手架4.0.3过与陈旧，浏览器渲染错误，已经放弃） 【见底部4.13.2版本 开发工具安装】
官网下载开发工具代码包 官方链接
解压安装包，解压目录下打开命令行工具，修改下载源并安装依赖
npm --registry https://registry.npm.taobao.org install
- 打包chrome调试工具
npm run build:extension:chrome
打包后的路径为
shells -> chrome -> build -> unpacked文件夹
-
打开chrome浏览器，进行工具安装
右上角菜单 -> 更多工具 -> 扩展程序 -> 开发者模式 -> 加载已解压的扩展程序 -> 选择上面的unpacked文件夹
安装离线调试工具 -
固定开发工具至导航栏
固定开发工具至导航栏
调试工具的使用事项
只有打开react开发的项目时候，图标才能显示蓝色高亮
F12打开调试工具，react选项卡，查看数据
报错
- 谷歌浏览器无法渲染 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文件直接拖入，点击安装即可
关闭之前的旧版本调试工具
关闭旧的开发工具
