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. 软件工程项目之摄影App（第二次冲刺）

    第二次冲刺阶段做出了登录,还有首页.基本界面也成型了. 登录验证码是用了mob的验证码skd.

  2. Hibernate的初次使用

    使用hibernate的四个步骤:第一:创建一个hibernate.cfg.xml.<!DOCTYPE hibernate-configuration PUBLIC "-//Hiber ...

  3. Alpha 答辩总结模板

    Alpha 答辩总结模板 每个小组提供一篇总结博客(组内共享,每个人都发布),包含: 本组(组名)所有成员(短学号,名,标注组长)(1分) 组内各成员贡献比例,如不提供,取平均分后组长得分减50% G ...

  4. Debian中APT的前世今生

    https://baike.baidu.com/item/apt-get/2360755 https://www.debian.org/doc/manuals/debian-handbook/sect ...

  5. Docker 执行nginx以及简单进入container

    1. docker run -d --name mynginx nginx 运行起来nginx镜像之后 2. docker exec -ti mynginx /bin/bash 能够进入操作界面 发现 ...

  6. using 的三种使用方式

    using 关键字有两个主要用途: 作为指令:用于为命名空间创建别名或导入在其他命名空间中定义的类型. 作为语句:用于定义一个范围,在此范围的末尾将释放对象. 此外,使用 using 静态指令可定义一 ...

  7. jmeter简单录制脚本

    1 创建HTTP请求默认值. --添加线程组:右击"测试计划"→添加→Threads(Users)→线程组,建议重命名线程组增强可读性. --添加HTTH请求默认值:右击" ...

  8. resharper license server

    2018-5-14更新 http://jetbrains-a.pw good 2018-4-17 更新 http://jetbrains.tools bad 144.202.4.96 good 201 ...

  9. maven依赖有一个步长原则 如果a 对 b和c都有依赖 如果b的步长近则使用b的

    maven依赖有一个步长原则 如果a 对 b和c都有依赖 如果b的步长近则使用b的

  10. 14Junit、反射、注解

    14Junit.反射.注解 14.1.1 Junit的概述      一般IDE都内置了junit,若需要自行下载jar包,可以访问官网,官网地址如下:http://www.junit.org 1. ...