一个针对手机网页的前端 console 调试面板。

简介

vConsole 是一个网页前端调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作。

手机预览

http://wechatfe.github.io/vconsole/demo.html

使用方法

1.下载模块

checkout 文件 dist/vconsole.min.js 到本地。

2.引入模块

(1) 如果未使用 AMD/CMD 规范，可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展，建议在 <head> 中引入：

<head>

    <script src="path/to/vconsole.min.js"></script>

</head>

(2) 如果使用了 AMD/CMD 规范，可在 module 内使用 require() 引入模块：

var vConsole = require('path/to/vconsole.min.js');

3.打印 log 日志

(1) 与 PC 端打印 log 一致，可直接使用 console.log() 等方法直接打印日志：

console.log('Hello World');

未加载 vConsole 模块时，console.log() 会直接打印到原生控制台中；加载 vConsole 后，日志会打印到页面前端+原生控制台。

(2) 支持 4 种不同类型的日志，会以不同的颜色输出到前端面板：

console.log('foo'); // 白底黑字

console.info('bar'); // 白底紫字

console.debug('oh'); // 白底黄字

console.warn('foo'); // 黄底黄字

console.error('bar'); // 红底红字

(3) 支持打印 Object 对象，会以 JSON 字符串格式输出：

var obj = {};

obj.foo = 'bar';

console.log(obj); // 打印出 {foo: 'bar'}

(4) 支持传入多个参数，会以空格隔开：

var uid = 233;

console.log('UserID:', uid); // 打印出 UserID: 233

(5) 引入模块后，vConsole 会有一段很小的延迟来用于初始化工作。此时若需打印日志，请使用 vConsole.ready() 方法：

// 若未通过 AMD/CMD 方式加载模块，

// vConsole 会自动挂载在全局 window 对象中，即 window.vConsole

vConsole.ready(function() {

    console.log('Hello World');

});

注意事项

引入 vConsole 模块后，页面前端将会在右下角出现 vConsole 的悬停按钮，可展开/收起面板。

若不希望普通用户看到面板，请不要在生产环境中引入 vConsole 模块。动态引入模块的方法可参考 example/demo2.php 示例。

参考：https://github.com/WechatFE/vConsole

vConsole--针对手机网页的前端 console 调试面板。的更多相关文章

  1. 前端读者 | 前端开发者调试面板vConsole

    来着微信团队开源的一个调试工具,[GitHub地址]https://github.com/Tencent/vConsole 一个轻量.可拓展.针对手机网页的前端开发者调试面板. 特性 查看 conso ...

  2. 手机前端开发调试利器 – vConsole

    我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log: (2) 上线后,某用户表示页面失灵,但我们自己 ...

  3. Eruda——手机网页前端调试面板

    前言 进行移动端网页开发时,想要查看手机浏览器信息从来都不是一件容易的事.特别是当目标环境为APP内置WebView,需要调用特定的JsBridge接口时,你根本都干不了什么,只能一遍又一遍地修改代码 ...

  4. 移动端调试神器vconsole,手机端网页的调试工具Eruda

    移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...

  5. 手机网页调试利器： Chrome

    新开发的网页需要在手机或是模拟机上运行测试, 可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页 ...

  6. 推荐几个不错的console调试技巧

    在我们的日常前端开发中,使用最频繁的莫过于使用console.log在浏览器的控制台中打印出我们需要调试的信息,但是大部分人可能跟之前的我一样,没有意识到其实console除了log方法以外,还有很多 ...

  7. 用MVC做支付宝手机网页支付问题

    支付宝支付接口手机网页支付 从官网扒下来的demo阿里做得还是相当不错的,只要参数改正确了基本上都是能跑通,WebForm的没什么大问题,这次要讲的主要是几个要注意的问题,因为是用MVC来做. 1.要 ...

  8. 转载：手机网页制作的认识（有关meta标签）

    下面是手机网页的一些认识: 一.<meta name="viewport" id="viewport" content="width=devic ...

  9. Safari 前端开发调试 iOS 完美解决方案

    转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05      0个评论    来源:Safari ...

随机推荐

  1. Spring 学习——基于Spring WebSocket 和STOMP实现简单的聊天功能

    本篇主要讲解如何使用Spring websocket 和STOMP搭建一个简单的聊天功能项目,里面使用到的技术,如websocket和STOMP等会简单介绍,不会太深,如果对相关介绍不是很了解的,请自 ...

  2. Spring学习—生成图片验证码

    今天想学下一下验证码的生成,就之前搭建好的一个spring框架上写了一个demo,我会贴出细节代码,但是spring的配置就不在介绍了.需要完整代码可以联系我! 会从前台页面到后台实现完整的讲解: 1 ...

  3. 网页meta标签总结

    文章摘抄自网络. 参考文章:http://www.cnblogs.com/lpt1229/p/5628631.html http://blog.csdn.net/aiolos1111/article/ ...

  4. 一款优秀的JavaScript框架—AngularJS

    AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...

  5. hud 2577 How to Type

    How to Type Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  6. 一文为你详细讲解对象映射库【AutoMapper】所支持场景

    前言 在AutoMapper未出世前,对象与对象之间的映射,我们只能通过手动为每个属性一一赋值,时间长了不仅是我们而且老外也觉得映射代码很无聊啊.这个时候老外的所写的强大映射库AutoMapper横空 ...

  7. 数据处理：12个使得效率倍增的pandas技巧

    数据处理:12个使得效率倍增的pandas技巧 1. 背景描述 Python正迅速成为数据科学家偏爱的语言,这合情合理.它拥有作为一种编程语言广阔的生态环境以及众多优秀的科学计算库.如果你刚开始学习P ...

  8. winwebmail设置能用foxmail收发邮件

    域名解析注意 1.首先做A记录解析: 主机名处:输入 mail IP地址处:输入IP地址 2.做MX记录: 主机名处: 大都保持空输入,什么也不用输入   TTL:默认就可以了,不需要改动 优先级:一 ...

  9. 第二章 MySQL入门篇

    第一章 MySQL入门篇 一.MySql简介 简言: 和SQL Server数据库相同,MySQl也是一个关系型数据库管理系统.由瑞典的MySQL AB公司开发,2008年被SUN公司收购,2009年 ...

  10. php 变量 循环关键词以及方法

    <?php/* 多行注释 */常用数据类型int string double/float bool变量的定义$a = 123;$b = "123";$c = '456';$d ...