vconsole 调试查看LOG VUE在手机上调试手机查看h5的日志

最新推荐文章于 2024-03-26 16:54:21 发布

a_靖

最新推荐文章于 2024-03-26 16:54:21 发布

阅读量3.2k

点赞数 2

分类专栏： Web前端 JS vue 文章标签：日志查看h5日志查看h5调试信息查看log log

本文链接：https://blog.csdn.net/qq_35713752/article/details/100879287

版权

Web前端同时被 3 个专栏收录

391 篇文章 24 订阅

订阅专栏

186 篇文章 4 订阅

订阅专栏

vue

84 篇文章 4 订阅

订阅专栏

简单介绍下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>

源码整个项目下载地址：

a_靖

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
vconsole 调试查看LOG VUE在手机上调试手机查看h5的日志

简单介绍下vConsole：vConsole是一个由微信公众平台前端团队研发的web前端开发者面板，可用于展示console日志，方便开发、调试。使用场景1，在vue-cli 构建的项目中使用：通过npm安装和使用:npm install vconsole --save在main.js文件里面引入：import VConsole from 'vconsole'Vue....
复制链接

扫一扫