第一步: 前往 GitHub 下载 Vue Devtools 项目文件

https://github.com/vuejs/vue-devtools

注意:

1. 将分支切换为 master

2. 下载.zip压缩包后在本地解压

第二步: 进入解压后的文件夹, 打开powershell, 执行下面两条命令: 

cnpm install
npm run build

注意:

1. cnpm install 可以 改为: npm install, 这一步可能很慢, 建议还是安装cnpm, 然后切换为淘宝镜像源;

2. npm run build 用于编译源程序

第三步: 打开位于 shells > chrome 中的 mainfest.json 文件, 把 persistent 字段设置为: true

注意:

1. mainfest.json 是Chrome扩展程序的配置文件, 各个配置项的作用详见: 这里

2. persistent 为true时可以指定常驻浏览器后台的脚本, 并且可以连接其他页面;

第四步: 打开Chrome浏览器, 把 扩展程序中的开发者选项打开, 然后把 shell > chrome 这个文件夹整个拖进浏览器页面.

第五步: 现在 运行一个 Vue 项目后, 打开浏览器, 就可以使用 Vue Devtools 了

怎样在Chrome浏览器上安装 Vue Devtools 扩展程序的更多相关文章

  1. 在google chrome浏览器上安装 Vue Devtools工具

    [转]https://www.cnblogs.com/tanyongli/p/7554045.html Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的 ...

  2. 在浏览器上安装 Vue Devtools工具

    Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码. 1)首先在github下载devtools源码,地 ...

  3. 浏览器上安装vue devtools

    安装前要检查一下node版本的(node -v),必须将版本提高到>4.4.7.低版本的node在安装devtools时执行npm install 时报错.如何升级node版本,若在window ...

  4. 安装Vue Devtools

    命令行进入vue-devtools\vue-devtools-master执行 cnpm install (貌似npm不太好使,也可能是我网络代理的原因) (淘宝镜像安装 npm install -- ...

  5. 将firebug安装在chrome浏览器上

    一直很喜欢火狐浏览器,原因是火狐的插件很喜欢,几天突然发现firebug这个插件能够安装在chrome浏览器上,震惊,更震惊的是这个好似已经很长时间了,而我猜发现. 具体的具体页面地址是 http:/ ...

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

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

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

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

  8. (二)Fiddler抓取Firefox、Chrome浏览器上的https协议

    Fiddler抓取Firefox.Chrome浏览器上的https协议 安装Fiddler后默认只抓取http协议,如果是https协议的话,浏览器就会提示"您的链接并不安全". ...

  9. 利用ChromeCROSS可以在chrome浏览器上调试跨域代码

    利用ChromeCROSS可以在chrome浏览器上调试跨域代码 1.下载ChromeCROSS文件,可百度下载,或者在我的百度云上下载:链接: https://pan.baidu.com/s/10_ ...

随机推荐

  1. OpenCL多次循环执行内核的一个简单样例

    最近有不少朋友在多次循环执行OpenCL内核程序的时候碰到一些问题.由于对OpenCL初学者而言可能比较普遍,因此我这里给出一个清晰简单的demo来掩饰如何简单又高效地执行循环执行OpenCL内核. ...

  2. Flex 弹性盒子布局使用教程

    本文转载于<https://blog.csdn.net/lyznice/article/details/53981062>

  3. C++ STL copy copy_backward

    #include <iostream>#include <algorithm>#include <vector>#include <functional> ...

  4. Java NIO 学习笔记 读写结合补充

    小练习:nio读写文件,将fileread中的内容读取到filewrite中 try { //创建输入通道 FileInputStream fis = new FileInputStream(&quo ...

  5. String字符串的截取

    根据某个字段将字符串分割成绩部分 String str = "string number one 1/9/0"; //将字符串由/ 截取成绩部分 String[] strs = s ...

  6. Go 微服务架构Micro相关概念理解

    Micro是一个微服务框架(或者说是工具集):提供了各类组件,解决微服务架构中的不同问题,服务监控.服务发现.熔断机制,负载均衡等等,自己一个个解决这些问题几乎不可能,这时候就需要借助go-micro ...

  7. Vue 2.x指令综合小练习

    实现效果如下: 代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  8. 反向代理远端 单台tomcat 使用ip+端口

    .环境 nginx 10.1.1.161 公网:123.58.251.166 tomcat 10.1.1.103 .tomcat 配置 [root@host---- ~]# netstat -tnlp ...

  9. LODOP设置纸张无效问题

    有的打印机不支持自定义纸张,或不支持当前设置的纸张尺寸,会造成纸张尺寸和代码里设置的尺寸不一致的情况.现象:1.代码一样,纸张语句设置正确,有的打印机纸张正常,有的打印机不正常.2.代码一样,纸张语句 ...

  10. swift 第十三课 GCD 的介绍和使用

    手头的项目中基本没有用到这个,但是还是要探索下.毕竟好多的地方要用这个,而且现在手机和电脑等电子设备都是多核心的,这样就成就了多线程带来更加优越的用户体验. 先记录下,自己看到的两个不错的连接: ht ...