VUE 配置vue-devtools调试工具及安装方法


Posted in Javascript onSeptember 30, 2018

1. 通过 Git 克隆项目到本地

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

2. Git 进入到 vue-devtools 所在目录,然后运行以下两个指令。

先运行 npm install 安装项目依赖

再运行 npm run build 进行编译生成

这两条指令的运行都需要一定的时间,请耐心等待,build 成功后如下图:

VUE 配置vue-devtools调试工具及安装方法

3.修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 将persistent 参数改为 true,如下图:

VUE 配置vue-devtools调试工具及安装方法

4. 将扩展程序添加到chrome浏览器

a. 打开浏览器扩展程序(也可以直接在地址栏输入 chrome://extensions/ 来打开)

VUE 配置vue-devtools调试工具及安装方法

b. 打开扩展程序后,开启 开发者模式,点击 加载已解压的扩展程序 按钮

VUE 配置vue-devtools调试工具及安装方法

c. 选择 vue-devtools > shells 目录下的 Chrome 文件夹,成功后如下图:

 加载成功后,先启用,然后点击旁边的刷新按钮,浏览器右上角就会出现一个Vue的logo图标

VUE 配置vue-devtools调试工具及安装方法

5. 到此调试工具安装完成。

需要注意的项: vue调试工具请在开发模式下使用,生产环境中不行。即 vue.min.js 文件下,调试工具无效。

下面看下vue调试工具vue-devtools的安装方法

先导

vue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试,这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。

第一步:

  我们可以先从github上找到vue-devtools的项目,下载到本地。下载vue-devtools链接。

克隆方法:git clone  https://github.com/vuejs/vue-devtools.git

第二步:

  解压下载好的文件,进入到vue-devtools目录,安装项目所需要的依赖包。

安装方法:npm install  或者  cnpm install (注:cnpm命令是国内的镜像,速度会快一些)

第三步:

   编译项目文件。

编译方法:npm run build

第四步:

修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 persistent参数改为true,访问协议是否包含:

1.http://*/*; 2.https://*/*; 3.file:///*;这三种情况

VUE 配置vue-devtools调试工具及安装方法

第五步:

           添加至浏览器:

添加方法:在chrome浏览器输入地址:“chrome://extensions/”进入扩展程序页面,然后点击“加载已解压的扩展程序...”按钮;选择vue-devtools>shells目录下的Chrome文件夹;还需允许文件地址是否访问。如果看不到“加载已解压的扩展程序...”按钮,先勾选“开发者模式”。如下图:

VUE 配置vue-devtools调试工具及安装方法

第六步:

使用:

    打开我们的vue应用,打开调试,点击vue扩展图标,就可以使用了。如下图:

VUE 配置vue-devtools调试工具及安装方法

注:如果点击vue扩展图标还是提示:Vue.jsis detectedonthis page. Open DevToolsand lookfor the Vue panel.
可以检查下你是否使用的是压缩版本的vue.min.js,使用vue.min.js默认为生产环境的,需要改为vue.js.

结束。

总结

以上所述是小编给大家介绍的VUE 配置vue-devtools调试工具及安装方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 #Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 #jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 #Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 #Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 #Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 #Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 #Javascript
You might like
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
2017/02/19 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
python二叉树的实现实例
2013/11/21 Python
python flask实现分页效果
2017/06/27 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python3爬虫怎样构建请求header
2018/12/23 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
django解决跨域请求的问题详解
2019/01/20 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
预防煤气中毒方案
2014/06/16 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript