1 . 下载chrome扩展插件。

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

2. npm install

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

1. npm install,安装依赖包;如果安装太慢,就先安装淘宝镜像,命令行输入    $ npm install -g cnpm --registry=https://registry.npm.taobao.org。

安装完成后可以测试是否安装成功:可输入命令:$ cnpm -v         返回版本号说明安装成功

 现在就可以用 $ cnpm install

 2.cnpm run build

编译打包完后会在shells>chrome下的src文件夹里生产如上图所示的几个js文件;

3.扩展chrome插件

  1.打开chrome浏览器,点击右上角,打开更多工具>扩展程序;

  2.打开右上角的开发者模式。 再点击加载已解压的扩展程序,然后把shells>chrome文件夹放入

  3.测试插件是否有效。运行Vue项目后 切换到Vue模式。

免责声明

  • 本博客所有文章仅用于学习、研究和交流目的,欢迎非商业性质转载。
  • 博主在此发文(包括但不限于汉字、拼音、拉丁字母)均为随意敲击键盘所出,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能,并不代表本人局部或全部同意、支持或者反对观点。如需要详查请直接与键盘生产厂商法人代表联系。挖井挑水无水表,不会网购无快递。
  • 博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高(其实是个菜B),不足和错误之处在所难免,希望大家能够批评指出。
  • 博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的文章,请原谅博主成为一个无耻的文档搬运工!

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

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

    (推荐方法2) 安装方法1: 需正常打开chrome商店,搜索vuejs devtools 安装.chrome://extensions/ 开发者工具-扩展程序下启用: 方法2: github下载插件 ...

  2. 谷歌浏览器安装json格式化插件

    1.下载JsonView扩展程序压缩包 下载地址:https://github.com/gildas-lormeau/JSONView-for-Chrome 点击[Clone or download] ...

  3. xpath-helper: 谷歌浏览器安装xpath helper 插件

    1.下载文件xpath-helper.crx xpath链接:https://pan.baidu.com/s/1dFgzBSd 密码:zwvb,感谢这位网友,我从这拿到了 2.在Google浏览器里边 ...

  4. 如何给谷歌浏览器安装vue-devtools插件

    感谢原作者:https://www.cnblogs.com/alice-fee/p/8038367.html 安装方法1: 需正常打开chrome商店,搜索vuejs devtools 安装.chro ...

  5. 使用sublime text3编写vuejs项目需要安装的一些插件

    最近使用webstorm开发vuejs项目的时候经常出现卡顿的现象,感觉还是sublime text3比较轻巧便捷,但是使用sublime text3需要安装一些插件- 1. 让vue文件高亮: 安装 ...

  6. 谷歌浏览器安装插件时出现:程序包无效:“CRX_HEADER_INVALID" 后的解决办法

    以安装书签管理插件Neater Bookmarks为例: 1.下载:网址http://www.cnplugins.com/zhuanti/sixbookmarksintroduce.html 2.将下 ...

  7. Vue安装Vue Devtools调试工具提示 Error: Cannot find module '@vue-devtools/build-tools' 解决办法

    我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装, 但是在最终执行编译命令的时候 :npm run build ,提示如下错误: 尝试了很多方法,都不能解决 ...

  8. React安装React Devtools调试工具

    在运行一个React项目的时候浏览器控制台会提醒你去安装react devtools调试工具. Download the React DevTools for a better development ...

  9. 安装Elasticsearch可视化插件

    背景 项目中使用Elasticsearch , 最开始14年使用的时候需要es自己安装插件才能通过web页面查看数据情况,目前新版本的ES安装插件很费劲,通过搜索发现目前谷歌浏览器就有这个插件,这里简 ...

随机推荐

  1. document.cookie = 'wcookie_date=' + wv + ';max-age=60'

    js cookie生命周期

  2. SEO优化 给a标签添加rel="nofollow"

    为什么要使用nofollow标签? 我们使用nofollow标签的目的是很明确的,就是减少蜘蛛对页面上垃圾链接的爬行和传递权重,或者减少蜘蛛对页面上“无用”链接的爬行和传递链接权重. 这里所说的无用是 ...

  3. MongoDB-5: 查询(游标操作、游标信息)

    一.简介 db.collection.find()可以实现根据条件查询和指定使用投影运算符返回的字段省略此参数返回匹配文档中的所有字段.并返回到匹配文档的游标,可以随意修改查询限制.跳跃.和排序顺序的 ...

  4. 在Docker上安装配置Oracle教程

    地址:https://github.com/wnameless/docker-oracle-xe-11g Docker shell 下: docker pull wnameless/oracle-xe ...

  5. 在PC上调试微信手机页面的三种方法

    场景 假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开.而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试.这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不 ...

  6. python学习之路-第八天-文件IO、储存器模块

    文件IO.储存器模块 文件IO 代码示例: # -*- coding:utf-8 -*- #! /usr/bin/python # filename:using_file.py poem = '''\ ...

  7. bootstrap select 学习使用笔记-------选中赋值及change监听丢失

    在 bootstrap 和 knockout 共同存在下使用 select 下拉选择插件,发现绑定选项.赋值之后插件不可用了,绑定的监听事件也丢失了.迫不得已在绑定选项值之后再次调用刷新,以及赋值后重 ...

  8. Java集合(3):Vector && Stack

    一.Vector介绍 Vector可以实现可增长的动态对象数组.与数组一样,它包含可以使用整数索引进行访问的组件.不过,Vector的大小是可以增加或者减小的,以便适应创建Vector后进行添加或者删 ...

  9. Django_内置Admin

    Django内置Admin   Django内置的Admin是对于model中对应的数据表进行增删改查提供的组件,使用方式有: 依赖APP: django.contrib.auth django.co ...

  10. Java分布式:JWT(JSON Web Tokens)

    Java分布式:JWT(JSON Web Tokens) 0.优势 Session方式存储用户状态占用大量服务器内存.一般而言,大型应用还需要借助一些KV数据库和一系列缓存机制来实现Session的存 ...