废话就不多说,直接上安装步骤,一步一步来 => success

1.下载安装vue-devtools源文件

mkdir vuetools
cd vuetools git clone https://github.com/vuejs/vue-devtools.git
cd vue-devtools
npm install --registry=https://registry.npm.taobao.org
npm run build
 

2.修改manifest.json文件

cd vue-devtools
cd shells
cd chrome
vi manifest.json
// 修改persistent为true

3.将vue-devtools文件夹复制到Chrome插件文件夹中

// 大致在这个路径下:
~/Library/Application Support/Google/Chrome/Default // vue-devtools文件夹复制到Default下 // mac上找路径犯难了,可以随便打开一个文件 顶部 前往>前往文件夹>路径

4.将vue-devtools文件夹添加到浏览器扩展

// 在Chrome地址栏输入  chrome://extensions/
// 进入扩展程序页面,将文件夹拖入浏览器即可。
// 至此安装完成。安装成功后浏览器右上角会出现vue的图标,表示安装成功。 // 现在可以体验一下vue这个调试工具了。

后话:

对于安装Vue Devtools插件成功后使用提示Vue.js not detected,有可能是你引入了压缩版的vue.min.js,必须要引入vue.js才行喔。

其实早就了解过这个工具,之前在windows上安装过,没成功。所以一直也没有体验过。也是刚刚安装完成,方法当然也是参考了很多大神的思路,以上方法亲测可行,就说这么多吧,有问题一起交流。

mac-chrome下手动安装vue-devtools

 










* {display: table-row!important}
.MJXp-surd {vertical-align: top}
.MJXp-surd > * {display: block!important}
.MJXp-script-box > * {display: table!important; height: 50%}
.MJXp-script-box > * > * {display: table-cell!important; vertical-align: top}
.MJXp-script-box > *:last-child > * {vertical-align: bottom}
.MJXp-script-box > * > * > * {display: block!important}
.MJXp-mphantom {visibility: hidden}
.MJXp-munderover {display: inline-table!important}
.MJXp-over {display: inline-block!important; text-align: center}
.MJXp-over > * {display: block!important}
.MJXp-munderover > * {display: table-row!important}
.MJXp-mtable {vertical-align: .25em; margin: 0 .125em}
.MJXp-mtable > * {display: inline-table!important; vertical-align: middle}
.MJXp-mtr {display: table-row!important}
.MJXp-mtd {display: table-cell!important; text-align: center; padding: .5em 0 0 .5em}
.MJXp-mtr > .MJXp-mtd:first-child {padding-left: 0}
.MJXp-mtr:first-child > .MJXp-mtd {padding-top: 0}
.MJXp-mlabeledtr {display: table-row!important}
.MJXp-mlabeledtr > .MJXp-mtd:first-child {padding-left: 0}
.MJXp-mlabeledtr:first-child > .MJXp-mtd {padding-top: 0}
.MJXp-merror {background-color: #FFFF88; color: #CC0000; border: 1px solid #CC0000; padding: 1px 3px; font-style: normal; font-size: 90%}
.MJXp-scale0 {-webkit-transform: scaleX(.0); -moz-transform: scaleX(.0); -ms-transform: scaleX(.0); -o-transform: scaleX(.0); transform: scaleX(.0)}
.MJXp-scale1 {-webkit-transform: scaleX(.1); -moz-transform: scaleX(.1); -ms-transform: scaleX(.1); -o-transform: scaleX(.1); transform: scaleX(.1)}
.MJXp-scale2 {-webkit-transform: scaleX(.2); -moz-transform: scaleX(.2); -ms-transform: scaleX(.2); -o-transform: scaleX(.2); transform: scaleX(.2)}
.MJXp-scale3 {-webkit-transform: scaleX(.3); -moz-transform: scaleX(.3); -ms-transform: scaleX(.3); -o-transform: scaleX(.3); transform: scaleX(.3)}
.MJXp-scale4 {-webkit-transform: scaleX(.4); -moz-transform: scaleX(.4); -ms-transform: scaleX(.4); -o-transform: scaleX(.4); transform: scaleX(.4)}
.MJXp-scale5 {-webkit-transform: scaleX(.5); -moz-transform: scaleX(.5); -ms-transform: scaleX(.5); -o-transform: scaleX(.5); transform: scaleX(.5)}
.MJXp-scale6 {-webkit-transform: scaleX(.6); -moz-transform: scaleX(.6); -ms-transform: scaleX(.6); -o-transform: scaleX(.6); transform: scaleX(.6)}
.MJXp-scale7 {-webkit-transform: scaleX(.7); -moz-transform: scaleX(.7); -ms-transform: scaleX(.7); -o-transform: scaleX(.7); transform: scaleX(.7)}
.MJXp-scale8 {-webkit-transform: scaleX(.8); -moz-transform: scaleX(.8); -ms-transform: scaleX(.8); -o-transform: scaleX(.8); transform: scaleX(.8)}
.MJXp-scale9 {-webkit-transform: scaleX(.9); -moz-transform: scaleX(.9); -ms-transform: scaleX(.9); -o-transform: scaleX(.9); transform: scaleX(.9)}
.MathJax_PHTML .noError {vertical-align: ; font-size: 90%; text-align: left; color: black; padding: 1px 3px; border: 1px solid}
-->

mac-chrome下手动安装vue-devtools的更多相关文章

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

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

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

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

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

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

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

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

  5. Ubuntu 14.04 下手动安装Firefox的Flash插件

    有时候我们不得不採用手动安装一些软件. Ubuntu 14.04 下手动安装Firefox的Flash插件有下面几步 1. 下载Flash插件 下载地址为http://get.adobe.com/cn ...

  6. ubuntu14.04下手动安装eclipse

    ubuntu14.04下手动安装eclipse 第一步: 安装jdk 第二步: 下载eclipse,假设下载的文件文件名为eclipse.tar.gz 第三步: 解压 sudo -zxvf ./ecl ...

  7. ubuntu14.04 下手动安装java jdk

    ubuntu14.04 下手动安装java jdk 第一步: 下载jdk.tar.gz (这里假设下载的文件名为jdk.tar.gz) 第二步: 解压 sudo tar -zxvf ./jdk.tar ...

  8. windows下手动安装composer并配置环境变量

    windows下手动安装composer并配置环境变量   转载地址: https://my.oschina.net/7sites/blog/209997 之前发表过一篇如何为composer设置代理 ...

  9. windows下手动安装 Apache+php+mysql

    PHP 为什么先说php,因为apache的配置要写入php的一些路径 http://php.net/downloads.php  选择windows donwload 选择Thread Safe的版 ...

随机推荐

  1. 重构drf项目后的manage.py报错的问题

    Python3.6 用Django连接mysql一直报错django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.3 or newer ...

  2. 图解数据库中的各种 JOIN

    本文转载至https://mazhuang.org/2017/09/11/joins-in-sql/#full-outer-join-excluding-inner-join,如需阅读原文请至上述链接 ...

  3. 一分钟了解Linux文件系统

    Linux文件系统原理在所有的操作系统中文件都有文件名与数据,在Linux系统上文件系统分成两个部分:用户数据 (user data) 与元数据 (metadata).用户数据,即文件数据块 (dat ...

  4. jquery动态加载并解决被加载页面js失效问题

    代码布局结构分为 header  left  content html代码如下: <!DOCTYPE html> <html lang="zh-CN"> & ...

  5. [ 原创 ] Map之HashMap的使用方法

    import java.util.HashMap;import java.util.Iterator;import java.util.Map;import java.util.Map.Entry;/ ...

  6. centos6.5安装pip方法

    pip类似RedHat里面的yum,安装Python包非常方便.本节详细介绍pip的安装.以及使用方法. 一.pip下载安装 1.1 pip下载 wget "https://pypi.pyt ...

  7. Java并发包--ConcurrentLinkedQueue

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3498995.html ConcurrentLinkedQueue介绍 ConcurrentLinkedQ ...

  8. mybatis-oracle 新增序列

    1.参考 https://blog.csdn.net/qq_29001173/article/details/82106853 2.思考: 2.1获取序列下一个值:seq_car.nextval 2. ...

  9. 快捷键IntelliJ IDEA For Mac

    http://www.cnblogs.com/wxd0108/p/5295017.html Mac键盘符号和修饰键说明 ⌘ Command ⇧ Shift ⌥ Option ⌃ Control ↩︎  ...

  10. BZOJ 4029 [HEOI2015] 定价 ( 数位DP/贪心 )

    前言 最近学了数位DP,感觉挺简单又实用.这道题就比较水,可以用300B的贪心过掉-网上似乎大多是贪心的题解,我就写写DP的做法 题意 给出正整数区间[L,R][L,R][L,R],定义荒谬值为 (去 ...