学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象、组件、事件等。

本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装为例。

步骤:

1、打开Chrome浏览器,右上角找到“自定义及控制Google Chrome”图标。

2、点击图标,找到“更多工具”菜单项下的“扩展程序”(第1步和第2步也可以合并为直接在地址栏输入:chrome://extensions/)

3、将Vue.js devtools_3.1.2_0.crx文件拖放至扩展程序中即可安装。

4、安装完成后,在浏览器的右上角会看到V字型图标。

5、点击V字型图标,可能会提示:Vue.js not detected的信息,接下来解决这个问题。

6、首先找到刚才在扩展程序中安装的Vue.js devtools 3.1.2,点击“详细信息”,能看到Vue.js devtools的ID,我的是:blilalokifjgienomccehdbhiamjcppo。同时,将“允许访问文件网址”的选项启用。

7、然后到C:\Users\temptation\AppData\Local\Google\Chrome\User Data\Default\Extensions目录下(其中temptation是我的系统账户名称),能找到相应的Chrome浏览器插件的目录文件,其中就有和ID同名的blilalokifjgienomccehdbhiamjcppo目录。

8、打开目录,找到manifest.json文件,打开找到"background"节点,将其"persistent"属性的值从false修改为true。

9、重启Chrome浏览器,打开使用Vue.js开发版的网页文件,发现此时Vue.js devtools图标亮了,可以使用该插件了。

【原】无脑操作:Chrome浏览器安装Vue.js devtool的更多相关文章

  1. chrome浏览器安装vue调试器vue-devtools

    chrome浏览器安装vue调试器vue-devtools https://blog.csdn.net/zhangjnwei/article/details/76693053

  2. Chrome 浏览器安装Vue插件方法 (十分详细)

    博主最近在研究Vue,无奈新手想安装Chrome的Vue插件,整理下安装流程: 1.首先去github下载vue.zip文件插件(还有npm安装方法这里就不介绍了自行百度)下载地址:https://g ...

  3. 【原】无脑操作:EasyUI Tree实现左键只选择叶子节点、右键浮动菜单实现增删改

    Easyui中的Tree组件使用频率颇高,经常遇到的需求如下: 1.在树形结构上,只有叶子节点才能被选中,其他节点不能被选中: 2.在叶子节点上右键出现浮动菜单实现新增.删除.修改操作: 3.在非叶子 ...

  4. 【原】无脑操作:express + MySQL 实现CRUD

    基于node.js的web开发框架express简单方便,很多项目中都在使用.这里结合MySQL数据库,实现最简单的CRUD操作. 开发环境: IDE:WebStorm DB:MySQL ------ ...

  5. 【原】无脑操作:IDEA + maven + Shiro + SpringBoot + JPA + Thymeleaf实现基础授权权限

    上一篇<[原]无脑操作:IDEA + maven + Shiro + SpringBoot + JPA + Thymeleaf实现基础认证权限>介绍了实现Shiro的基础认证.本篇谈谈实现 ...

  6. 【原】无脑操作:IDEA + maven + Shiro + SpringBoot + JPA + Thymeleaf实现基础认证权限

    开发环境搭建参见<[原]无脑操作:IDEA + maven + SpringBoot + JPA + Thymeleaf实现CRUD及分页> 需求: ① 除了登录页面,在地址栏直接访问其他 ...

  7. 【vue】chrome已安装Vue Devtools在控制台却无显示

    chrome已安装Vue Devtools在控制台却无显示的解决: 在点亮Vue Devtools图标后,控制台没有vue解读显示. 原因:脚手架配置NODE_ENV直接定义为了production版 ...

  8. 【原】无脑操作:Webstorm集成Git/Github

    Webstorm作为前端开发的主流工具,对Git及Github可以非常简便的集成. 1.开发环境:(如何安装就不说了) ① Webstorm 2018 ② git version 2.20.1 ③ G ...

  9. chrome浏览器的VUE调试插件Vue.js devtools

      chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...

随机推荐

  1. Makefile 编写 tips

    1.变量赋值 VARIABLE = value #在执行时扩展,允许递归扩展 VARIABLE := value #在定义时扩展 VARIABLE ?= value #只有在该变量为空时才设置该值 V ...

  2. [QGLViewer]First Demo

    Dependencies: QGLViewer2.6.3 Win7 64bit VS2010 直接使用QGLViewer文件夹下的Pro文件在VS2010中可以编译成64位的Dll. 用外面的libQ ...

  3. 修改linux共享内存大小

    这是实际linux系统显示的实际数据: beijibing@bjb-desktop:/proc/sys/kernel$ cat shmmax  33554432 beijibing@bjb-deskt ...

  4. BC 2015在百度之星程序设计大赛 - 预赛(1)(矩形区域-旋转卡)

    矩形区域 Accepts: 717 Submissions: 1619 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 ...

  5. 计算机网络课程优秀备考PPT之第六章传输层(六)

    为了记录自己从2016.9~2017.1的<计算机网络>助教生涯,也为了及时梳理和整写笔记! 前期博客是, 计算机网络课程优秀备考PPT之第一章概述(一) 计算机网络课程优秀备考PPT之第 ...

  6. java MD5比较文件内容

    最近用到,记下来…… 功能: 对指定目录下的所有TXT文件,通过MD5比较内容,删除掉重复的文件.文件的扩展可以修改成.docx..doc..jpg..png,或者其它类型,根据需求灵活修改. pub ...

  7. 巩固java(一)----java与对象

         C语言是一种面向过程语言,在解决问题时,要先分析出问题的解决步骤,然后按顺序一步步实现,使用的时候一个一个调用.所以面向过程编程是以过程为中心的.      不同于面向过程编程,面向对象编程 ...

  8. LINQ学习之旅 C#3.0新特性(一)

    一:C#3.0新语言的特性 自动属性(Auto-Implemented Properties) 隐含类型局部变量(Local Variable Type Inference) 匿名类型(Anonymo ...

  9. Python基础2 字符编码和逻辑运算符

    编码 AscII码 :标准ASCII码是采用7位二进制码来编码的,最高为0,没有0000 0000,所以就是2**7-1=127个字符 , 当用1个字节(8位二进制码)来表示ASCII码时,就在最高位 ...

  10. MVC添加数据并存入数据库

    你可以下载演示的数据库,在这篇<MVC显示详细记录Without Entity Framework>http://www.cnblogs.com/insus/p/3366608.html结 ...