浏览器家园·资讯

展开

Chrome DevTools — Console

编辑:浏览器知识

前端开发人员离不开Chrome开发者工具,它又这么好用,不好好学习掌握一下它的使用,实在有点明珠暗投啊,本篇先来讲述Console有关的使用。

Overview

打开Console

开发者工具里面,我们平常使用的大都是这种面板形式,暂且称之为“主面板”:

clipboard.png

还有一种显示形式,就像一个抽屉(官方文档称之为“drawer”)一样存在于主面板之上,可以上下拖动,靠在主面板的底部,本文称之为“副面板”:

clipboard.png

console面板有这两种显示形式,平时测试一些js代码时可能都会选用主面板,因为主面板空间大,视野清晰,查看代码方便。但是也有用到副面板的时候,比如在Sources面板调试代码时,可能会在console面板用js去改变一些值或者获取某些值等,这个时候如果来回切换Sources和Console面板就有点太不方便了。在Sources主面板下,可以调出console副面板,不用来回切换,显然方便很多。

打开主面板的方法

当console主面板打开的时候,console副面板会自动收起

打开副面板的方法

clipboard.png

Console记录

清空console面板记录

保持console记录显示

在页面刷新的时候,console记录也会被刷新,如果想保持着先前的console记录,可以把“Preserve log”的复选框选上

clipboard.png

保存console记录

如果有保存某一段console记录的必要性,也可以在console面板中右键另存为一份.log文件。

选择console面板的执行上下文

当我们在console里面执行js代码时,默认的执行上下文是top窗口:

clipboard.png

当页面内有嵌入的iframe时,要想调试iframe里面的相关代码,需要把执行上下文切换到此iframe(下拉框选择):

clipboard.png

当执行上下文不是top窗口时,下拉框这个位置会用一个背景色高亮以示区分(如上图)。
当审查元素的范围是某个iframe时,此处的执行上下文会自动切换到该iframe。

过滤console输出

默认情况下,console面板是展示所有类型的输出,但是我们可以对展示的内容做进一步的关键字筛选、类型筛选等。

clipboard.png

console设置

此外还有一些针对console面板的设置,比如某些开发人员习惯在console面板里面查看网络请求,就选中了“Log XMLHttpRequests”选项:

clipboard.png

Console API

Console API有很多,但是有些可能是这一辈子也不会用到的,所以也没必要面面俱到。本文介绍以下常用到的Console API:

console.log(object [, object, …]) 
console.info(object [, object, …]) 
console.warn(object [, object, …]) 
console.error(object [, object, …])

直接在控制台输出信息,console.log表示一般的输出,console.info表示提示性信息,console.warn表示警告信息,console.error表示错误信息。当有多个参数时,输出结果以一个空格分隔开:

clipboard.png

传递给上述API的第一个参数可以包含一个或多个格式符。格式符由一个%加一个字母表示,字母表示这个格式符所对应的值的类型:
clipboard.png

参考两个demo:
clipboard.png

console.table()

当输出一些json数据时,可以使用console.table格式化输出,第一个参数是要输出的对象,第二个可选的参数是筛选出你想要的值的key,结果一目了然:
clipboard.png

console.group(object[, object, …]) / console.groupCollapsed(object[, object, …]) 
console.groupEnd() 
当输出日志较多时,不便于查找,此时用console.group相关API,则可以进行很好的分类:

clipboard.png

日志分组时,默认是展开状态,若想默认是收起状态,则把console.group改成console.groupCollapsed即可。

console.time(label) 
console.timeEnd(label) 
有时候我们想测试某段代码执行了多长时间,曾经我很傻叉地在代码开头写了个new Date(),在代码结尾写了个new Date(),然后相减取得时间差……其实,console.time已经很友好地为我们做了这件事:

clipboard.png

console.count(label)

某些场景下可能想要统计一下某行或某段代码被执行的次数,我们可以在相应的位置加上console.count语句。当代码执行到console.count(label)时,label的值不变,则相应的统计次数就会加1:

clipboard.png

Console API就介绍这么多,若想多了解一些其他的API,可以去查看官网 Console API Reference

Command Line API

在控制台中,除了可以输入一些Console API,还可以输入一些命令行来查看、调试代码等。

$_

$_返回最近一次计算表达式的值:

clipboard.png

$0 - $4

常用来表示最近5次审查元素所选中的节点的引用,$0表示最近一次节点的引用,$1其次,以此类推。

$(selector) / $$(selector)

$(selector)就是document.querySelector(selector)$$(selector)就是document.querySelectorAll(selector)

如果当前页面引用的有第三方库,这个库使用的也是$符号,如jQuery,则此时的$(selector)会被第三方库的相应函数覆盖。

inspect(object/function)

这个也比较常用一点:假如当前页面内容很多,审查元素不方便,但是我知道我要查看的那个元素的class或id,则我们可以先用$(selector)$$(selector)选中这个节点,然后inspect($_)即自动打开Elements面板,定位到此DOM节点。这个函数也可以定位js中的函数,此时会自动打开Sources面板,然后定位到相应的函数。

还有很多与js相关的命令行,但是调试js一般都在Sources面板中调试,调试方法也会在后面的文章中进行详细介绍,所以,命令行就介绍到这里,想多了解一些其他命令行,可以去查看官网 Command Line API Reference


关于Console就介绍这么多,下一篇介绍Elements。

文章TAG:chrome  Chrome  DevTools    Console  

加载全部内容

相关教程
猜你喜欢
大家都在看