react和react develop tools编译

原创已于 2022-09-09 13:49:45 修改 · 890 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

于 2022-04-20 08:18:51 首次发布

react 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何下载并编译React的开发工具Chrome扩展。首先从GitHub获取18.0.0版本的React，然后通过yarn进行安装和编译。在遇到npm错误时，需要修改package.json文件，并推荐使用yarn代替npm以避免其他问题。编译完成后，扩展插件位于指定目录，可以加载到Chrome中使用，F12将显示Components和Profiler选项卡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载
https://github.com/facebook/react/tags

我这里下载的18.0.0

下载react，里面的packages/react-devtools-extensions目录就是chrome等的扩展插件，需要编译下

需要yarn环境编译，如果需要安装yarn，使用命令

npm install --global yarn

yarn是另外一个好用的类似npm的包管理器

cd react（react根目录）
yarn install
yarn build-for-devtools
cd  packages/react-devtools-extensions/
yarn  build:chrome

用npm此时如果报错
Unsupported URL Type “link:”: link:./scripts/eslint-rules
需要把react根目录的package.json修改下
“eslint-plugin-react-internal”: “link:./scripts/eslint-rules”,
改为
“eslint-plugin-react-internal”: “file:./scripts/eslint-rules”,
改好后npm还会有其他问题，所以建议改用yarn，别用npm

编译好的在
packages/react-devtools-extensions/chrome/build
里面的.zip文件
加载到chrome插件，重新打开chrome，再打开react页面，f12就会出现Components和Profiler选项卡（带react图标）

附打包好的
react开发工具 chrome扩展包