vConsole--针对手机网页的前端 console 调试面板。
一个针对手机网页的前端 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 调试面板。的更多相关文章
- 前端读者 | 前端开发者调试面板vConsole
来着微信团队开源的一个调试工具,[GitHub地址]https://github.com/Tencent/vConsole 一个轻量.可拓展.针对手机网页的前端开发者调试面板. 特性 查看 conso ...
- 手机前端开发调试利器 – vConsole
我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log: (2) 上线后,某用户表示页面失灵,但我们自己 ...
- Eruda——手机网页前端调试面板
前言 进行移动端网页开发时,想要查看手机浏览器信息从来都不是一件容易的事.特别是当目标环境为APP内置WebView,需要调用特定的JsBridge接口时,你根本都干不了什么,只能一遍又一遍地修改代码 ...
- 移动端调试神器vconsole,手机端网页的调试工具Eruda
移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...
- 手机网页调试利器： Chrome
新开发的网页需要在手机或是模拟机上运行测试, 可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页 ...
- 推荐几个不错的console调试技巧
在我们的日常前端开发中,使用最频繁的莫过于使用console.log在浏览器的控制台中打印出我们需要调试的信息,但是大部分人可能跟之前的我一样,没有意识到其实console除了log方法以外,还有很多 ...
- 用MVC做支付宝手机网页支付问题
支付宝支付接口手机网页支付 从官网扒下来的demo阿里做得还是相当不错的,只要参数改正确了基本上都是能跑通,WebForm的没什么大问题,这次要讲的主要是几个要注意的问题,因为是用MVC来做. 1.要 ...
- 转载：手机网页制作的认识（有关meta标签）
下面是手机网页的一些认识: 一.<meta name="viewport" id="viewport" content="width=devic ...
- Safari 前端开发调试 iOS 完美解决方案
转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05 0个评论 来源:Safari ...
随机推荐
- Pycharm中如何加载多个项目？
今天在使用Pycharm工具练习Python时遇到一个疑问:在已存有项目A工程的前提下如何新建另一个项目B,且两者并存? 基本操作步骤: 在File下拉项中选择"New Project&qu ...
- Beautiful Dream hdu3418 （直接做或二分）
Beautiful Dream Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- PE文件格式详解,第三讲,可选头文件格式,以及节表
PE文件格式详解,第三讲,可选头文件格式,以及节表 作者:IBinary出处:http://www.cnblogs.com/iBinary/版权所有,欢迎保留原文链接进行转载:) 一丶可选头结构以及作 ...
- eNSP关闭保存文件的提示信息
总是提示如下信息: Oct 12 2017 23:49:24-08:00 Huawei DS/4/DATASYNC_CFGCHANGE:OID 1.3.6.1.4.1.2011.5.25.191.3. ...
- python 输出语句的写法
总结: 1.类似于C语言的格式化输出,先写转换符,再写待转换的对象. 2.与C语言不同的是,转换符和待转换的对象之间,不能用逗号分隔. #!/usr/bin/env python #print dig ...
- 使用Jquery.cookie.js操作cookie
query.cookie.js是一个基于jquery的插件,点击下载! 创建一个会话cookie: $.cookie(‘cookieName’,'cookieValue’); 注:当没有指明cooki ...
- 用Python来实现列举某个文件夹内所有的文件列表
用Python来实现列举某个文件夹内所有的文件列表.吾八哥我动手写代码之前分析了下,遍历一个文件夹,肯定是需要用到os模块了,查阅模块帮助信息,可知os.listdir()方法可以列举某个文件夹内的所 ...
- socket__服务端、客户端（注释版）
# !/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2017/8/22 16:14 # @Author : Mr_zhang # @Sit ...
- UVa10723 - Cyborg Genes
这题我能想到的解决方法是: 最优解的长度好找,两串的长度和-LCS: 根据anslen,枚举出解的数目...但想不出简单有效的枚举方法,这种做法可能超时 网上看大神的博客后,发现大家都用的此方法: 最 ...
- 阿里官方Java代码规范标准《阿里巴巴Java开发手册 终极版 v1.3.0》
终极版 v1.3.0 2017年开春之际,阿里诚意献上重磅大礼:<阿里巴巴Java开发手册>,首次公开阿里官方Java代码规范标准.这套Java统一规范标准将有助于提高行业编码规范化水平, ...