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.安装后, 需要关闭浏览器, 再重新打开, 才能使用
如有问题欢迎扫码加群,大伙儿一起入群讨论问题!
希望能够帮助到大家!!!谢谢合作!!!


Vue-devtools 安装浏览器调试的更多相关文章
- Vue安装以及Vue项目创建以及Vue Devtools安装
这几天一直在学习Vue.js框架. 因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措. 在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建 ...
- Vue DevTools 安装应用
1.https: //github.com/vuejs/vue-devtools 从这上面下载Vue DevTools: 2.npm install(cnpm install) && ...
- Vue安装及插件Vue Devtools
vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...
- 【22】Vue 之 Vue Devtools
vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...
- vue 在浏览器控制台怎么调试 谷歌插件vue Devtools
vue 在浏览器控制台怎么调试 谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...
- 怎样在Chrome浏览器上安装 Vue Devtools 扩展程序
第一步: 前往 GitHub 下载 Vue Devtools 项目文件 https://github.com/vuejs/vue-devtools 注意: 1. 将分支切换为 master 2. 下载 ...
- Vue安装Vue Devtools调试工具提示 Error: Cannot find module '@vue-devtools/build-tools' 解决办法
我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装, 但是在最终执行编译命令的时候 :npm run build ,提示如下错误: 尝试了很多方法,都不能解决 ...
- Chrome Vue Devtools插件安装和使用
安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...
随机推荐
- Windbg程序调试系列5-高CPU问题分析
上篇博客中给大家分享了使用Windbg进行Live Debugging: Windbg程序调试系列4-Live Debugging 本篇中我们继续,跟大家分享常见的应用程序高CPU使用率问题分析. 先 ...
- angular4实战开发问题——ngclass不起作用
由于路由机制会导致页面不刷新. 在项目中,很多都是使用click做的路由跳转.ngclass有时候会不起作用, 这个时候我是很盲目的,一开始在考虑是不是书写的问题.ngclass需要有特定的格式?第一 ...
- 【Spark-SQL学习之二】 SparkSQL DataFrame创建和储存
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...
- 2018-2019-2 20165215《网络对抗技术》Exp5 MSF基础应用
目录 实验内容 实验原理 实验步骤 (一)一个主动攻击实践 ms08_067(成功) (二)一个针对浏览器的攻击 ms14_064(成功) (三)一个针对客户端的攻击 Adobe(成功) CVE-20 ...
- android上instant app介绍 类似于微信小程序
android上instant app介绍 类似于微信小程序instant app 是谷歌推出的类似于微信小程序(或者说小程序类似于instant app)的一项技术,用户无须安装应用,用完就走,同时 ...
- spring-boot集成activiti的model遇到问题汇总
按照网上的七拼八凑整合网页版的部署将遇到的问题归置如下: 本人的springboot版本是:1.5.13.RELEASE 工作流相关: <!--工作流--> <dependency& ...
- 【winform】serialPort 串口
一. 1.串口通信简单实现 该来的总会来的,学做硬件的,串口这个东西必须得门清. 俗话说的好,不会做串口助手的电子工程师不是好程序员.
- Liunx网络技术管理及进程管理
Linux网络技术管理及进程管理(week2_day4) OSI七层模型和TCP/IP四层模型 OSI七层模型:OSI(Open System Interconnection)开放系统互连参考模型 ...
- vue-cli3.0+node.js+axios跨域请求session不一样的问题
一.问题重述 使用的是,前后端分离,前端vue+axios请求,后端使用node搭建服务端接口,遇到的问题是,我通过登录接口吧数据存储型在session,我登录上以后,发现再次验证登录(另一个接口)的 ...
- Vue-Router路由Vue-CLI脚手架和模块化开发 之 vue-router路由
vue-router路由:Vue.js官网推出的路由管理器,方便的构建单页应用: 单页应用(SPA)只有一个web页面的应用,用户与应用交互时,动态更新该页面的内容:简单来说,根据不同的url与数据, ...