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. CKEDITOR (FCKEDITOR) --- 目前最优秀的可见即可得网页编辑器之一

    FCKEDITOR 编辑 同义词 CKEditor一般指FCKEDITOR FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写.具备功能强大.配置容易.跨浏览器. ...

  2. 一个spring 基本知识的微博(怎么加载多个xml、多个property文件、aop配置、监视器)

    http://blog.sina.com.cn/s/blog_61c5866d0100ev44.html

  3. 怎么快速学python?酒店女服务员一周内学会Python,一年后成为程序员

    怎么快速学python?有人说,太难!但这个女生却在一个星期内入门Python,一个月掌握python所有的基础知识点. 说出来你应该不信,刚大学毕业的女生:琳,一边在酒店打工,一边自学python, ...

  4. A - Oil Deposits DFS

    The GeoSurvComp geologic survey company is responsible for detecting underground oil deposits. GeoSu ...

  5. api测试用例(编写思路)

    在API的自动化测试维度中,测试维度分为两个维度,一个是单独的对API的验证,客户端发送一个请求后,服务端得到客户端的请求并且响应回复给客户端: 另外一个维度是基于业务场景的测试,基于业务场景的也就是 ...

  6. HTML学习过程-(1)

    记录我HTML的学习 (1) 最开始学习html是在因为在听北京理工大学教授讲的网络公开课上.当时老师讲的是网络爬虫,因为要爬取特定网页的信息,需要借助[正则表达式](https://baike.ba ...

  7. C#开发BIMFACE系列34 服务端API之模型对比5:获取模型构件对比差异

    系列目录     [已更新最新开发文章,点击查看详细] BIMFACE平台提供了服务端“获取修改构件属性差异”API,其返回的结果也是一个列表,仅针对修改的构件(不包含新增.删除的构件),是指对于一个 ...

  8. 想学习CTF的一定要看这篇,让你学习效率提升80%

    在学习CTF过程中你是否遇到这样的情况: 下定决心想要学习CTF,不知道从哪里开始? 找了一堆CTF相关的知识学习,但是知识点太凌乱,没有统一明确的学习路径. 又或者理论学习完,没有相应的实操环境? ...

  9. Springboot整合https原来这么简单

    1 简介 HTTP是不安全的,我们需要给它套上SSL,让它变成HTTPS.本文章将用实例介绍Springboot整合HTTPS. 2 密码学基础 要谈https就要谈Security,自然就要谈安全: ...

  10. Ubuntu初次使用的问题

    问题:正在等待packagekitd退出 解决办法:systemctl stop packagekit   或者 systemctl disable packagekit 问题:普通用户切换root权 ...