使用debug.js调试手机网页
创作背景
手机网页兼容性与ie相比,有过之无不及,调试的时候,我们会使用console.log,但是手机上看不到打印出来的信息。所以只好各种alert,但alert总显得不那么优雅。
初学js的时候就alert,现在还在各种alert。而且alert后还要点击确定,如果循环alert,那就悲剧了,一直点确定吧,可能手机还因此搞死机了。
那么有没有一种显得更加优雅的方式去输出调试信息呢?
有的。使用debug.js就好了。
貌似看到过一次,有人在iPhone上打开了控制台,如果有人知道,请告诉我。
debug.js会把调试信息显示在网页上,很方便的就能看到。原理也十分简单,动态创建dom元素,然后append到页面中。
先睹为快
你可以点这里看到使用debug.js的网页,想说它真的非常好看,你也可以用手机扫描二维码访问。
如何使用debug.js
引入debug.js后,你会得到debug这个方法,它是挂载在window下面的。
debug.js的api十分简洁简单,如果你没啥追求,就直接使用这么使用:
debug.log('一个优雅的调试信息');
你就会在网页顶部看到一个优雅的调试信息。
如果你不满足于此,你追求色彩,追求调试类型,那么debug.js还提供了其他几个实用的方法:
- debug.success()
- debug.warn()
- debug.error()
- debug.danger()
意思就不用解释了,有了这些,输出的调试信息也缤纷了起来,似乎人生也变得colorful。
额,突然觉得说完了,就这么简单,讲述起来简单,理解和使用起来亦是如此。
深入了解debug.js
你可以在Github上关注或者Forkdebug.js。
如果你关心如何实现,可以点这里看到debug.js的源码实现。
色彩
我喜欢各种各样的色彩,我喜欢彩色的物品,住的地方有各种彩色的元素,比如沙发,比如床单,比如T恤上的涂鸦。我不太会统一所有的东西,比如我的储物柜是绿色的,那么我的垃圾桶可能就是黄色,我的热水壶可能就是红色。也因此设计了丰富多彩的debug.js。也许这算是某种怪癖吧,你呢?喜欢彩色么?
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码