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. Gitblit版本服务器环境部署记录

    Gitblit介绍Gitblit 是一个纯 Java 库用来管理.查看和处理 Git 资料库.相当于 Git 的 Java 管理工具,支持linux系统.Git是分布式版本控制系统,它强调速度.数据一 ...

  2. 如何解决jersey框架中以json格式返回数组，当数组中元素一个时json格式不对

    原文地址:http://www.cnblogs.com/swpk/p/3566536.html?utm_source=tuicool jersey 是oracle 出的一个较好的REST框架.使用此框 ...

  3. C_数据结构_数组

    //数组 # include <stdio.h> # include <malloc.h> //包含了 malloc 函数 # include <stdlib.h> ...

  4. D. Cutting Out

    ---恢复内容开始--- 链接 [https://codeforces.com/contest/1077/problem/D] 题意 给你n,k,n个数,找出长度为k,的子串(不需连续),使得该子串数 ...

  5. individual reading task ---12061183 叶露婷

    Different people deserve different tasks; Once team roles are settled, there comes along a lot of ot ...

  6. 20135218 实践四 ELF文件格式分析

    一 :概述 ELF全称Executable and Linkable Format,可执行连接格式,ELF格式的文件用于存储Linux程序.ELF文件(目标文件)格式主要三种: (1)可重定向文件:文 ...

  7. opencv学习笔记（一）

    摘要:最近要做一个和图像处理有联系的项目,从此走上了学习opencv的道路. 灰度图:2维矩阵 彩色图:3维矩阵 ps:目前大部分设备都是用无符号 8 位整数(类型为 CV_8U)表示像素亮度 Mat ...

  8. Activiti的BPMN演示工具

    场景是这样的:产品经理不懂技术,又不想安装Java以及Eclipse(需要安装Activiti BPMN Designer的插件). 这两天解决.bpmn的解析(BPMNParser)时顺带找到一个顺 ...

  9. Jest & React & Enzyme

    Jest & React & Enzyme auto units testing https://reactjs.org/docs/test-utils.html https://gi ...

  10. ava 8中的新功能特性

    正如我之前所写的,Java 8中的新功能特性改变了游戏规则.对Java开发者来说这是一个全新的世界,并且是时候去适应它了. 在这篇文章里,我们将会去了解传统循环的一些替代方案.在Java 8的新功能特 ...