Vue Devtools的下载和安装

 

1.下载

下载地址：https://github.com/vuejs/vue-devtools/tree/v5.1.1

 下载下来zip包。解压到指定文件夹

 2.安装依赖

在这个目录，执行npm install命令进行依赖安装

 3. 修改配置

打开解压目录vue-devtools-master下的shells/Chrome/manifest.json文件，将代码"persistent":false改成"persistent":true，

 

 

 

4.编译打包

在解压目录下，运行npm run build命令，构建vue-devtools插件

如果打包报错： 

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error', 'error:0308010C:digital envelope routines::unsupported' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' }

设置环境变量

Windows (CMD/PowerShell):

bash

set NODE_OPTIONS=--openssl-legacy-provider
npm run build

Windows (Git Bash):

bash

export NODE_OPTIONS=--openssl-legacy-provider
npm run build

macOS/Linux:

bash

export NODE_OPTIONS=--openssl-legacy-provider
npm run build

5.安装插件

打开Chrome浏览器，选择菜单“更多程序”→“扩展程序”​，打开扩展程序界面，打开开发者模式，单击“加载已解压的扩展程序”按钮，选择vue-devtools-master/shells/Chrome目录，将vue-devtools插件安装到Chrome浏览器，安装结果如图

 至此，这个插件就安装好了。

6.安装好以后，打开vue页面。按F12，Chrome浏览器vue devtools F12后控制台不显示。

安装成功了之浏览器右上角出现了图标，同时在vue的页面下也能点亮，就是控制台没有vue的页签，
在扩展程序中开启允许访问文件网址和在隐身模式下启用两项后就可以了，参考博客解决Chrome浏览器vue devtools F12后控制台不显示的问题-CSDN博客