(推荐方法2)

安装方法1: 需正常打开chrome商店,搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展程序下启用;

方法2: github下载插件,npm包安装依赖,拖入浏览器扩展程序

具体操作:

1 . 下载chrome扩展插件。

在github上下载压缩包并解压到本地,github下载地址:https://github.com/vuejs/vue-devtools

2. npm install

下载完成后打开命令行cmd进入vue-devtools-master文件夹,

1. npm install,安装依赖包;如果安装太慢,请参照文章末尾说明进行操作。

2. npm run build

npm run build 执行完,会在shells>chrome下的src文件夹里生产如上图所示的几个js文件;

若不执行以上命令会报错,无法加载背景脚本"build/background.js",如下图:

3. 打开shells>chrome>manifest.json并把json文件里的"persistent":false改成true

4. 扩展chrome插件

1.打开chrome浏览器,打开更多工具>扩展程序;

2.再点击加载已解压的扩展程序,然后把shells>chrome文件夹放入

5, 测试安装成功

在插件的目录下执行npm run dev,这个时候我们的插件就可以运行了,打开localhost:8080可以看到插件已经安装并运行了。

方法3: 下载chrome插件安装包(.crx文件)离线安装(版本较低不推荐)

下载地址:http://www.cnplugins.com/devtool/vuejs-devtools/download.html

安装方法:http://www.cnplugins.com/tools/how-to-setup-crx.html

在chrome中新开一个TAB,输入:chrome://extensions/ 回车,打开应用管理器,可以看到之前安装的其他应用。将下载后的.crx文件,拖入即可安装。

另附:

1. 建议使用npm淘宝镜像安装依赖包地址:http://npm.taobao.org/

命令行安装npm淘宝镜像:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

之后我们就可以使用cnpm代替npm安装依赖包了

2. chrome插件网地址 http://www.cnplugins.com/, 有需要别的插件的可类似以上操作。

谷歌浏览器chrome的vuejs devtools 插件的安装的更多相关文章

  1. 谷歌浏览器安装vuejs devtools 插件

    1 . 下载chrome扩展插件. 在github上下载压缩包并解压到本地,github下载地址:https://github.com/vuejs/vue-devtools 2. npm instal ...

  2. 打包谷歌浏览器 Chrome 已安装的插件

    环境: OS - win7 64bit 旗舰版 Chrome - 37.0.2062.120 m 以 Smooth Gestures (一款鼠标手势插件)为例,在扩展程序面板 chrome://ext ...

  3. Axure谷歌浏览器Chrome扩展程序下载及安装方法

    对于很多需要设计产品原型的朋友来说,Axure RP Pro可谓是非常方便.好用的一款软件,因为它不仅能绘制出详细的产品构思,也能生成浏览器格式的产品原型.但是如果想把原型拿给客户查看,千万记得给浏览 ...

  4. 【Chrome】Octotree Chrome插件离线安装

    插件下载地址:http://www.cnplugins.com/devtool/octotree/download.html Octotree 是国外程序员Buu Nguyen 做的一个 Chrome ...

  5. 【终极指南】图文详解Chrome插件离线安装方法

    Chrome插件离线安装背景介绍 因为无法访问Google所以国内用户目前大多只能通过第三方比如我们Chrome插件网下载插件,然后离线安装.Chrome官方自67版本后,只允许用户通过谷歌应用商店安 ...

  6. 如何安装CRX格式?Chrome插件离线安装,CRX格式安装方法 JSON-handle Chrome插件下载

    目前,Chrome官方已经禁止非Chrome商店的应用安装了,所以本站的应用还是通过国外服务器从谷歌官方应用市场下载下来的,提供给国内的广大用户使用,下面我们就以 Check my cookies 插 ...

  7. 谷歌浏览器Chrome错误提示Flash过期怎么办(转)

    在使用谷歌浏览器Chrome时,会碰到谷歌浏览器Chrome的错误提示:“Adobe Flash Player因过期而遭到阻止”,点击“更新插件”是不行的,国内的网络根本就打不开,点击“运行一次”是可 ...

  8. Google浏览器PostMan插件版安装步骤

    PostMan插件版安装步骤: 第一步:把下载后的.crx扩展名的离线Chrome插件的文件扩展名改成.zip或者.rar 第二步:右键点击该文件,并使用压缩软件(如winrar.360压缩等)对该压 ...

  9. Elasticsearch-head插件的安装与配置

    第一种: 通过浏览器添加插件 通过chrome安装插件的方式提供一个可操作es的图形化界面. 在chrome 浏览器中,通过"扩展程序" 添加 elasticsearch head ...

随机推荐

  1. https://scrapingclub.com/exercise/basic_captcha/

    def parse(self, response): # set_cookies = response.headers.getlist("set-cookie").decode(& ...

  2. JavaScript 神奇的参数

    JS函数的参数,和其他语言区别非常大.它不在乎你传过来多少个参数,也不在乎传过来的参数是什么类型.即使你定义的函数只接受两个参数,你调用这个函数的时候可以传递一个.三个甚至不传参数.这是因为JavaS ...

  3. mysql 事务锁超时时间 innodb_lock_wait_timeout

    mysql 事务锁超时时间 innodb_lock_wait_timeout: # 查询全局等待事务锁超时时间 SHOW GLOBAL VARIABLES LIKE 'innodb_lock_wait ...

  4. 浅探网络1---tcp协议详解(三次握手和四次挥手)

    TCP协议是网络多层协议中运输层的最重要的协议之一,运输层是两台主机的进程之间的通信.除了TCP还有一个是UDP协议(用户数据包协议) TCP全称是Transmission Control Proto ...

  5. Oarcle之视图

    视图 什么是视图? (在 SQL 中,视图是基于 SQL 语句的结果集的可视化的表. 视图包含行和列,就像一个真实的表.视图中的字段就是来自一个或多个数据库中的真实的表中的字段.我们可以向视图添加 S ...

  6. go中 -strconv包的使用

    strconv 包中的函数和方法 // atob.go ------------------------------------------------------------ // ParseBoo ...

  7. 单元测试系列之四:Sonar平台中项目主要指标以及代码坏味道详解

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6766994.html 众所周知Sona ...

  8. 如何使用JavaScript UI控件(WijmoJS)构建Electron应用程序

    概述 What is Electron? Electron是一个使用JavaScript.HTML和CSS构建跨平台桌面应用程序的框架. 您可以将Electron与纯JavaScript或您选择的Ja ...

  9. Dubbo和Spring Cloud微服务架构对比

    https://blog.csdn.net/zhangweiwei2020/article/details/78646252

  10. $set()的正确使用方式

    vue给对象新增属性,并触发视图更新 如下代码:给student对象新增age属性 data () { return { student: { name: '', sex: '' } } } 众所周知 ...