手机前端开发调试利器 – vConsole
我们在开发手机版网页的时候,常常会出现下面的情景:
(1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log;
(2) 上线后,某用户表示页面失灵,但我们自己又重现不出来,看不到用户侧的出错信息。
如果说(1)还可以通过电脑连接手机以查看log来解决,那(2)在没有完善的前端上报体系时就非常被动了。
作为开发者,我们的诉求很简单:有没有快捷的方法在手机前端页面看到log日志?
答案是肯定的。
vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。
特性:
- 查看 console 日志
- 查看网络请求
- 手动执行 JS 命令行
- 自定义插件
上手
下载 vConsole 的最新版本。(不要直接下载 dev 分支下的 dist/vconsole.min.js)
或者使用 npm 安装:
npm install vconsole
引入 dist/vconsole.min.js
到项目中:
<script src="path/to/vconsole.min.js"></script>
<script>
console.log('Hello world');
// 然后点击右下角 vConsole 按钮即可查看到 log
</script>
demo代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vConsole/Demo</title>
<link href="weui.min.css" rel="stylesheet"/>
<link href="demo.css?v=1.1.0" rel="stylesheet"/> <script src="zepto.min.js"></script>
<script src="zepto.touch.min.js"></script> <!-- 引入vConsole的JS库 -->
<script src="vconsole.min.js?v=2.2.0"></script>
</head>
<body ontouchstart>
<div class="page">
<h1 class="page_title">vConsole</h1>
<div class="weui_text_area">
<p class="weui_msg_desc">点击下面的按钮,即可打印 log。<br/>点击右下角按钮,即可查看 log。</p>
</div>
<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="log">普通日志(log)</a>
<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="info">信息日志(info)</a>
<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="debug">调试日志(debug)</a>
<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="warn">警告日志(warn)</a>
<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="error">报错日志(error)</a> <a href="javascript:;" class="weui_btn weui_btn_default js_btn_log_obj">打印Object</a>
<a href="javascript:;" class="weui_btn weui_btn_default js_btn_trigger_error">触发JS Error</a>
<a href="javascript:;" class="weui_btn weui_btn_default js_btn_log_sys">打印到系统面板</a>
<a href="javascript:;" class="weui_btn weui_btn_default js_btn_ajax">发起AJAX</a> </div>
<div class="weui_toptips weui_notice" id="js_tips">已打印log</div>
</body> <script>
console.info('欢迎使用 vConsole。vConsole 是一个由微信公众平台前端团队研发的 Web 前端开发者面板,可用于展示 console 日志,方便开发、调试。'); $('.js_btn_log').on('tap', function(e) {
var type = $(this).data('type');
console[type](type); // 例如,console.log(type)
showTips();
});
$('.js_btn_log_obj').on('tap', function(e) {
console.log({
string: 'foobar',
number: 233,
boolean: true,
object: {
foo: 'bar'
},
array: [8, 7, 6],
func: function() {}
});
showTips();
});
$('.js_btn_trigger_error').on('tap', function(e) {
showTips();
var err = undefined;
err.a = 1;
});
$('.js_btn_log_sys').on('tap', function(e) {
// 输出到系统面板
console.log('[system]', '当前时间戳:', (+new Date()));
showTips();
});
$('.js_btn_ajax').on('tap', function(e) {
// 发起一个AJAX
$.get('ajax.html', function(resp) {
console.log(resp);
});
showTips();
}); // 用于页面内展示顶部tips
var tipsTimer;
function showTips() {
tipsTimer && clearTimeout(tipsTimer);
$('#js_tips').show();
tipsTimer = setTimeout(function() {
$('#js_tips').hide();
}, 1500);
}
</script>
</html>
手机前端开发调试利器 – vConsole的更多相关文章
- 手机前端开发调试利器-vConsole
最近因为做抽奖页面,在android上可以使用手机连上电脑后用chrome浏览器chrome://inspect进行页面探测,但是ios中的页面就不能这样探测 在网上搜索后发现此插件,大大解决了问题 ...
- Safari 前端开发调试 iOS 完美解决方案
转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05 0个评论 来源:Safari ...
- 手机H5 web调试利器——WEINRE (WEb INspector REmote)
手机H5 web调试利器--WEINRE (WEb INspector REmote) 调试移动端页面,优先选择使用chrome浏览器调试,如果是hybrid形式的页面,可以使用chrome提供的ch ...
- 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试
记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...
- 前端读者 | 前端开发者调试面板vConsole
来着微信团队开源的一个调试工具,[GitHub地址]https://github.com/Tencent/vConsole 一个轻量.可拓展.针对手机网页的前端开发者调试面板. 特性 查看 conso ...
- 【远程文件浏览器】Unity+Lua开发调试利器
Remote File Explorer是一个跨平台的远程文件浏览器,用户通过Unity Editor就能操作运行在手机上的游戏或是应用的的目录文件.比如当项目打包运行到设备上时,可通过Remote ...
- 配置移动前端开发调试环境(nodejs+npm+weiner的安装和配置使用)
这段时间发现做移动端的开发调试是一大难题,网上逛了逛发现有一些工具可用,如chrome的远程调试,实际测试过程中我始终调试不成功,听说被墙后是不行的,所以最终找了如下的方法. 因为基于nodeJS环境 ...
- 前端h5开发调试神奇vconsole
(1)项目中安装vconcole插件 npm install vconcole (2)在vue项目中main.js中引入插件 import Vconsole from 'vconsole'; cons ...
- 移动端调试利器-vConsole
现在移动端开发越来越火,随之而来的问题也越来越多,今天给大家介绍一款移动端调试神器,vconsole. 一.先引用文件,可以从https://www.bootcdn.cn/vConsole/下载,也可 ...
随机推荐
- 【shell】定时删除DB2表数据
使用db2的时候,有时候需要对表数据进行删除,防止数据太多,造成数据库空间满了 以下是一个定时删除表tmp,tm1中id为1的数据的脚本 #!/bin/sh ##------------------- ...
- dom4j 输出UTF-8 XML时中文乱码
使用DOM4J的XMLWriter输出UTF-8编码的XML文件时,出现乱码 public static void writToXml(Document document) throws IOExce ...
- 小米路由Mini刷Breed, 潘多拉和LEDE
1. 下载breed,地址 http://breed.hackpascal.net/ 2. 下载小米Mini的开发板rom, 地址 http://www1.miwifi.com/miwifi_down ...
- 在centos 5.5 i386 上安装 oracle 10g xe
1.安装rpm包 nano /v.sh 将下面内容复制进去 #!/bin/bash rpm -Uvh compat-db-4.2.52-5.1.i386.rpm rpm -Uvh compat-lib ...
- tensorflow中的sequence_loss_by_example
在编写RNN程序时,一个很常见的函数就是sequence_loss_by_example loss = tf.contrib.legacy_seq2seq.sequence_loss_by_examp ...
- java mongodb 基础系列---查询,排序,limit,$in,$or,输出为list,创建索引,$ne 非操作
官方api教程:http://docs.mongodb.org/ecosystem/tutorial/getting-started-with-java-driver/#getting-started ...
- Java正则应用
private List<String> find(String reg, String str) { Matcher matcher = Pattern.compile(reg).mat ...
- C语言学习笔记 (006) - 二维数组传参的三种表现形式
# include <stdio.h> # include <stdlib.h> # define M # define N int getdate(int (*sp)[M]) ...
- Git 分支(分布式版本控制系统)
前言 几乎所有的版本控制系统都以某种形式支持分支.使用分支意味着你可以把你的工作从开发主线上分离开来,以免影响开发主线.在很多版本控制系统中,这是一个略微低效的过程--常常需要完全创建一个源代码目录的 ...
- sql中union 和 union all的区别
最近发现一个视图出奇的慢,在生产环境还好,由于服务器配置较高,没有察觉出来.但是做了一次修改后在开发版 和测试版就直接查询不出结果了.就连select count(1) from 都运行2个小时没有结 ...