React Developer Tools 和 React Developer Tools安装

屈健柏
2023-12-01

React最近是真的火,既然要code,肯定需要debug。React Developer Tools和Redux DevTools Extension可以说是服务React开发的利器。直接插件下载可能有各种问题,这里就记录下如何从github上获取源码,自己做出来chrome 插件

React Developer Tools

  1. git下载源码
 git clone https://github.com/facebook/react-devtools.git
  1. 安装项目依赖
npm --registry https://registry.npm.taobao.org install
  1. 打包插件
npm run build:extension:chrome 

执行完整之后,在项目的shells chrome/build/unpacked会生成很多文件

  1. 打开chrome进入chrome://extensions/,启动开发者模式,选择加载已解压的安装程序,然后选择我们第3步中生成的unpacked文件夹。安装完成

https://github.com/facebook/react-devtools/releases已经有打包好的插件,可以直接下载使用。将下载的ZIP文件直接拖到chrome://extensions/即可

Redux DevTools Extension

  1. 下载源码打包
git clone https://github.com/zalmoxisus/redux-devtools-extension.git
# 进入根目录
npm install #安装依赖
npm run build:extension

执行完成之后可以可以在./build/extension中查看结果

  1. 打开chrome://extensions/安装(同React Developer Tools>4)
 类似资料: