移动端H5页面调试利器vconsole

---

前言

PC页面，我们可通过F12打开控制台，查看日志信息，便于测试调试。但放到移动端中，移动端是没有控制台的，我们就无法查看页面的console信息，非常不便。但vconsole插件解决了此问题~

---

一、vconsole是什么？

一个轻量、可拓展、针对手机网页的前端开发者调试面板。（腾讯出品）

源码链接：https://github.com/Tencent/vConsole

页面效果：页面前端将会在右下角出现 vConsole 的悬停按钮，可展开/收起面板。
若不希望普通用户看到面板，请不要在生产环境中引入 vConsole 模块。

二、主要功能面板

• Log：查看 console 日志

• System：查看系统信息
  

• Network：查看网络请求

• Element：查看页面 element 结构

• Storage：查看 Cookies、localStorage 和 SessionStorage

三、引入方式

1.cdn引入

<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
        var vConsole = new VConsole()
</script>

2.npm包引入

安装包

npm install vconsole

文件中引入

import VConsole from 'vconsole';
new VConsole();

---

总结

在开发和测试阶段，引入好的日志工具能有效提高工作效率！