mac安装vue devtools

1.到github下载vue tool 的压缩包

正常的方法:git clone https://github.com/vuejs/vue-devtools

但事实上这个方法不行,因为GitHub上vue-tool版本更新后正常方法操作一直会有问题,所以我们安装下面代码选择旧版本下载

git clone -b add-remote-devtools https://github.com/vuejs/vue-devtools

2.在vue-devtools目录下安装依赖包

cd vue-devtools

sudo cnpm install

然后输入电脑密码

(加上sudo为了避免权限问题部分依赖无法安装)

3.修改manifest.json文件

把"persistent":false改成true

4.编译npm run build

编译成功界面如下

5.谷歌浏览器-->设置-->拓展程序

打开“开发者模式”,点击“加载已解压的拓展程序”,选择vue-devtool中的chrome文件夹,成功看见如下界面:

搞定!!

之后使用f12打开vue项目时,就可以像下图这样使用这个工具啦!!

mac安装vue-devtools的更多相关文章

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

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

  2. Mac安装vue

     Mac安装vue 一.安装brew 打开终端运行以下命令: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com ...

  3. Mac安装vue.js开发环境

    Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...

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

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

  5. 怎样在Chrome浏览器上安装 Vue Devtools 扩展程序

    第一步: 前往 GitHub 下载 Vue Devtools 项目文件 https://github.com/vuejs/vue-devtools 注意: 1. 将分支切换为 master 2. 下载 ...

  6. MAC安装vue.js

    一.下载node node下载地址:https://nodejs.org/en/download/ 下载后点击安装即可. node -v 检查安装是否成功 二.安装 淘宝镜像 (npm) npm in ...

  7. 浏览器上安装vue devtools

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

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

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

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

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

  10. 安装Vue Devtools

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

随机推荐

  1. MyBatis通用 Mapper4使用小结

    官网地址: http://www.mybatis.tk/ https://gitee.com/free 1.使用springboot,添加依赖: 使用tk的mybatis后不需要引用官方原生的myba ...

  2. Geber文件,装配图,BOM表的输出

    一.Geber文件的输出步骤: 注:选择需要导出的层 注:所指箭头的地方都多加个零,让输出有更大的空间来容纳 总结:这就是最终的Geber文件了 二.NC   Drill file的输出: 三.IPC ...

  3. 天天在用Redis,持久化方案你又知道哪些?

    前言 文章首发于微信公众号[码猿技术专栏]:天天用Redis,持久化方案有哪些你知道吗? Redis目前已经成为主流的内存数据库了,但是大部分人仅仅是停留在会用的阶段,你真的了解Redis内部的工作原 ...

  4. mybatis一级缓存让我憔悴

    Mybatis对缓存提供支持,是默认开启一级缓存. 来一段代码,这边使用的是mybatis-plus框架,通过构建 QueryWrapper 查询类来实现的. @Transactional publi ...

  5. 史上最详细的VM虚拟机安装Kali-linux教程(以2020.1版本为例,含下载地址+默认提升为root权限)

    一.官方下载 Kali Linux 官方网址:www.Kali.org下载方式分两种:http 下载和 bt 下载(由于是国外网站 http 方式下载会非常慢),选择对应版本点击即可下载. 二.创建新 ...

  6. System类的两个静态方法currentTimeMillis 和 arraycopy

    package com.yhqtv.demo02.ThreadPool; import java.util.Arrays; public class Test { public static void ...

  7. 小程序里button边框有黑线解决办法(自定义button样式)

    .go_to_user::after{ border:1px solid transparent; } button的class为go_to_user button{ padding:; box-si ...

  8. 同步类的基础AbstractQueuedSynchronizer(AQS)

    同步类的基础AbstractQueuedSynchronizer(AQS) 我们之前介绍了很多同步类,比如ReentrantLock,Semaphore, CountDownLatch, Reentr ...

  9. 开发AI+诊疗生发系统,「先锋汇美」借力人工智能辅助诊疗实现头皮医学检测...

    困扰年轻人的脱发问题萌生了新兴的产业链.36氪先前曾剖析过近来火热的植发市场,更多人则选择"防范于未然","头皮检测"服务备受关注.此前,人们对"头皮 ...

  10. laravel 5.5 ajax返回错误信息

    前段ajax发送请求 $('#reg_reg').click(function () { var formData = new FormData($( "#reg_form" )[ ...