❗ 本文最后更新于 4110 天前,文中所描述的信息可能已发生改变,请谨慎使用。
作为一名前端开发工程师,对浏览器控制台肯定都不陌生。加上最近大家纷纷在控制台玩出花来(1、2),同学们对Console的热情又上升了不少。这里记录一下我知道的几个小技巧,欢迎大家补充。
本文所有内容我都在Chrome28自带Console和Firefox的Firebug1.12试过。Firefox也自带了一个Console,不过有点弱,用Firefox的同学还是建议装个Firebug。
格式化log
console.log除了能接受多个参数,还支持指定输出内容的格式,还可以这样混着用:
console.log("I am %s and I have:", myName, thing1, thing2, thing3);
下面是console.log支持的几种格式:
格式 | 说明 |
---|---|
%s | 字符串 |
%d, %i | 整数(不支持指定位数) |
%f | 浮点数(不支持指定位数) |
%o | 对象 |
%c | CSS样式 |
其中比较有趣的是%c,可以这么玩(我很佩服想到在Console做招聘广告甚至还附带网站logo的同学):
console.log('%c ', 'font-size:124px;background-image:url(https://st.imququ.com/static/uploads/2011/07/ququ_1_1_1.jpg)');
指定log的级别
与很多其它编程语言类似,控制台的log也支持各种级别,console.debug(),console.info(),console.warn(),console.error(),不同级别的log会标上不同的icon。
合理使用不同的log级别,一方面可以方便地筛选自己关注的log,另一方面有些级别的log还会在控制台打印调用堆栈和源码位置。
使用断言
有时候,我们需要在特定情况下打印log,这时候console.assert方法就很有用:
console.assert(expression[, object, ...])
如果expression返回的不是true,控制台会打印异常信息及源码位置。
log分组
有时候需要打印在控制台的log太多,我们可以对其分组,这样可以按组来折叠log信息。具体效果是怎样的,大家试下就知道了:
console.group("分组1");console.log(1);console.group("分组1.1");console.log(1.1);console.groupEnd();console.groupEnd();console.group('分组2');console.log(2);console.groupEnd();
输出表格
console.table方法可以在控制台打印表格,这在输出复杂信息时很有用。这个方法在Chrome和Firebug下有点点不一样,大家可以自己试试:
console.table({'first' : {'name' : 'ququ', 'age' : 27}, 'second' : {'name' : 'kitty', 'age' : 100}});
console.table的高级用法,可以参考此文。
计时器
很多时候,我们用两个new Date相减获取时间差,其实也可以这样用:
> console.time('time1')
> console.timeEnd('time1');
time1: 27085.415ms
改变当前所在window
在Chrome开发工具的Console标签下,有个写着 <top frame>
的下拉框,通过它我们就可以选择所处的window环境。
Firebug中要稍微麻烦一点,需要用到cd方法,它唯一的参数就是要改变到的window,类似这样:
> cd(window.frames[0])
当前 window: Window about:blank
> cd(top)
当前 window: Window www.imququ.com
快速引用
控制台内置了一些变量,可以让我们快速引用某些内容。这里介绍两个我最常用到的:
$_,引用控制台最近一次运算结果,如:
> 1+1
2
> $_+1
3
$0,引用当前选中的元素。在控制台,我们可以方便的选中或“吸中”某个元素,然后通过$0就可以使用它,大家动手试下就明白了。更爽的是,Chrome开发工具“Elements”等标签下,可以通过esc键呼出Console,谁用谁知道。
随便提一句,clear()和console.clear()都可以清空Console已有的信息。
本文链接:https://imququ.com/post/about-browser-devtools-console.html,参与评论 »
--EOF--
发表于 2013-08-11 23:45:50,并被添加「Console、开发工具」标签。查看本文 Markdown 版本 »
专题「开发工具」的其他文章 »
- 开始使用 Vagrant (Aug 23, 2015)
- 搭建 ngrok 服务实现内网穿透 (Apr 19, 2015)
- Chrome 32 开发者工具的几个变化 (Jan 19, 2014)
- Genymotion:超赞的安卓虚拟机 (Nov 28, 2013)
- 打造 Mac 下的完美开发环境 (Oct 09, 2013)
- 如何在 Mac 下使用 Fiddler (Sep 13, 2013)
- 看懂 Fiddler 的瀑布图 (Sep 04, 2013)
- firebug1.12 更新 (Aug 29, 2013)
- firebug1.10更新 (Jul 16, 2012)
- [小Tip]ABP扩展对前端开发的影响 (Mar 29, 2012)
Comments
Waline 评论加载中...