使用场景:
1)在我们开发app时,pc端开发时候好好的,到手机端却不起作用;
2)手机端APP不能调试,那该怎么办?于是就需要手机端调试工具;
3)本文章主要介绍vConsole有哪些功能,以及怎么使用等;
废话不多说,上干货
一、代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--适配手机屏幕-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>dome</title>
<!--vconsole js-->
<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
</head>
<body>
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
</script>
</body>
</html>
二、效果图
三、拓展
1、如我们看到的效果图1,里面是被new出来的vConsole按钮,该按钮还可拖拽;
2、效果图2是点击按钮后,展现出来的调试页面,里面分别有log(一般日志)、System(系统日志)、Network(网络日志)、Element(元素结构)、Storage(数据存储)等模块;
3、vConsole调试功能总体上和pc端游览器的调试功能相近,还是比较不错的一个插件;
四、其他
官方源代码地址 :https://github.com/Tencent/vConsole