vconsole 调试 查看LOG VUE在手机上调试 手机查看h5的日志
简单介绍下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>
源码整个项目下载地址：
相关文章：
无参数的lambda匿名函数
lambda 语法： lambda [arg1[,arg2,arg3....argN]]:expression 1.单个参数的： g lambda x:x*2 print g(3) 结果是6 2.多个参数的： m lambda x,y,z: (x-y)*z print m(3,1,2) 结果是4 3.无参数 # 使用def定义函数的方法 def true():return Tru…
scrum项目管理_Scrum，用于初创企业（或针对该项目的任何项目）
scrum项目管理Scrum is a lightweight framework designed to help small, close-knit teams of people develop complex products.Scrum是一个轻量级框架，旨在帮助紧密联系的小型团队开发复杂的产品。 Of course, Scrum isn’t just applicable to software proje…
升级Jekyll 3.0
每一次的升级都得又一次折腾一次，jekyll也不例外 从jekyll 2.5.2 升级为jekyll 3.0.1 错误一: jekyll 3.0.1 | Error: Permission denied - bind(2) for 127.0.0.1:4000 端口被占有，打开_config.yml 在最后加上一行 port: 5001 (其它也可)问题解决 错误…
jquery学习（3）--高级选择器
自己手写的学习笔记。常规选择器： /****************学习--高级选择器（1）****************/---高级选择器：ie7层次选择器：后代选择器 ul li a $(ul li a) 获取追溯到的多个dom对象 ie6子选择器 …
h5 返回上一页并且刷新页面
window.history.go(-1) 和 window.history.back(-1) 都用了，安卓会刷新，IOS系统不刷新（IOS会读取浏览器缓存） 下面用了一种比较low的方法，但是好歹实现了。。 //home.html localStorage.setItem(homeHref,window.loc…
kotlin中的异常处理_如何使用assertFailsWith在Kotlin中测试异常
kotlin中的异常处理by Daniel Newton丹尼尔牛顿 如何使用assertFailsWith在Kotlin中测试异常 (How to test exceptions in Kotlin with assertFailsWith) I wanted to write this short post to highlight the assertFailsWith function available to Kotlin. This function m…
学习dubbo框架的问题
InputStream ： 是所有字节输入流的超类，一般使用它的子类：FileInputStream等，它能输出字节流；InputStreamReader ： 是字节流与字符流之间的桥梁，能将字节流输出为字符流，并且能为字节…
Android 控件 之 Menu 菜单
http://www.cnblogs.com/Mrs-cc/archive/2012/07/21/2603042.html 1.OptionsMenu （选项菜单）用法总结使用方法：方法一：添加菜单项：onCreateOptionsMenu（Menu menu）中添加menu.add(Menu.NONE,Men…
VUE保存页面的数据，VUE页面显示就执行某个函数，VUE页面隐藏就执行某个函数
用 VUE 默认的 keep-alive 组件实现 保存页面的数据,页面显示就执行某个函数，页面隐藏就执行某个函数实现方式： 1.在路由内设置页面是否需要缓存； 示例代码：（在需要的组件里面添加meta 对象，keepAlive属…
npm i和npm_让您的NPM套件包含Jest和Codecov☂️
npm i和npmby Carl-Johan Kihl卡尔约翰基尔(Carl-Johan Kihl) 让您的NPM套件包含Jest和Codecov☂️ (Get your NPM-package covered with Jest and Codecov ☂️) 介绍 (Introduction) Let’s talk about code coverage, and how you can do coverage reports in Jest and Cod…
分页传页数的方法
<!DOCTYPE html><html> <head> <meta charset"UTF-8"> <title></title> </head> <body> <div> <span id"num">1</span> <button id"prev">上一页</button> <…
VUE input唤起键盘 底部固定的标签被顶上去解决办法
通过输入框的失去焦点事件和点击事件，当出现键盘时把绝对定位的底部文字隐藏，失去焦点（键盘隐藏的时候）显示底部文字 解决代码 <input type"text" class"weui-input" click"input_click" blur…
unity中摄像机的控制---调整摄像机，不让他摔倒
摄像机大部分人都会控制，最明显的就是让他旋转，随着鼠标的左右上下移动而旋转，但是总是会遇到一个问题，就是转着转着就仿佛他自己摔倒了似的，其实就是它本身绕着Z轴旋转了 这样就不是我们想要的结果了 要想解决也简单&…
java正则表达式课程_通过此免费课程学习正则表达式
java正则表达式课程by Beau Carnes通过博卡恩斯 通过此免费课程学习正则表达式 (Learn Regular Expressions with this free course) “Some people, when confronted with a problem, think ‘I know, I’ll use regular expressions.’ Now they have two problems.” -Jami…
Codeforces Round #370 (Div. 2)
A - Memory and Crow 这题我没看题意，看了样例猜了一下就AC了，题目好像还挺复杂的。 #include<bits/stdc.h> using namespace std; int a[100005]; int main() {int n;cin>>n;for(int i1;i<n;i) scanf("%d",&a[i]);for(int…
pat1004. Counting Leaves (30)
1004. Counting Leaves (30) 时间限制400 ms内存限制65536 kB代码长度限制16000 B判题程序Standard作者CHEN, YueA family hierarchy is usually presented by a pedigree tree. Your job is to count those family members who have no child. Input Each input file contains…
css 引用字体
最近遇到个问题，页面使用的字体要用PingFangSC字体，引入方法如下： 简单介绍下PingFangSC字体： （1）苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; （2）苹方…
系统技术方案 系统构架_构架系统时应注意的事项
系统技术方案 系统构架by Ayelet Sachto通过Ayelet Sachto 架构系统时要记住的6件事 (6 Things to keep in mind when architecting a system) Architecture may sound like a “scary ” or overwhelming subject, but actually, applying logic and approaching the problem…
[LeetCode] Add Digits
Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. For example: Given num 38, the process is like: 3 8 11, 1 1 2. Since 2 has only one digit, return it. 分析一：最简单的循环方法 class Solutio…
vue 点击事件执行多次
把 click 改成 click.once 就可以了 示例代码 click.once"down" 这样有一个弊端，就是事件只执行一次就不再执行了， 另一种方式，做一个定时器 //默认设置dddown为 true if(that.dddown){that.dddown falsesetTimeout(function(…
如何以及为什么使用Android Visibility Listeners
The Android UI is built up from Views, and in a regular application, there are usually several of them. To find out which View the user is currently looking at, you need to install Visibility Listeners.Android UI是从Views构建的，在常规应用程序中&…
在vue中使用Element-UI
Element-UI是一套基于Vue2.0的UI组件库，http://element.eleme.io/#/zh-CN/component/carousel 首先npm install element-ui --save 然后在main.js中引入： import Vue from vue import ElementUI from element-ui import element-ui/lib/theme-default/in…
Flex布局教程（来源：阮一峰）
网页布局（layout）是 CSS 的一个重点应用。Flex 布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的 Flex 写法。网友 JailBreak 为本文的所有示例制作了 Demo，也可以参考。 以下内容主要参考了下面两篇文…
ibatis的there is no statement named xxx in this SqlMap
报错情况如下：com.ibatis.sqlmap.client.SqlMapException: There is no statement named Control.insert-control in this SqlMap. at com.ibatis.sqlmap.engine.impl.SqlMapExecutorDelegate.getMappedStatement(SqlMapExecutorDelegate.java:231)at com.ibatis.sq…
javascript案例_如何在JavaScript中使用增强现实-一个案例研究
javascript案例by Apurav Chauhan通过Apurav Chauhan 如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Reality with JavaScript — a case study) In this experiment, I talk about how Augmented Reality with JS can be used to make learning more f…
久未更 ~ 一之 —— 关于ToolBar
很久没更博客了，索性开一个久未更 系列 > > > > > 久未更 系列一：关于ToolBar的使用(后续补充) 1 //让 ToolBar 单独使用深色主题 使得 toolbar 中元素 变为淡色 2 android:theme"style/ThemeOverlay.AppCompat.Dark.ActionBar"…
SQLServer怎样把本地数据导入到远程服务器上(转载)
平常用到mssql时间比较少，总是过一段时间就忘记应该怎么操作了。当要做mssq把本地数据导入到远程服务器的时候，就去网上搜索很久都没有图解的，所以今天自己收集一下免得下次又到处去找。希望对自己，同时对其它需要的人都有一定的帮…
input 默认样式的修改
/* 修改input选中的默认边框样式 */ outline: none; /* 修改input的选中时的光标颜色 */ caret-color:red; /* 修改input的选中时的默认边框 */ border: none; /* 修改input的提示文字的默认样式 */ input::-webkit-input-placeholder{color:#d0d0d0;}
巨石加密_点餐：如何吃一个可怕的巨石
巨石加密by Alan Ridlehoover通过艾伦里德尔霍弗 点餐：如何吃一个可怕的巨石 (Ordering Take Out: How to Eat a Scary Monolith) Martin Fowler said:马丁福勒(Martin Fowler) 说 ： Almost all the successful microservice stories have started wit…
Halcon学习之六：获取Image图像中Region区域的特征参数
area_center_gray ( Regions, Image : : : Area, Row, Column ) 计算Image图像中Region区域的面积Area和重心（Row，Column）。 cooc_feature_image ( Regions, Image : : LdGray, Direction : Energy,Correlation, Homogeneity, Contrast ) …