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

本文主要讲解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 安装浏览器调试的更多相关文章

  1. Vue安装以及Vue项目创建以及Vue Devtools安装

    这几天一直在学习Vue.js框架. 因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措. 在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建 ...

  2. Vue DevTools 安装应用

    1.https: //github.com/vuejs/vue-devtools  从这上面下载Vue DevTools: 2.npm install(cnpm install) && ...

  3. Vue安装及插件Vue Devtools

    vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

  4. 【22】Vue 之 Vue Devtools

    vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

  5. vue 在浏览器控制台怎么调试 谷歌插件vue Devtools

    vue 在浏览器控制台怎么调试 谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...

  6. 怎样在Chrome浏览器上安装 Vue Devtools 扩展程序

    第一步: 前往 GitHub 下载 Vue Devtools 项目文件 https://github.com/vuejs/vue-devtools 注意: 1. 将分支切换为 master 2. 下载 ...

  7. Vue安装Vue Devtools调试工具提示 Error: Cannot find module '@vue-devtools/build-tools' 解决办法

    我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装, 但是在最终执行编译命令的时候 :npm run build ,提示如下错误: 尝试了很多方法,都不能解决 ...

  8. Chrome Vue Devtools插件安装和使用

    安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...

  9. VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js

    一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...

随机推荐

  1. SRD_PreloaderCore

    预加载 Preloader CoreVersion 1.10SumRndmDde This plugin requires the Game Upgrade plugin:http://sumrndm ...

  2. Spring Boot默认的JSON解析框架设置

    方案一:启动类继承WebMvcConfigurerAdapter,覆盖方法configureMessageConverters ... @SpringBootApplication public cl ...

  3. Sed工作原理

    Sed工作原理   sed是一个非交互式的流编辑器.所谓非交互式,是指使用sed只能在命令行下输入编辑命令来编辑文本,然后在屏幕上查看输出:而所谓流编辑器,是指sed每次只从文件(或输入)读入一行,然 ...

  4. WTForms

    一.简单介绍flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install wtforms 用户登录简例: fr ...

  5. Java-关于Thread

    1)进程是受操作系统管理的基本运行单元,线程是进程中独立运行的子任务 2)Thread.start()方法通知线程规划器,告知其该线程已经准备完成,可以调用其run方法,这时就是异步的方法:如果直接调 ...

  6. AI时代学习新的技术,方向为计算机视觉--欢迎来我的简书blog拔草

    2017-09-01 19:29:33 简书blog: https://www.jianshu.com/u/973c8c406de7

  7. Oarcle之单行函数(上)

    dual 是一个虚表,为了满足sql句式而设置这么一个表   单行函数 字符函数 concat 拼接两个字符串 select concat (concat(ename,‘的职位是’),job) fro ...

  8. linux 看执行任务的一些邮件

    cat /var/spool/mail/root From root@hadoop01.localdomain Fri Apr 12 18:44:01 2019 Return-Path: <ro ...

  9. mysql语法之case when then与列转行

    mysql语法中case when then与列转行的使用场景非常丰富. case语句类似java中条件分支语句的作用,可以类比java中的switch语句或者if语句来学习. 其语法如下: case ...

  10. 加域电脑登陆系统后桌面文件丢失,登录系统提示用户名为“Temp”。

    注册表中定位到“HKEY_LOCAL_MACHINE\\\\SOFTWARE\\\\Microsoft\\\\Windows NT\\\\CurrentVersion\\\\ProfileList”, ...