Chrome DevTools — Console

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

Overview

打开Console

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

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

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

打开主面板的方法

• Ctrl+Shift+J (Windows / Linux) 或者 Cmd+Opt+J (Mac)
• 如果DevTools已经打开，直接切换到Console面板

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

打开副面板的方法

• 当DevTools处于焦点状态，按Esc键
• 点击“Customize and control DevTools”按钮，然后点击“Show console drawer”

Console记录

清空console面板记录

• 快捷键 Ctrl + L
• 在console面板中右键，选择“Clear console”
• 在console面板输入clear()或者console.clear()，console.clear()也可以写在我们的js代码里面，当运行到这一句代码时，会自动清空console面板
• 点击“清空console”按钮
  

保持console记录显示

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

保存console记录

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

选择console面板的执行上下文

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

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

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

过滤console输出

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

console设置

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

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表示错误信息。当有多个参数时，输出结果以一个空格分隔开：

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

参考两个demo：

console.table()

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

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

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

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

console.count(label)

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

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

Command Line API

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

$_

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

$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