npm 安装谷歌插件React devtools

淩亂°似流年 2023-01-18 06:45 194阅读 0赞

告诉大家这个安装的方法，新版本不适用了！！！安装之后访问项目就会报错！Cannot read property ‘forEach’ of undefined。请大家转战

https://blog.csdn.net/sinat\_35803474/article/details/116332089  
这篇文章

网上查的有些是用yarn命令装的，我电脑上只有npm命令，目前也用不到yarn，就找到用npm的方法。  
**第一步：git 克隆react devtools**  
地址：https://github.com/facebook/react-devtools  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70]  
2.克隆下来是这样的。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 1]  
**第二步**：切换分支  
注意这还不能直接下用命令下载依赖什么的，很多博客上都少了一步，或者没有重点说明！我觉得很重要的，一定要**切换到v3分支**哈，不然就是各种错  
1）npm WARN saveError ENOENT: no such file or directory, open ‘D:\\myProgram\\react-devtools\\package.json’  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 2]  
2）A complete log of this run can be found in…,![在这里插入图片描述][20210501170357761.png]  
我们要看readme.md文件哈。git checkout v3  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 3]  
切换分支后，我们就能看到文件结构变了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 4]  
我们接下来就可以好好玩耍了。  
**第三步**： npm安装依赖  
因为我用的是vscode，所以我用vscode打开的终端执行npm命令（实际上是我应该没有配npm的环境变量，导致我的cmd识别不了npm命令。。。呵呵哒，只能用vscode终端）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 5]  
依赖安装成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 6]  
**第四步**：打包扩展程序  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 7]  
出现这个，表示成功！  
\*\* 第五步\*\*：谷歌浏览器添加扩展程序  
然后我们的项目目录就会粗线shell\\chrome文件夹  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 8]  
1）谷歌点击设置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 9]  
点击扩展程序  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 10]  
加载已解压的扩展程序  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 11]  
选择项目目录的shells\\chrome\\build下的unpacked文件夹，点击按钮“选择文件夹”  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 12]  
成功后出现以下结果.完结撒花~  
![加粗样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 13]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70]: /images/20221021/91350b2c832846c59d4b128bb5c7ffad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 1]: /images/20221021/6e3edb2ee27e4ca18c7957a890f4c9da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 2]: /images/20221021/bc0f115ba17244d58c61412d614bf9bf.png
[20210501170357761.png]: /images/20221021/1e7618a32bb845d0b31f98266ba5998c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 3]: /images/20221021/aefb6d88bc844bc7b8db330fa6916dd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 4]: /images/20221021/dda4fc208787465b8886c6513517ea89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 5]: /images/20221021/4a69ea677fdc4b308414118a1941a2e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 6]: /images/20221021/b7b37c10aa074a838421e541dd5d1c59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 7]: /images/20221021/47299ef77b2444368dacf0d203d10e49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 8]: /images/20221021/9a5030aca73c4904993fd670b0629ad2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 9]: /images/20221021/4a73ec63b153462fa8577f854879df94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 10]: /images/20221021/99a78c25d20347c5aa32e223e3589eb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 11]: /images/20221021/1de0922a8e524147b33f348eb930bba1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 12]: /images/20221021/ee08f0d85d1f4d918da3aa6ddea0abfa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1ODAzNDc0_size_16_color_FFFFFF_t_70 13]: /images/20221021/0e26389de3f64193b83a2156b242ba40.png