开发避免不了的就是调试工具，因为vue是进行数据驱动的，单从chrome里面进行element查看，查不到什么鸟东西，必须要进行对数据动向进行关查

首先是下载这个工具，github下载地址：https://github.com/vuejs/vue-devtools，或者直接使用git克隆下来 git clone https://github.com/vuejs/vue-devtools

下载好后，在项目里面进入cmd  把依赖装好npm install 之后再进行npm run build

然后打开shells>chrome>manifest.json 把里面的"persistent": false改为true

打开chrome—打开里面的设置 > 点击扩展程序 > 点击开发者模式

再点击加载已解压的扩展程序，然后把shells>chrome这个文件夹放入就ok了

你再打开一个用vue写的网页，你再打开chrom调试工具你就会发现

vue调试工具的安装的更多相关文章

  1. vue调试工具vue-devtools安装及使用方法

    vue调试工具vue-devtools安装及使用方法 https://www.jb51.net/article/150335.htm 本文主要介绍 vue的调试工具 vue-devtools 的安装和 ...

  2. Vue学习笔记-vue调试工具vue-devtools安装及使用

    一  使用环境: windows 7 64位操作系统 二  vue调试工具vue-devtools安装及使用 1.下载: 百度中查找  "vue-devtools下载"  找到最新 ...

  3. vue调试工具vue-devtools安装及使用

    本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装:  1.到github下载: ...

  4. vue调试工具vue-devtools安装

    vue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试,这款vue调试神器可以极大地提高我们的调试效率.帮助我们快速的调试开发vue应用. 这里介绍一下vue-devtool ...

  5. Vue调试工具vue-devtools安装详解

    https://blog.csdn.net/github_37360787/article/details/80284418

  6. VUE环境搭建、创建项目、vue调试工具

    环境搭建 第一步 安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...

  7. PHP调试工具Xdebug安装配置教程

    说道PHP代码调试,对于有经验的PHPer,通过echo.print_r.var_dump函数,或PHP开发工具zend studio.editplus可解决大部分问题,但是对于PHP入门学习的童鞋来 ...

  8. Vue.js的安装及简单使用

    一.Vue简介 二.Vue.js的安装 2.1.npm安装 2.1.1.node.js介绍及安装 简介: 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基 ...

  9. vue用npm安装删除模块element-ui mint-ui

    vue用npm安装删除模块element-ui mint-ui 在vue项目中先引入了element-ui,后来发现移动版的需要用mint-ui,所以需要先卸载了再安装.卸载element-ui:np ...

随机推荐

  1. Netty 系列八（基于 WebSocket 的简单聊天室）.

    一.前言 之前写过一篇 Spring 集成 WebSocket 协议的文章 —— Spring消息之WebSocket ,所以对于 WebSocket 协议的介绍就不多说了,可以参考这篇文章.这里只做 ...

  2. win7卸载JDK出现windows Installer程序包有问题

    旭日Follow_24 的CSDN 博客 ,全文地址请点击: https://mp.csdn.net/postedit/82387967 操作系统:Windows 7 (64位) jdk版本:jdk1 ...

  3. 你试过不用if撸代码吗？

    译者按: 试着不用if撸代码,是件很有趣的事,而且,万一你领会了什么是“数据即代码,代码即数据”呢? 原文: Coding Tip: Try to Code Without If-statements ...

  4. DevExpress ChartControl ViewType.Line

    源码地址:https://files.cnblogs.com/files/lanyubaicl/ChartControl.Line.7z public partial class Form1 : Fo ...

  5. Python高级特性：切片

    切片的目的是实现取一个list或tuple的部分元素 学习自廖雪峰,个人理解如下: 取列表L的前三个元素 >>> L = ['Michael', 'Sarah', 'Tracy', ...

  6. Android为TV端助力 bitmap和数据流的互转

    Bitmap aa = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher); InputStream input ...

  7. mac os安装多个版本的chrome

    1.下载chrome69安装程序后,双击dmg文件 2.将chrome拖到Application文件夹,如图,选择保留两者,不要替换 打开应用程序,会多出一个Google Chrome2,重命名为Go ...

  8. Android 自定义AlertDialog的实现

    Android默认的AlertDialog太单调,我们可以通过继承原生的Dialog来实现自定义的Dialog. 本文的自定义Dialog和原生的AlertDialog的创建方式类似,通过一个静态Bu ...

  9. OkHttp的封装和使用详解

    Github地址 compile 'cn.yuan.yu:library:1.0.2' 第一步:初始化我们的工具类 public class MyApplication extends Applica ...

  10. QTP入门——玩玩小飞机

    1.什么是QTP? 百度百科中对QTP是这么介绍的: ——”QTP是QuickTest Professional的简称,是一种自动化测试工具.使用QTP的目的是想用它来执行重复的自动化测试,主要是用于 ...