学习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. Chrome安装Vue.js devtool F12无效

    要安装 vue-devtools-4.1.4_0 链接: https://pan.baidu.com/s/1aeUxKJEUDW0U_i6uuAZFvQ 提取码: 4btc vue-devtools- ...

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. dup和dup2应用实例(dup跟APUE有出入,close+dup=dup2?)

    dup/dup2函数 有时我们希望把标准输入重定向到一个文件,或者把标准输出重定向到一个网络连接. dup()与dup2()能对输入文件描述符进行重定向. 函数原型如下: dup函数创建一个新的文件描 ...

  2. Linux 普通用户之间免密登陆

    目的: 同台机器之间实现普通用户之间的免密登陆: NN01 的user1 免密登陆 user2 不同机器之间实现普通用户之间的免密登陆 :NN01 的user1 免密登陆 NN01 的user1 一. ...

  3. 【转】java中equal与==的区别 其中有个缓冲区,需要注意

    转自http://www.cnblogs.com/dolphin0520/p/3592500.html 在学Java时,可能会经常碰到下面的代码: 1 String str1 = new String ...

  4. MongoDB的安装启动及做成windows服务

    直接上干货. 官网地址:https://www.mongodb.com/download-center?jmp=nav#community 点击图中链接进入所有版本的下载列表 我下载的是3.6.5版本 ...

  5. 最强AngularJS资源合集

    AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发者可以使用HTML来 ...

  6. VS2012中出现“无法启动程序...debug\abc.exe,系统找不到指定文件”的问题!

    VS 2005在生成可执行文件时使用了一种新的技术,该技术生成的可执行文件会伴随生成一个清单文件(manifest file)(.manifest后缀文件)(其本质上是XML文档,你可以用文本编辑器打 ...

  7. UOJ#37. 【清华集训2014】主旋律

    题目大意: 传送门 题解: 神题……Orz. 首先正难则反. 设$f_S$表示选取点集状态为s时,这部分图可以构成非强联通图的方案数. 设$p_{S,i}$表示点集s缩点后有i个入度为0点的方案数,保 ...

  8. 【bzoj2432】【NOI2011】兔农

    题目描述 农夫栋栋近年收入不景气,正在他发愁如何能多赚点钱时,他听到隔壁的小 朋友在讨论兔子繁殖的问题. 问题是这样的:第一个月初有一对刚出生的小兔子,经过两个月长大后,这 对兔子从第三个月开始,每个 ...

  9. bzoj 2821 作诗 分块

    基本思路和蒲公英一样 还是预处理出每两个块间的答案 询问时暴力跑两边的贡献 #include<cstdio> #include<cstring> #include<ios ...

  10. set的便捷操作

    认识集合 由一个或多个确定的元素所构成的整体叫做集合. 集合中的元素有三个特征: 1.确定性(集合中的元素必须是确定的) 2.互异性(集合中的元素互不相同.例如:集合A={1,a},则a不能等于1) ...