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

本文主要讲解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. Spring Cloud Gateway Ribbon 自定义负载均衡

    在微服务开发中,使用Spring Cloud Gateway做为服务的网关,网关后面启动N个业务服务.但是有这样一个需求,同一个用户的操作,有时候需要保证顺序性,如果使用默认负载均衡策略,同一个用户的 ...

  2. 【转】git示意图

  3. 结合API Gateway和Lambda实现登录时的重定向和表单提交请求(Python3实现)

    1. 创建Lambda函数,代码如下: from urllib import parse def lambda_handler(event, context): body = event['body' ...

  4. 用java实现操作两个数据库的数据

    1.首先需要在jdbc的配置文件里面配置两个数据库的连接 数据库1的配置 driverClassName=com.mysql.jdbc.Driverurl=jdbc:mysql://地址:3306/数 ...

  5. C sharp #001# hello world

    饮水思源:金老师的自学网站 索引 编写一个简单的控制台程序. 日期计算的结构化编程实现 日期计算机面向对象编程实现 直接应用已有组件 1.编写一个简单的控制台程序. using System; usi ...

  6. Prometheus监控学习笔记之Prometheus从1.x升级到2.x

    详细参考这篇文章 https://cloud.tencent.com/developer/article/1171434 prometheus 2.0于2017-11-08发布,主要是存储引擎进行了优 ...

  7. MySQL文档翻译(八)附英文原文---性能优化概览

    优化概述 数据库性能表现依赖于数据库级别的几个因素,比如表,查询和配置设置.这些软件在硬件级别通过CPU和IO操作构筑结果,你需要尽可能的使用最少的资源达到最大的效果.当你专注于数据库的性能表现时,你 ...

  8. radhat6.6上安装oracle12c RAC (一)

    软件环境:VMware.redhat6.6.oracle12c(linuxx64_12201_database.zip).12cgrid(linuxx64_12201_grid_home.zip) 一 ...

  9. 51nod1363 最小公倍数之和

    题目描述 给出一个n,求1-n这n个数,同n的最小公倍数的和. 例如:n = 6,1,2,3,4,5,6 同6的最小公倍数分别为6,6,6,12,30,6,加在一起 = 66. 由于结果很大,输出Mo ...

  10. HDU 3948 The Number of Palindromes(Manacher+后缀数组)

    题意 求一个字符串中本质不同的回文子串的个数. $ 1\leq |string| \leq 100000$ 思路 好像是回文自动机的裸题,但是可以用 \(\text{Manacher}\) (马拉车) ...