Web 前端 之 Vue 浏览器调试工具 Vue.js devtools 安装(三种方法)的简单整理
Web 前端 之 Vue 浏览器调试工具 Vue.js devtools 安装(三种方法)的简单整理
目录
Web 前端 之 Vue 浏览器调试工具 Vue.js devtools 安装(三种方法)的简单整理
三、第一种方法:chrome 网上应用店 安装(可能需要外网)
五、第三种方法:直接使用别人 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 步及之后即可
相关文章
- vue - webpack.base.conf.js
- Javascript将字符串日期格式化为yyyy-mm-dd的方法 js number 类型 没有length 属性 string类型才有
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- Vue - 实现用 JS 调用自定义组件 / 类似 ElementUI 弹框组件(在 js 文件中通过 this.xxx 方式调用并显示自定义弹框模态框组件)
- Vue - 在纯 JS 文件中调用自定义组件 / 类似 ElementUI 弹框组件 Message、Modal(在纯 js 文件中通过 import 方式引入并调用弹框模态框组件显示出来,)
- (28)打鸡儿教你Vue.js
- (22)打鸡儿教你Vue.js
- (8)打鸡儿教你Vue.js
- Vue.js路由管理器 Vue Router
- vue.js精讲02
- vue dayjs in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js
- 【HarmonyOS】【JS】鸿蒙Js camera怎么拍照并使用image显示出来
- jsp页面用html引入vue.js注意问题
- 关于js函数,方法,对象实例的一些说明
- vue学习笔记九:Jquery VS Vue之遍历方法对照
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
- [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程
- Vue-cli 4在vue.config.js中配置别名
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- JS 中Math.ceil()、Math.floor()和Math.round()的区别
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- vue的响应式都用它来实现,js中强大的Object.defineProperty()方法
- [转]Chart.js入门教程
- SpringBoot+Vue.js实现大文件分片上传、断点续传与极速秒传