虾米带你轻松搞定Vuejs 系列
(十二)调试补充-调试和性能
在开发中,我们难免会涉及到调试和检测性能等等。今天我们就来整理一下vue的几个调试和性能检测工具。
移动端调试
由于在移动端无法打开控制台,所以想办法打印调试console的数据一直苦恼。之前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好。怎么办呢?其实Vue也帮我们提供了移动端调试的工具 - vConsle。
特性
- 查看网络请求
- 查看 console 日志
- 查看页面 element 结构
- 查看 Cookies 和 localStorage
- 手动执行 JS 命令行
- 自定义插件
使用
那怎么使用呢?我们下面就来说一下vConsole怎么使用。我们这里主要记录的是Vue项目,所以我们不去探讨直接引入js放在html中的那种情况。
首先:package.json安装vconsole包(可以放在devDependencies中),直接执行 npm install vconsole --save-dev 安装开发者模式中。
其次:我们要在Vue项目的入口文件中进行一些代码的修改。我的项目中的入口文件是main.js,好了废话不多少了,直接上代码。
代码很简单,就是说在非生产环境的情况下使用调试工具,这里包含pc端和移动端哈。
最后:来看看项目启动起来的效果吧。这里我要分别使用手机和pc进行预览,所以我把ip调整一下。
pc效果
移动端效果
整个调试工具就已经完毕了,当然其实还有很多类似的工具,可以自己去学习。最后说一下原理:改写了console.log,重写了实现,用vConsole代理
性能追踪及分析
作为一个前端,应该熟悉一些前端的性能工具,这里我们还是介绍Vue的性能分析工具,performance API 是 Vue 全局配置 API 中的一个,我们可以使用它来进行网页性能的追踪,我们可以在入口文件中添加:
来开启这一功能,该 API(2.2.0 新增)功能只适用于开发模式和支持 performance.mark API 的浏览器上,开启后我们可以下载 Vue Performance Devtool 这一 chrome 插件来看查看各个组件的加载情况,如图:
从中我们可以清晰的看到页面组件在每个阶段的耗时情况,而针对耗时比较久的组件,我们便可以对其进行相应优化。
而其在 Vue 源码中主要使用了 window.performance 来获取网页性能数据,其中包含了 performance.mark 和 performance.measure。
- performance.mark 主要用于创建标记
- performance.measure 主要用于记录两个标记的时间间隔
这里不对性能做深入的研究了,需要研究时参看MDN Web Docs,害怕忘记附上地址:https://developer.mozilla.org/zh-CN/docs/Web/API/Performance
总结
今天的笔记记录了Vue项目中的调试工具和性能分析工具。都比较简单好用。