虾米带你轻松搞定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项目中的调试工具和性能分析工具。都比较简单好用。