安装方式
安装react-devtools
在github上找到react官方的工具地址（文档蛮全的），上面写在需要
///项目安装
yarn add react-devtools
// 全局安装
yarn global add react-devtools
启动react-devtools
如果全局安装直接
react-devtools
如果是项目中安装 我是在package.json中，增加了一个scripts
"scripts": {
// ...
"dev": "react-devtools"
},
然后yarn run dev
启动成功后，会出现这个
更新后的react-devtools独立一个界面，不像之前是集成在chrome的调试控制台中。这里我找了好几天，完全没想到已经独立出来了。
修改create-react-app项目的index.html
根据文档，需要在文件头部添加
<script src="http://localhost:8097"></script>
如图：
这里我试过使用在index.js(react项目入口文件)第一行加入上面所说的"import 'react-devtools'"，但还是报错不成功。断点进去说hub少了很多函数，这个地方我没弄懂，求大佬们帮忙解答应该怎么做。所以只使用了添加script的方式
- 进阶修改index.html 因为手动添加的地址，到了正式发布又需要手动删除，我在webpack里面绕了一大圈（三个小时），终于看到html-webpack-plugin是ejs模板，这一点让我看到了可以配置的曙光，于是将之前添加的script增加一个判断
<% if(process.env.NODE_ENV === "development"){ %>
<script src="http://localhost:8097"></script>
<% } %>
最终效果
成功跑起来了官方例子与react-devtools。就此本文要点全部完结
本来想着webpack根据开发模式与生产模式的区别动态增加script，但是网上没有相关信息。不知道这个方式是否可行，求大佬们帮忙
抛出几个我没有理解的问题
- react-devtools官网中写在可以import 的方式，但是我没有成功(已放在了index.js的第一行)
- webpack 配置html-webpack-plugin 我传参 title: "abc",然后index.html写入
<%= htmlWebpackPlugin.options.title %>
出来的结果是:Webpack App 这是为什么 3. webpack 能不能根据环境不同（dev/prod），决定哪些script是否可以被import，例如上面的import react-devtools。我找过好多文章和webpack官网也没有看到根据环境去import。是不是只能通过webpack教程中的区分dev和prod文件方式呢？ 4. 以上文章是个人见解，如果有更好的方式，希望大佬们可以给个链接啥的
事情回顾
react升级到17后，react-devtools v3 就一直报错
去年学习的时候，使用了react-devtools，是在chrome上面的插件（不会翻墙，全靠视频教程拿到国内的安装方法）
近段时间，想开始重新拿起react做项目。结果react-devtools报错，是那个.forEach的错误（忘记截图了）。
一开始找的方向还是chrome插件，最终发现有v3这个版本，看了看自己电脑上也是v3的。然后就在找v4或者更高的。在react-devtools原来的github地址中，说已经并入了react自身项目。
本来要整个clone下来，结果太大了clone失败，然后尝试找v4，真有这个分支。clone --depth=1下来。找到了package/chrome。然后一通npm i / yarn ，基本都是不成功的，报了个build也都是错误。头都快愁秃了。感觉自己路子走死胡同了。退出来重新看了一下，搜了一下。
结果react官网主分支就有react-devtools，一激动差点又npm i / yarn 了。还好看了一下文档，撞了几个小时的墙，终于弄出来。
网上找到资料全是什么改devtools v3的源码。我想着不可能这么蠢吧。于是埋头苦找，找了好几天。终于解决了，于是汇总一下。
身为一个菜鸡，回头看看整理的东西，整套流程其实不足5分钟。如果是一个懂点英文，熟悉react源码的大佬，真的是分分钟搞定。
网上为什么没有相关文章，我想应该还是我不会翻墙，不擅长使用搜索引擎。甚至于可能大佬们觉得这东西也没必要写个攻略啥的。
最后真的希望如果有大佬正好闲着，可以帮忙抽个时间解答以上的问题，谢谢~
2023-08-16更新，更简单的使用方法
今天偶尔看到被点了赞，这边再更新一条，使用edge浏览器，可以在插件处找到react-devtools工具的，直接安装就能用，如果不行。关闭浏览器，重新打开即可。
当时写这个的时候，好像edge还没用chrome内核，所以完全没考虑过edge。现在edge的插件可以直接搜索使用，我这边已经以edge开发为主了。我无所谓用哪个浏览器，秉持哪个好用简单用哪个。(不过我已经好久没用react了(●'◡'●))
