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 ...
随机推荐
- 反射结合xml简单的模拟spring创建bean
框架最底层其实就是通过反射实现的,就像spring,当你配置各种各样的bean时都是以配置文件的形式配置的,你需要用到哪些bean就配哪些,spring容器就会根据你的需求去动态加载,这儿写一个简单的 ...
- Ubuntu 安装 SQL Server
SQL Server现在可以在Linux上运行了!正如微软CEO Satya Nadella说的,"Microsoft Loves Linux",既Windows 10内置的Lin ...
- TETeLasr Cutting System 开机回零问题
TETeLasr Cutting System 开机回零问题 :打开 "轴信息" :打开 加工参数-->机器参数-->脉冲当量: X轴==4000 Y轴== ...
- Hadoop安全（2）——————UserGroupInformation
UserGroupInformation保存hadoop用户及组信息 此类包装JAAS Subject,并提供确定用户的用户名和组的方法.它支持Windows,Unix和Kerberos登录模块.
- Django进阶篇【1】
注:本篇是Django进阶篇章,适合人群:有Django基础,关于Django基础篇,将在下一章节中补充! 首先我们一起了解下Django整个请求生命周期: Django 请求流程,生命周期: 路由部 ...
- ASP.NET Core 2.0 支付宝当面付之扫码支付
前言 自从微软更换了CEO以后,微软的战略方向有了相当大的变化,不再是那么封闭,开源了许多东西,拥抱开源社区,.NET实现跨平台,收购xamarin并免费提供给开发者等等.我本人是很喜欢.net的,并 ...
- DOM2练习
左右互相输入 <!DOCTYPE html><html> <head> <meta charset="UTF-8"&g ...
- 容器平台选型的十大模式：Docker、DC/OS、K8S 谁与当先？
作者:刘超 来自:网易云 基础服务 无论是在社区,还是在同客户交流的过程中,总会被问到到底什么时候该用 Docker?什么时候用虚拟机?如果使用容器,应该使用哪个容器平台? 显而易见,我不会直接给 ...
- bind、apply与call
bind.apply与call 先说观点:不论是bind.apply还是call,最大的好处就是代码复用. bind 在开发中,我们只有复用代码时,才会出现this指向需要改动的情况. 纵观bind的 ...
- win10 uwp 进度条 WaveProgressControl
昨天看到了有个大神做出好看的进度条样式,于是我就去抄袭他的代码,但是发现看不懂,于是本文主要翻译就是大神说这个控件如何做. 本文翻译 https://stackoverflow.com/a/46057 ...