一个针对手机网页的前端 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. eclipse中搜狗输入法中文状态下输出的全是英文

    在eclipse中搜狗输入法变成了如图这样 在中文状态下,提示的全是中文. 查询到的解决方案: 快捷键ctrl+shift+E关闭搜狗智能英文.然而与eclipse中 Ctrl+shift+E 快捷键 ...

  2. GitHub使用(四) - 关于分支Branch

    1. 什么是分支Branch? 我初步的理解为:GitHub仓库默认有一个master的分支,当我们在master分支开发过程中接到一个新的功能需求,我们就可以新建一个分支同步开发而互不影响,开发完成 ...

  3. windows7下MongoDB(V3.4)的使用及仓储设计

    简单的介绍一下,我使用MongoDB的场景. 我们现在的物联网环境下,有部分数据,采样频率为2000条记录/分钟,这样下来一天24*60*2000=2880000约等于300万条数据,以后必然还会增加 ...

  4. apollo实现c#与android消息推送(二)

    安装完成apache apollo后,org.eclipse.paho是很方便的测试软件,下来介绍paho的安装和使用 2. 搭建paho: a 下载 org.eclipse.paho.ui.app- ...

  5. http://codeforces.com/problemset/problem/847/E

    E. Packmen time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  6. 笨鸟先飞之ASP.NET MVC系列之过滤器(02授权过滤器)

    授权过滤器 概念介绍 在之前的文章中我们已经带大家简单的了解了下过滤器,本次我们开始介绍授权过滤器. 我们之前提到过授权过滤器在认证过滤器之后,其他过滤器和方法被调用之前运行,而授权过滤器和它名字的含 ...

  7. 550 Create directory operation failed

    往Linux系统中上传文件时候,我们经常会使用FTP连接Linux,也经常会使用mkdir命令来创建目录.最近发现用mkdir创建目录时提示550 Create directory operation ...

  8. asp.net mvc 自动化测试工具

    好久不写文章了,一直忙在项目中. 前一阵发现公司一个项目,体积巨大.业务很复杂.基于历史原因,项目基于mvc 2迁移过来,视图大多还是aspx  作为视图承载. 控制器中的方法  更是一个比一个多. ...

  9. Python自学笔记-面向对象相关(Mr seven)

    ---恢复内容开始--- http://www.cnblogs.com/wupeiqi/articles/5433893.html 类的成员可以分为三大类:字段.方法和属性. 一.字段 字段包括:普通 ...

  10. sql server 2000的安装

    一.安装sql 二.启动sql 三.查看sql版本 RTM版本,需要打补丁 四.安装SP4