移动端H5页面调试利器vconsole

文章目录

• 前言
• 一、vconsole是什么？
• 二、主要功能面板
• 三、引入方式
• • 1.cdn引入
  • 2.npm包引入
• 总结

前言

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();
           

总结

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