React DevTools安装,报错:error An unexpected error occurred、Cannot read properties of undefined

React DevTools的安装

进入官网下载

https://github.com/facebook/react-devtools/tree/v3,Download Zip

https://gitcode.com/facebook/react-devtools/overview
React DevTools安装,报错:error An unexpected error occurred、Cannot read properties of undefined_第1张图片

解压后进入react-devtools-3目录,yarn安装依赖

yarn

报错:error An unexpected error occurred

% yarn
yarn install v1.22.19
[1/4]   Resolving packages...
[2/4]   Fetching packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.yarnpkg.com/@babel/generator/-/generator-7.1.6.tgz: ETIMEDOUT".
info If you think this is a bug, please open a bug report with the information provided in "/Users/phoenix/Desktop/software/react-devtools-3/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

解决:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

如果还没有解决,在运行:

yarn config set “strict-ssl” false -g

再次运行yarn,成功了

进入到react-devtools-3/shells/chrome目录下,执行 node build.js

node build.js

运行成功后会在当前目录生成一个build文件夹,build文件夹下的unpacked文件夹即为我们所需要的插件

打开Chrome浏览器-扩展程序,将unpacked文件夹拖入扩展程序

React DevTools安装,报错:error An unexpected error occurred、Cannot read properties of undefined_第2张图片

点击React详情,允许访问文件网址打开,刷新浏览器

React DevTools安装,报错:error An unexpected error occurred、Cannot read properties of undefined_第3张图片

运行React项目以下报错:Uncaught TypeError: Cannot read properties of undefined (reading ‘forEach’)

请添加图片描述

使用非官方下载crx文件

下载地址:​​​​​​Download React Developer Tools 4.24.3 CRX File for Chrome - Crx4Chrome
React DevTools安装,报错:error An unexpected error occurred、Cannot read properties of undefined_第4张图片

打开Chrome浏览器-扩展程序,将下载的文件拖入扩展程序
React DevTools安装,报错:error An unexpected error occurred、Cannot read properties of undefined_第5张图片
安装成功

再次运行React项目

React DevTools安装,报错:error An unexpected error occurred、Cannot read properties of undefined_第6张图片
React DevTools安装成功了 React DevTools安装,报错:error An unexpected error occurred、Cannot read properties of undefined_第7张图片

你可能感兴趣的:(工具插件,#,前端报错bug,react.js,前端,前端框架)