npm 安装React Devtools调试工具

比眉伴天荒 2022-06-02 08:25 251阅读 0赞

## 前言 ##

这里主要写给和我一样摸索的新手，之前相信大家也看到了网上的一些安装方法，有的给你个git上的下载链接，然后就没有然后了(好像官方也没给个具体操作)；有的让你去google商店下载一个.crx，前提你的网能翻墙。这里主要讲一下如何通过git上的react-devtools文件下载后打包一份扩展程序，来对chrome浏览器进行插件安装。

1.  去git上下载react-devtools文件到本地，下载地址： [https://github.com/facebook/react-devtools][https_github.com_facebook_react-devtools] ；  
    可以直接下载zip安装包解压，或者通过git clone来将项目拷贝到本地  
    `git clone https://github.com/facebook/react-devtools.git`
2.  进入react-devtools文件夹，用npm安装依赖，这里推荐临时使用淘宝镜像，快速一点。  
    `npm --registry https://registry.npm.taobao.org install`
3.  安装依赖成功后，我们便可以打包一份扩展程序出来。运行  
    `npm run build:extension:chrome`  
    这里成功后会显示  
    ![这里写图片描述][SouthEast]  
    并且会在你的项目目录中生成一个新的文件夹，react-devtools -> shells -> chrome -> build -> unpacked文件夹
4.  打开chrome扩展程序chrome://extensions/，加载已解压的扩展程序，选择第3步中的生成的unpacked文件夹。这时就会添加一个新的扩展程序react-devtools，并在你的浏览器右上角会有个react标志, 就表示成功啦。

[https_github.com_facebook_react-devtools]: https://github.com/facebook/react-devtools
[SouthEast]: /images/20220602/a8397a62a2ee4f0a917659dcea6ffa09.png

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue调试工具vue-devtools安装

第一步：下载 https://pan.baidu.com/s/1vTh6gvYjkyMWZBrnguNfNg 第二步：在vue-devtools目录下安装依赖包

谁践踏了优雅/ 2023年06月15日 11:08/ 0 赞/ 36 阅读

相关 npm 安装谷歌插件React devtools

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

淩亂°似流年/ 2023年01月18日 06:45/ 0 赞/ 224 阅读

相关 Vue调试工具vue-devtools安装

Vue-DevTools的安装使用方法一：点击谷歌浏览器右上角「三点」图标 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

﹏ヽ暗。殇╰゛Y/ 2022年12月13日 14:25/ 0 赞/ 256 阅读

相关 npm与调试工具的安装

npm和必要工具的安装 yum install epel-release EPEL则为服务器版本提供大量的npm包，而且大多数npm包在官方 repositor

心已赠人/ 2022年06月04日 09:52/ 0 赞/ 271 阅读

相关 npm 安装React Devtools调试工具

前言这里主要写给和我一样摸索的新手，之前相信大家也看到了网上的一些安装方法，有的给你个git上的下载链接，然后就没有然后了(好像官方也没给个具体操作)；有的让你去goo

比眉伴天荒/ 2022年06月02日 08:25/ 0 赞/ 252 阅读

相关 React调试工具：react-devtools

<!DOCTYPE html> <html> <head <script src="../build/react.js"></script><!--react核心库--

- 日理万妓/ 2022年05月26日 01:08/ 0 赞/ 280 阅读

相关 vue调试工具vue-devtools安装及使用

vue调试工具vue-devtools安装及使用本文主要介绍 vue的调试工具 vue-devtools 的安装和使用工欲善其事, 必先利其器, 快快一起来用vue-d

朱雀/ 2022年05月20日 03:27/ 0 赞/ 399 阅读

相关安装vue调试工具 vue-devtools

vue-devtools是一款基于chrome浏览器的插件，在调试过程中可以省去打console.log，他会自动把我们在data上定义的数据动态的显示出来（数据改变，它也跟随

绝地灬酷狼/ 2022年05月14日 04:13/ 0 赞/ 519 阅读

相关 Vue浏览器简易安装调试工具vue-devtools

环境要求： Node 6+ NPM 3+ git (非必要) 第一步将vue-devtools的github项目下载到本地 1.第一种（有git工

╰+哭是因爲堅強的太久メ/ 2022年04月13日 10:52/ 0 赞/ 793 阅读

相关 vue调试工具vue-devtools安装及使用

一、为什么要使用vue-devtools 由于用vue脚手架写的源代码，运行时，先经过webpack打包，打包后的结果和我们的源代码不一样，所以，没法调试程序，没法

r囧r小猫/ 2021年10月24日 00:36/ 0 赞/ 655 阅读