admin 管理员组文章数量: 887021
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/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 步及之后即可
版权声明：本文标题：Web 前端 之 Vue 浏览器调试工具 Vue.js devtools 安装(三种方法)的简单整理 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1727389297h1113134.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论