(推荐方法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. 记账本微信小程序开发七

    完成所有后续代码 主页代码 教程做的感觉很好,但是自己做出来感觉就low了很多,还是有很多需要改进的地方,这也是我下一步的改进点.

  2. CAN control

    2019/4/23--10:14 E_BSW_NWK_TRIGGER_SOURCE_KICK_MOTION_CMD SCI_NwkButton_GetPeriodicSignals case 6:   ...

  3. flutter中使用webview

    首先要安装一个插件:flutter_webview_plugin dependencies: flutter_webview_plugin: ^0.2.1+2 使用方法: new MaterialAp ...

  4. vim中^M的研究

    vim打开文件时在行尾显示^M,这样的情况时不时会遇到,下面稍微深入了解下这个问题: 原理呢,其实很简单:Windows换行风格(也叫dos风格)的文本以Unix风格解析就会出现这个情况: 首先重现这 ...

  5. ogg跳过某个RBA

    1.从库复制进程报如下错误 *************************************************************************              ...

  6. StringUtils工具类常用方法汇总(截取、去除空白、包含、查询索引)

    一.截取   StringUtils中常用的截取字符串的方法如下: substring(String str,int start) substring(String str,int start, in ...

  7. 剑指offer(16)合并两个排序的链表

    题目描述 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 题目分析 重点抓住这两个链表都是单挑递增的,因此我们只需要不断地比较他们的头结点就行,明显这是个 ...

  8. scala 入门Eclipse环境搭建

    scala 入门Eclipse环境搭建及第一个入门经典程序HelloWorld IDE选择并下载: scala for eclipse 下载: http://scala-ide.org/downloa ...

  9. Asp.net MVC5 学习笔记

    控制器(controller)主要负责响应用户的输入,并且在响应时修改模型(Model).通过这种方式,MVC模式中的控制器主要关注的是应用程序流.输入数据的处理,以及对相关视图(View)输出数据的 ...

  10. 03.v-cloak、v-v-text、v-html、v-bind、v-on

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...