vue devtools 安装笔记(2022年4月)

[dzhw]

听说vue devtools在调试程序时比较方便，于是准备着手装一下，结果发现在安装过程中各种卡壳，查了资料最终完成安装，现将安装心得记录如下：

一、最简单的方法是翻墙，进入vue官网https://vuejs.org/，找到devtools安装链接，照提示安装即可。

    

二、翻不了墙的见下面

1. 首先是装node.js，这没什么难度，官网上下载安装即可。

2. 到 vue官网https://vuejs.org/打开devtools的github地址，下载最新的devtools,我下载的是6.1.4。

        

        

        

3.下载完devtools后解压到文件夹，新版的devtools要使用yarn安装了。

执行命令：npm install -g yarn

使用powershell到解压目录，执行命令：yarn install。可能有如下报错，没有的话继续往下：

yarn : 无法加载文件 C:\Users\smoke\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https

:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

所在位置 行:1 字符: 1

+ yarn install

+ ~~~~

    + CategoryInfo          : SecurityError: (:) []，PSSecurityException

    + FullyQualifiedErrorId : UnauthorizedAccess

遇到上述错误，执行命令：set-ExecutionPolicy RemoteSigned

提示的时候直接选y。

 

再次执行yarn install，又报错：

RequestError: connect ETIMEDOUT 185.199.111.133:443

修改registry，执行命令：npm config set registry http://registry.npmjs.org

 

再次执行yarn install,还报错：

RequestError: read ECONNRESET

网上搜索到解决方法：

a.进入 node_modules/electron文件下， 编辑install.js

b. 修改downloadArtifact这段代码， 添加淘宝镜像地址https://npm.taobao.org/mirrors/electron

{.....

  mirrorOptions: {

    mirror: 'https://npm.taobao.org/mirrors/electron',

    platform,

    arch,

  }

}

问题解决。

 

4.执行命令：yarn run build

继续报错：

lerna ERR! yarn run build exited 1 in '@vue-devtools/shell-chrome'

lerna ERR! yarn run build stdout:

$ rm -rf ./build && cross-env NODE_ENV=production webpack --progress

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run build stderr:

warning package.json: No license field

因为是装在windows上，windows没有rm命令导致报错。

使用命令 npm install rimraf --save-dev安装rimraf。

根据提示找到对应目录下的packages.json,将里面的rm -rm 替换为 rimraf。

再次执行命令：yarn run build，若还提示rm的错，再根据提示找到对应packages.json，替换内容再安装即可。

 

5.接下来是chrome加载扩展插件devtools了，在chome上按照下图找到加载：

打开“开发者模式”，选择“加载已解压的扩展程序”，找到devtools的对应目录下的“packages\shell-chrome”

至此结束。

 

 

 

    

 

 

[随便乱写写]

太厉害了，感谢