Web 前端 之 Vue 浏览器调试工具 Vue.js devtools 安装(三种方法)的简单整理

目录

Web 前端 之 Vue 浏览器调试工具 Vue.js devtools 安装(三种方法)的简单整理

一、简单介绍

二、相关环境

三、第一种方法：chrome 网上应用店 安装（可能需要外网）

四、第二种方法：在 Github 上下载源码编译出工具安装

五、第三种方法：直接使用别人 Github 下载编好的包（npm 编译过的包）

---

一、简单介绍

Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍，Vue 浏览器调试工具 Vue.js devtools 安装，这里做简单整理，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。

接下来将介绍三种安装方法。

二、相关环境

1、Windows 10

2、Google 浏览器

3、Node.js 安装

三、第一种方法：chrome 网上应用店 安装（可能需要外网）

1、打开 chrome 网上应用店 ，搜索 vue.js ，即可看到 Vue.js devtools

2、点击  Vue.js devtools，进入界面，点击 "添加至 Chrome" 安装，添加扩展程序 即可

3、安装好后，管理扩展程序中看到 Vue.js devtools 图标工具

四、第二种方法：在 Github 上下载源码编译出工具安装

1、在 GitHub  https://github.com/vuejs/devtools ，点击最新发布的 Release 版本下载源码 

2、解压好下载的压缩包

 

3、进入解压的文件夹中，按住 Shift 键 + 点击鼠标右键，选择“在此处打开 PowerShell 窗口(S)”

（注意：也可以 cmd 进入文件夹即可）

4、输入 Enter 回车，运行命令 npm install 

5、没有报错，然后 运行 npm run build

 

 

6、打开 Google 浏览器，打开扩展程序

 

7、如果没有打开 开发者模式，点开 开发者模式，点击 加载已解压的扩展程序

8、在之前build 的 packages 目录中，选择 shell-chrome 文件夹

 

9、然后，你就发现，Vue.js devtools 安装上了

 

五、第三种方法：直接使用别人 Github 下载编好的包（npm 编译过的包）

1、下载别人的包之后

别人编好的包（npm 编译过的包）：GitHub - chenlaogou111/VueDevTools

CSDN 资源下载地址：待审核中

2、然后重复上面 “四、在 Github 上下载源码编译出工具安装” 的第 6 步及之后即可