除此之外，控制台和当前文档进行交互还有很多快捷方式可供你使用 “。其中一些是：
- $_存储最后一条控制台命令的结果。所以如果你之前输入了2 2并按回车键，你在输入$_将为你直接提供4。
- $0 到 $4 是你通过Elements 选项卡选中元素的堆栈，$0 为当前你选择的元素。
- $() 通过选择器选择页面中的元素
- $$()返回与给定选择器匹配的元素数组。此命令等同于document.querySelectorAll()。。
- $x() 允许您通过XPATH选择DOM元素。
- copy() 将您提供的所有内容复制到剪贴板。
- clear() 清除控制台。
- getEventListeners(node) 返回在指定对象上注册的事件监听器。
- monitorEvents(node, events) 监视并记录对象上发生的事件。
- monitor(method) 每当调用方法时，都会创建一个日志。
其中有些方法的功能很强大，但可能我们在并不清楚的前提下自己实现了一系列 console.log() 语句。
例如如下使用场景：
monitorEvents(window, ['resize', 'scroll']);
monitorEvents($0, 'key');
每次窗口滚动或调整大小时都会记录一条日志。第二个示例比较有意思，因为它记录了当前选定元素上的任何按键行为。
以下代码列出页面中的所有a标签（因为$$('a')是document.querySelectorAll('a')的简称），并以可排序的表格形式显示。作为table方法的第二个参数的数组定义了表格的列。否则，链接的每个属性都会变成一列，那就很难浏览了。这个表不仅是可排序的，而且你还可以复制和粘贴它--例如，复制到Excel中。
console.table($$('a'),['href','text'])
与其使用复杂的JavaScript来过滤这些结果，你不如试试CSS选择器。再比如，你想获得一个文档中所有非内嵌图片的src和alt信息的表格，你可以使用以下方法：
console.table($$('img:not([src^=data])'), ['src','alt'])
另外，当您使用Markdown生成HTML时，大多数页面生成器都会在标题上创建自动ID，例如 # New Stuff标题会变成<h1 id="new-stuff">New stuff</h1>。如果我需要批量创建许多指向这些锚点的URL，但不想手动去做这些事时，可能需要通过控制台编写脚本来为我做这件事：
let out = '';
$$('#main [id]').filter(
elm => {return elm.nodeName.startsWith('H')}
).forEach(elm => {
out = `${elm.innerText}
${document.location.href}#${elm.id}
`
});
copy(out);
结果是一个文本块，每个标题的文本内容后跟指向该标题的完整URL。
这里展示了$$快捷方式的一个有趣的额外功能。document.querySelectorAll('#main [id]').filter() 会导致一个错误，因为返回的值不是一个数组而是一个NodeList。你需要用[...document.querySelectoAll('#main [id]').filter()]或Array.from(document.querySelectoAll('#main [id]').filter())方法把它强制转换成一个Array，这在相当长的一段时间中困扰着从jQuery转到JavaScript的开发者，而使用$$，可以直接使用所有的Array方法。
一般来说，你可以通过控制台来改变浏览器页面中的所有元素。而且你还有一个额外的好处，就是可以使用DevTools的元素选项卡来获得元素所有的页面路径。点击每个元素旁的...菜单，并通过弹出的上下文菜单中选择你要复制的路径。
虽然控制台本身很好用，但很快你就会发现Console在编写代码存在着诸多困难，例如，Console是单行环境，不小心点击Enter后就会立即执行。不过在这最后为大家介绍一个小技巧，你可以使用Shift Enter来代替编写多行脚本。
Sources
总的来说，Console是一个很好的测试环境，但对于编辑体验来说却很差。不过还好在Sources面板中也有一个完整的编辑器。在那里，你可以检查当前页面的代码，并编写更复杂的脚本与之交互。
除了点按上面tab菜单之外，DevTools还有一套快捷键Command Menu供你使用，你可以通过按control shift P(Windows, Linux)或Command Shift P(macOS)来访问它。或选择（...或⋮）菜单，选择“Run command”。
Snippets 代码片段
Snippets是保存你曾写过的能明显提高开发效率的代码小片段。在DevTools中点击Command Menu键盘快捷键，输入snip并按下Enter键，选择创建一个新的snippet，这样就会进入Snippets编辑器，具体如下图所示：
右边的窗体包括一个完整的源码编辑器，具有关键词着色、自动补全、多光标等功能。下面我们开始试试上面的示例：
console.clear();
let out = '';
let problems = [];
$$('a').forEach(a => {
let text = a.innerText.trim();
let prefix = '';
if (!text) {
if (a.querySelector('img')){
text = a.querySelector('img').alt;
prefix = 'Image: ';
}
if (a.getAttribute('aria-label')) {
text = a.getAttribute('aria-label');
prefix = 'Aria Label: ';
}
if (a.getAttribute('aria-labelledby')) {
text = $('#' a.getAttribute('aria-labelledby')).innerText;
prefix = 'Aria Labelled By: ';
}
}
if (text) {
text = prefix text
} else {
a.style.border = '1px solid firebrick';
problems.push(a);
}
out = `
${text||'No Link text'}
${a.href}`;
});
if (out === '') {
console.warn('Sorry, no links found');
} else {
copy(out);
console.info('done harvesting links, ready to paste');
if (problems.length > 0) {
console.warn('There were %d issues:', problems.length);
console.groupCollapsed('Links without text');
problems.forEach(a => {console.dirxml(a)});
console.groupEnd('Links without text');
}
}
以下是执行演示：
