10-27 01:05 阅读 448

react项目中使用react-devtools v4（react17.0.2）

安装方式

安装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源码的大佬，真的是分分钟搞定。
网上为什么没有相关文章，我想应该还是我不会翻墙，不擅长使用搜索引擎。甚至于可能大佬们觉得这东西也没必要写个攻略啥的。
最后真的希望如果有大佬正好闲着，可以帮忙抽个时间解答以上的问题，谢谢~

作者：冰风丶
链接：https://juejin.cn/post/6969097997850247204