一个针对手机网页的前端 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. Es6 Promise 用法详解

     Promise是什么??    打印出来看看  console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...

  2. UIScollview 添加UICollectionView 实现放大缩小

    创建一个空的工程 打开storyboard,添加UIScollview 设置代理 实现代理方法 - (UIView *)viewForZoomingInScrollView:(UIScrollView ...

  3. mysql更新某个字符串字段的部分内容

    如果现在需要Mysql更新字段重部分数据,而不是全部数据,应该采用何种方法呢?下面介绍了两种情况下Mysql更新字段中部分数据的方法,供您参考. Mysql更新字段中部分数据第一种情况: update ...

  4. 【小程序】微信小程序实现各种特效实例

    写在前面 最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成,里面有一些常用的特效,总结一下,希望对大家和我都能有所帮助 实例1:滚动tab选项卡 先看一下 ...

  5. java之装饰器模式

    Decorator Pattern(装饰器模式),定义:Attach additional responsibilities to an object dynamically. Decorators  ...

  6. 记忆搜索与动态规划——DP背包问题

    题目描述 01背包问题 有n个重量和价值分别为\(w_i,v_i\)的物品.从这些物品中挑选出总重量不超过W的物品,求所有挑选方案中价值中总和的最大值. 限制条件 1 <= n <= 10 ...

  7. 线段树专题—ZOJ1610 Count the Colors（涂区间，直接tag标记）

    Painting some colored segments on a line, some previously painted segments may be covered by some th ...

  8. Detect Capital

    Given a word, you need to judge whether the usage of capitals in it is right or not. We define the u ...

  9. java数据库编程之事务、视图、索引、备份、恢复

    第五章:事务.视图.索引.备份和恢复 5.1:事务 事务的概念:事务(transcation)是讲一系列数据操作捆绑成为一个整体进行统计管理. 如果某一事务执行成功了,则该事务进行操作的所有数据将会提 ...

  10. 简单Elixir游戏服务器-安装Elixir

    用WebInstaller 安装半天也没下载成功文件. 改成直接下载erlang 和 elixir 预编译包了. 安装很简单,最后设置好环境变量. cmd 执行 elixir -v 最后顺便下载了个g ...