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 步及之后即可

Logo

前往低代码交流专区

更多推荐