简单介绍下vConsole:
vConsole是一个由微信公众平台前端团队研发的web前端开发者面板,可用于展示console日志,方便开发、调试。
使用场景1,在vue-cli 构建的项目中使用:
通过npm安装和使用:
npm install vconsole --save
在main.js文件里面引入:
import VConsole from 'vconsole'
Vue.prototype.$vconsole = VConsole;
在App.vue 中开启调试,初始化(可以由后端提供一个接口判断是否要打开调试)
new this.$vconsole();
然后在手机上运行查看:手机上运行PC端的vue项目
效果图如下:(右下角会出现绿色的vConsole)
使用方法二: 在HTML中使用调试插件
引入vconsole.min.js文件
下载方式1-----github上下载:https://github.com/Tencent/vConsole/releases/tag/v3.3.4
下载方式2----- https://download.csdn.net/download/miss_liangrm/11748848
】
index.html代码如下(引入vconsole.min.js代码可以直接在浏览器运行查看)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title></title>
<script src="dist/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>
</head>
<body>
你好,我是测试vconsole的页面
</body>
</html>
下面来一个解锁的demo
demo实现的功能:通过设置4个不同位置的按钮来解锁,点击的顺序对就解锁成功,出现调试信息,方便线上调试日志。
效果图:
源码
<!DOCTYPE html>
<html>
<!--http://127.0.0.1:8020/h5-view/web_view.html?session3rd=xcx_loginid_2b5c5801e44d4c03806cfcb11d9329b7-->
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/vconsole.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>我的调试</title>
<style type="text/css">
#__vconsole {
display: none;
}
.vconsole_item {
position: fixed;
width: 100px;
height: 100px;
z-index: 999;
background: red;
}
.left_t {
top: 40px;
left: 0;
}
.right_t {
top: 40px;
right: 0;
}
.left_b {
bottom: 0;
left: 0;
}
.right_b {
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="app" id="app">
<div v-if="vconsole_show">
<div class="vconsole_item left_t" @click="vconsole(0)"></div>
<div class="vconsole_item right_t" @click="vconsole(1)"></div>
<div class="vconsole_item left_b" @click="vconsole(2)"></div>
<div class="vconsole_item right_b" @click="vconsole(3)"></div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
vconsole_show: true,
logPassword: []
},
mounted() {
new VConsole();
console.log('页面参数:' + JSON.stringify(this.getUrlkey(window.location.href)))
},
methods: {
// 点击开锁,打印信息
vconsole: function(str) {
var password = [0, 3, 1, 2]
if (this.logPassword.length == 0) {
this.logPassword[0] = str;
} else if (this.logPassword.length == 1) {
if (str == password[1]) {
this.logPassword[1] = str;
} else {
this.logPassword = [];
}
} else if (this.logPassword.length == 2) {
if (str == password[2]) {
this.logPassword[2] = str;
} else {
this.logPassword = [];
}
} else if (this.logPassword.length == 3) {
if (str == password[3]) {
$('#__vconsole')[0].style.display = "block";
console.log('this.logPassword4:', this.logPassword, str);
} else {
this.logPassword = [];
}
}
},
// url参数解析
getUrlkey: function(url) {
var params = {};
if (url.indexOf("?") != -1) {
var urls = url.split("?");
var arr = urls[1].split("&");
for (var i = 0, l = arr.length; i < l; i++) {
var a = arr[i].split("=");
params[a[0]] = a[1];
}
} else {}
return params;
}
},
})
</script>
</body>
</html>
源码整个项目下载地址: