Vue-devtools 安装浏览器调试

工欲善其事，必先利其器。

本文主要讲解Vue-devtools的安装和使用

安装方法有两个：

方法一：（前提条件需要FQ，省事省力省心方便快速）

　　　　FQ =》谷歌商店 =》搜索 =》Vue-devtools =》添加至Chrome

方法二：

　　　1、克隆至本地：git clone（vue-devtools）

　　　2、安装项目所需要的npm包：npm install

　　　3、编印项目文件：npm run build

　　　4、添加至chrome浏览器

　　　进入扩展页面=》加载已解压的扩展程序=》选择vue-devtools>shells下的chrome文件夹

　　 /* 如果看不见“加载已解压的扩展程序...”按钮，则需要勾选开发者模式。 */

　　具体步骤如图所示：

　　　　最后：Vue-devtools如何使用呢？

　　当我们在Chrome添加完扩展后，需要调试Vue应用时，Chrom开发者工具栏会有一个vue的一栏，点击之后就可以看到vue对象的一些信息。

温情提示:

1.vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的

2.安装后, 需要关闭浏览器, 再重新打开, 才能使用

如有问题欢迎扫码加群，大伙儿一起入群讨论问题！

希望能够帮助到大家！！！谢谢合作！！！

转载于:https://www.cnblogs.com/CinderellaStory/p/8592415.html

Vue-devtools 安装浏览器调试相关推荐

Vue Devtools安装（谷歌浏览器插件：）
vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...
Vue Devtools 安装
Vue Devtools 是Chrome 浏览器插件,用来调试Vue的,能够更直观.更友好的调试Vue应用下载地址:https://github.com/vuejs/vue-devtools#vue ...
Vue插件开发工具的安装以及解决Vue Devtools安装后语法启动，图标仍然不亮的问题
插件安装: 1.极简插件安装地址:https://chrome.zzzmh.cn/index 安装详细步骤看下篇文档解决问题第一: 1.找到扩展程序的安装目录.如图片所示: 2.用记事本打开,或者 ...
DevTools——chrome浏览器调试手机端WebView
DevTools能在浏览器上调试手机中的webview代码,给手机端调试带来了极大的便利! 操作步骤 1,打开手机开发者选项,开启USB调试 2,打开待调试的webview 3,手机通过USB数据线跟 ...
vue——devtools安装（实时监测vue的data数据变动）
vue-devtools链接本地安装方法: 打开谷歌浏览器设置 -> 扩展程序 -> 勾选开发者模式 -> 加载已解压的扩展程序 -> 选择"chrome扩展&qu ...
Chrome浏览器-vue调试工具dev-tools安装
vue调试工具dev-tools安装 git bash 管理端执行相关命令 # 下载源码 git clone https://github.com/vuejs/vue-devtools.git # 进 ...
vue 在浏览器控制台怎么调试谷歌插件vue Devtools
vue 在浏览器控制台怎么调试谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...
在火狐浏览器安装vue devtools【简单、快速】
1.打开火狐浏览器 2.添加组件 3.搜索vue devtools 4.点击第一个 5.点击添加到火狐 6.在跳出的框中点击确认添加 7.到此添加成功 8.按F12就可以看到vue扩展程序了
【进阶篇】Vue Devtools——vue开发调试神器
工欲善其事,必先利其器,vue2.0进阶系列的知识更接近我们的实际开发所需,在开发过程中,有个好的调试工具是事半功倍的,Vue Devtools就是我们选择的调试工具,它是一款chrome浏览器的插件 ...

Vue-devtools 安装浏览器调试

Vue-devtools 安装浏览器调试相关推荐

最新文章

热门文章