1.github下载地址：https://github.com/vuejs/vue-devtools

有Git的同学直接 Git clone https://github.com/vuejs/vue-devtools

2.下载安成之后打开cmd进入vue-devtools文件夹把依赖装好npm install 之后再进行npm run build

最好装一个cnpm

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

一切都万事具备了，打开chrome

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

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

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

vue-devtools chrome 开发工具的更多相关文章

  1. Chrome 开发工具指南

    Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...

  2. Chrome 开发工具之Timeline

    之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline更多的是用在性能优化方面,它的作用就是记录与分析应用程 ...

  3. Chrome 开发工具之Sources

    Sources面板主要用于查看web站点的资源列表及javascript代码的debug 熟悉面板 了解完面板之后,下面来试试这些功能都是如何使用的. 文件列表 展示当前页面内所引用资源的列表,和平常 ...

  4. Chrome 开发工具之Console

    前段时间看git的相关,记的笔记也大致写到了博客上,还有些因为运用不熟,或者还有一些疑惑点,暂时也不做过多纠缠,之后在实践中多运用得出结论再整理分享吧. 工欲善其事,必先利其器.要想做好前端的工作,也 ...

  5. Chrome开发工具之Console

    Chrome开发工具-Console 看了别人的博客,才发现在百度主页用开发工具“Console”可以看到百度的招聘信息 前端调试工具可以按F12打开,谷歌的开发工具中的Console面板可以查看错误 ...

  6. Chrome 开发工具之Timeline/Performance

    之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline(现已更名Performance)更多的是用在性能优化 ...

  7. Chrome 开发工具之 Memory

    开发过程中难免会遇到内存问题,emmm... 本文主要记录一下Chrome排查内存问题的面板,官网也有,但有些说明和例子跟不上新的版本了,也不够详细...   !!! 多图预警!!!    简单的内存 ...

  8. Vue.之.项目开发工具选用

    Vue.之.项目开发工具选用 上篇文章记录了创建项目,这篇文件记录,如何对创建的项目进行开发.这里选择一个工具:Visual Studio Code (请自行下载安装) 1. 打开VSCode工具,并 ...

  9. chrome开发工具指南（一）

    注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方 ...

  10. Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

    Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...

随机推荐

  1. 回溯法解n皇后问题

    #include<bits/stdc++.h> using namespace std; int n,sum; int c[100]; void search(int cur){ if(c ...

  2. What is 软件工程

    话说新的一学期,有一门叫软件工程的专业课,作为计算机科学与技术专业的学生,在上课前有几个问题 1.软件工程顾名思义是学软件,可是软件这个词范围还是挺大的,那到底学的是哪方面,是编程?设计APP?还是一 ...

  3. b总结

    Beta 答辩总结 评审表 组名 格式 内容 ppt 演讲 答辩 总计 天机组 15 15 13 15 14 72 PMS 16 16 15 16 16 79 日不落战队 16 17 17 17 17 ...

  4. 8-Python3从入门到实战—基础之数据类型（集合-Sets）

    Python从入门到实战系列--目录 集合的定义 集合(set)和字典类似,也是一组key的集合,但不存储value:由于key不能重复,所以,在set中,没有重复的key. 创建一个set,需要提供 ...

  5. Linux养成笔记

    教程来自慕课网@Tony老师的课程 Linux简介 Linux发展史 Andrew S. Tanenbaum为了给学生讲课,买了一个Unix操作系统,参考他开发了Minix,并开放代码作为大学研究,2 ...

  6. Maven+SSM整合.doc

    Maven + SSM整合 1开发环境搭建 1.1Eclipse4.7(Oxygen) + Tomcat8 + Maven3.5.2 2Maven Web项目创建 2.1新建maven项目 2.2 选 ...

  7. 【转】CSS颜色代码大全

    转自http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html FFFFFF #DDDDDD #AAAAAA #888888 #666666 #4 ...

  8. Mind Manager X 10 registry backup key under windows XP

    Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Mindjet\MindManager\10] [HKEY_CURRE ...

  9. 面象对象设计原则之二：开放封闭原则(Open-Closed Principle, OCP)

    开闭原则是面向对象的可复用设计的第一块基石,它是最重要的面向对象设计原则.开闭原则由Bertrand  Meyer于1988年提出,其定义如下: 开闭原则(Open-Closed Principle, ...

  10. pandas取值

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/5/24 15:03 # @Author : zhang chao # @Fi ...