通过实例解析chrome如何在mac环境中安装vue-devtools插件


Posted in Javascript onJuly 10, 2020

1之前在windows上装过,最近刚换了个mac本,重新安装下,也是为了记录下我安装的过程。

github下载vue-devtool到本地

下载地址https://github.com/vuejs/vue-devtools#vue-devtools

注意,下载的时候默认的是在dev分支,要切换到master,然后克隆到本地(可以先放桌面)

通过实例解析chrome如何在mac环境中安装vue-devtools插件

2.将下载的项目文件放入 Chrome浏览器的插件文件夹

在浏览器地址栏输入chrome://version/

通过实例解析chrome如何在mac环境中安装vue-devtools插件

找到路径之后,可以在顶部工具栏”前往“中直接输入文件地址

3.在default文件夹下新建Extensions文件夹(已经存在就不用新建了),并且将下载的vue-devtool-master文件夹复制进去,cd进入该文件夹cd vue-devtools-master

4. 安装依赖

npm install

npm run build(没有这一步会报错哦~)

通过实例解析chrome如何在mac环境中安装vue-devtools插件

5.在地址栏输入chrome://extensions,打开右侧开发者模式

将vue-devtools-master/shells/chrome文件夹拖入扩展程序页面即可

如果以上步骤完成之后,在控制台还是不显示Vue的tab,以上vue图标不亮,点击图标出现vue.js not detected的提示还需要进行以下步骤

找到安装目录

通过实例解析chrome如何在mac环境中安装vue-devtools插件

修改mainifest.json文件中的persistent:false,修改成persistent:true。一般这个时候就可以正常使用了

如果还是不行,修改webpack.config.js的代码

通过实例解析chrome如何在mac环境中安装vue-devtools插件

修改成development,(可能正式版本发布的时候,需要修改回来,待验证)

再运行vue项目 就可以正常调试了

通过实例解析chrome如何在mac环境中安装vue-devtools插件

通过实例解析chrome如何在mac环境中安装vue-devtools插件

通过实例解析chrome如何在mac环境中安装vue-devtools插件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
JavaScript字符串对象
Jan 14 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
在nuxt中使用路由重定向的实例
Nov 06 Javascript
基于vue+element实现全局loading过程详解
Jul 10 #Javascript
JS sort方法基于数组对象属性值排序
Jul 10 #Javascript
JavaScript this指向相关原理及实例解析
Jul 10 #Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 #Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 #Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 #Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 #Javascript
You might like
php实现mysql数据库备份类
2008/03/20 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
Jquery attr("checked") 返回checked或undefined 获取选中失效
2013/10/10 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
JavaScript入门基础
2015/08/12 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
python实现自动更换ip的方法
2015/05/05 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
python输出带颜色字体实例方法
2019/09/01 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
电信专业毕业生推荐信
2013/11/18 职场文书
表彰先进集体通报
2014/01/12 职场文书
总经理助理工作职责
2014/02/06 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python