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。