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. AJ学IOS 之ipad开发qq空间项目横竖屏幕适配

    AJ分享,必须精品 一:效果图 先看效果 二:结构图 如图所示: 其中用到了UIView+extension分类 Masonry第三方框架做子控制器的适配 NYHomeViewController对应 ...

  2. SpringBoot实现图片上传demo&Nginx进行代理显示

    公司项目需要一个图片上传的功能,就图片能上传到服务器(公司用的windows服务器),然后nginx能进行代理访问到就行了,先简单介绍一下nginx,然后再来实现功能. 一.nginx简介 Nginx ...

  3. CSS也能计算:calc

    举个例子ul li适配屏幕,如果加个border:1px,不用border-content得情况下,每个li多加了2px: <ul><li></li><li& ...

  4. Python基础:按位异或 ^ ,按位或 | ,按位与 &

    前言文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http: ...

  5. gdb 调试中No symbol “***” in current context解决方法

    主要是因为GCC/G++版本和GDB不匹配造成的,网上也有说是因为O2优化问题,具体啥原因需要自己尝试一下. 解决: 放狗搜索,解决办法是在编译是加-gdwarf-3即可,出现这样的原因是gcc,gd ...

  6. 实例讲解Springboot以Repository方式整合Redis

    1 简介 Redis是高性能的NoSQL数据库,经常作为缓存流行于各大互联网架构中.本文将介绍如何在Springboot中整合Spring Data Redis,使用Repository的方式操作. ...

  7. vue2.x学习笔记(十五)

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12609450.html. 组件的自定义事件 这里来学习一下组件中的自定义事件. 事件名 不同于组件名和prop,事 ...

  8. BMP图片解析

    本博客参考:https://www.cnblogs.com/l2rf/p/5643352.html 一.简介 BMP(Bitmap-File)图形文件是Windows采用的图形文件格式,在Window ...

  9. Mysql中的一些类型

    列类型--整数类型Tinyint:迷你整形 一个字节=8位 最大能表示的数值是0-255 实际区间 -128~127Smallint:小整形 两个字节 能表示0-65535Mediumint:中整型 ...

  10. 百度云BCH配置说明

    百度云虚拟空间(BCH)  来源:https://www.cnblogs.com/llll/p/7930029.html 参考资料:https://cloud.baidu.com/doc/BCH/Ge ...