移动H5调试神器vConsole


字数:254 阅读时长:1分钟 阅读:85

在做移动H5时,经常需要真机调试,但是手机端没有像Chrome控制台那样的开发者工具,对于networkconsole日志没办法查看,所以便有了今天的开发神器——vConsole

H5+vConsole

vConsole介绍

vConsole是一个第三方插件工具,封装了浏览器的一系列调试信息,如:log日志SystemNetworkElementStorageCookie这是都是开发中时常要查看使用的信息。

安装使用

  • npm 安装
1
npm i -D vconsole
  • npm 使用
1
2
3
4
5
6
7
8
9
10
11
import VConsole from 'vconsole';

const vConsole = new VConsole();
// or init with options
const vConsole = new VConsole({ maxLogNumber: 1000 });

// call `console` methods as usual
console.log('Hello world');

// remove it when you finish debugging
vConsole.destroy();
  • CDN使用
1
2
3
4
5
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>
// VConsole will be exported to `window.VConsole` by default.
var vConsole = new window.VConsole();
</script>

手机端展现

vConsole

自从有了vConsole,移动H5开发调试变得SoEasy。

  • 还有另一个类似的调试工具:eruda,可以根据喜好自行选择。

欢迎访问:天问博客

本文作者: Tiven
发布时间: 2021-11-05
最后更新: 2023-07-17
本文标题: 移动H5调试神器vConsole
本文链接: https://www.tiven.cn/p/a570d170/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!