从 DevTools 控制台使用它的某个评估功能查看页面上任意项目的状态。
DevTools 控制台让您可通过特定方式了解您页面中的项目状态。通过使用支持 JavaScript 的多个功能，再结合运用您的 JavaScript 知识，评估您可以输入的任何表达式。
TL;DR
- 只需键入表达式即可对其进行评估。
- 使用一个快捷键选择元素。
- 使用
inspect()检查 DOM 元素和 JavaScript 堆对象。 - 使用 $0 - 4 访问最近选择的元素和对象。
查看表达式
按下 Enter 键后，此控制台可评估您提供的任何 JavaScript 表达式。输入表达式后，系统将显示属性名称建议；控制台还会提供自动填充和 Tab 自动补全功能。
如果有多个匹配项，↑ 和 ↓ 在它们之间循环切换。 按 → 键可选择当前建议。如果有一个建议，按 Tab 键选中它。
选择元素
使用下列快捷键选择元素：
目标选择的示例：
$('code') // Returns the first code element in the document.
$$('figure') // Returns an array of all figure elements in the document.
$x('html/body/p') // Returns an array of all paragraphs in the document body.
检查 DOM 元素和 JavaScript 堆对象
inspect() 函数选取一个 DOM 元素或 JavaScript 引用作为一个参数。如果您提供一个 DOM 元素，则 DevTools 进入“Elements”面板并显示该元素。如果您提供一个 JavaScript 引用，则它进入“Profile”面板。
当此代码在该页面上的控制台中执行时，它会抓取此图并在“Elements”面板上显示它。这会利用到 $_ 属性以获取最后一个评估的表达式的输出。
$('[data-target="inspecting-dom-elements-example"]')
inspect($_)
访问最近选择的元素和对象
控制台在变量中存储最后使用的五个元素和对象，以方便访问。使用 $0 - 4 从控制台访问这些元素。请记住，计算机从 0 开始计算，这意味着最新的项目是 $0，最早的项目是 $4。