控制台工具实用工具函数和选择器 - Microsoft Edge Developer documentation

相关文章推荐

销魂的海龟 · 技术问询：能否通过控制台使用Android ...· 4 月前 ·

犯傻的沙滩裤 · 深圳市正德高级中学-大鹏新区政府在线· 11 月前 ·

孤独的咖啡 · doctest --- 测试交互式的 ...· 1 年前 ·

健壮的吐司 · 合肥学区房大盘点，哪些小区最为保值？_腾讯新闻· 1 年前 ·

傲视众生的警车 · 金雁：宗教在波兰转型中的作用_宪政转型专题_ ...· 1 年前 ·

正直的键盘 · 江苏省人力资源和社会保障厅院校风采 ...· 2 年前 ·

$0

返回最近选定的元素或 JavaScript 对象，

$1

返回最近选择的第二个元素或 JavaScript 对象，依此而论。

$0

、

$1

、、

$2

$3

和

$4

变量充当对 元素工具中 检查的最后五个 DOM 元素或内存工具中选择的最后五个 JavaScript 堆对象的历史引用。

若要打开 DevTools，请右键单击网页，然后选择“ 检查 ”。或者，按 Ctrl+Shift+I （Windows、Linux）或 Command+Option+I (macOS)。 DevTools 随即打开。

在 “元素” 工具中，选择元素，例如元素 <input> 。

在 DevTools 底部的 “快速视图 ”面板中打开 控制台 工具。

键入 $0 控制台 工具，然后按 Enter 。

变量 $0 返回所选 <input> 元素：


    $(selector)

返回对与指定的 CSS 选择器


    selector

匹配的第一个 DOM 元素的引用。

此函数类似于 document.querySelector () 函数。

如果使用的库（如 jQuery）使用 $ ，则功能将被覆盖，并且 $ 对应于该库中的实现。

$(selector, [parentElement])
按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。  
              控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，键入 $('input')。 将显示与 CSS 选择器匹配 input 的第一个元素：
函数 $() 接受第二个参数 ，该参数 parentElement指定要在其中搜索的父元素。 参数的默认值为 document，这意味着默认情况下会搜索整个网页。 通过指定父元素，可以在网页的特定部分搜索元素。
按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。  
              控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台 工具中，键入 $('input', $('ul'))
在第一个元素中找到的第 input 一个与 CSS 选择器匹配的第一个 ul 元素将被重试：
              $$() 返回与指定的 CSS 选择器匹配的元素列表，例如 document.querySelectorAll()。
此函数类似于 document.querySelectorAll ()  但返回 array 元素的 NodeList，而不是 。
$$(selector, [parentElement])
按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。  
              控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，键入 $$('button')。 
              <button>将显示网页中的所有元素：
此 $$() 函数还支持第二个参数 ，该参数 parentElement指定要在其中搜索的父元素。 参数的默认值为 document，这意味着默认情况下会搜索整个网页。 通过指定父元素，可以在网页的特定部分搜索元素。
按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。  
              控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，键入 $$('button', $('li.task'))。 
              <button>将显示第一<li class="task">个元素的后代的所有元素：
copy($$('*').map(element => element.tagName));
代码片段使用 $$(selector) 函数选择网页中的所有元素，然后将每个元素的 属性映射到 tagName 数组。 然后使用 函数将数组复制到剪贴板 copy() 。
将剪贴板的内容粘贴到文本编辑器中。 剪贴板的内容是网页中所有 HTML 标记的列表，例如：
["HTML", "HEAD", "META", "TITLE", "LINK", "BODY", "H1", "FORM", "DIV", "LABEL", ...]
打开新的选项卡或窗口，然后转到包含要调试的 JavaScript 函数的页面。  例如，转到 TODO 应用 演示页。
按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。  
              控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，键入 debug(updateList)。
在呈现的网页中，通过在“添加任务文本”字段中键入 test，然后按 Enter，将新的 TODO 项添加到列表中。
调试器在源工具的 函数内updateList()暂停：
              dirxml(object) 打印指定对象的 XML 表示形式，如 元素 工具中所示，如 console.dirxml()。
此函数等效于 console.dirxml () 。
dirxml(object)
检查 (对象/函数) 
              inspect(element/function) 打开并选择“ 元素” 工具中的指定 DOM 元素，或在 “源” 工具中选择指定的 JavaScript 函数。
对于 DOM 元素，此函数将打开，并在 “元素 ”工具中选择指定的 DOM 元素。
对于 JavaScript 函数，此函数会在 源 工具中打开指定的 JavaScript 函数。
inspect(element/function)
按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。  
              控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，输入 inspect(document.body) ，然后按 Enter。
此时会打开 “元素 ”工具， <body> 并选中元素：
              getEventListeners(object) 返回在指定对象上注册的事件侦听器。
返回值是一个 对象，该对象包含每个已注册事件类型 (（如 click 或 keydown) ）的数组。  每个数组中的项都是描述为每种类型注册的侦听器的对象。
getEventListeners(object)
按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。  
              控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，输入 getEventListeners($('form')) ，然后按 Enter。
将显示在第一个 <form> 元素上注册的事件侦听器：
              monitorEvents(object[, events]) 每次指定对象上发生指定事件时，都会将事件对象记录到控制台。
可以指定要监视的单个事件、事件数组或映射到预定义事件集合的泛型事件类型之一。
monitorEvents(object[, events])
监视单个事件：
按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。  
              控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台 工具中，输入以下代码，然后按 Enter：
monitorEvents(window, "resize");
前面的代码片段监视窗口对象上的所有调整大小事件。
调整窗口大小，例如，通过放大或缩小 DevTools。 调整大小事件显示在 控制台 工具中：
monitorEvents(window, ["resize", "scroll"]);
前面的代码片段定义了一个事件名称数组，用于监视 resize 窗口对象上的 和 scroll eevent。
调整窗口的大小，例如缩短窗口，然后在呈现的网页中滚动。 调整大小和滚动事件会显示在 控制台 工具中：
mouse
“click”、“dblclick”、“mousedown”、“mousemove”、“mouseout”、“mouseover”、“mouseup”、“mousewheel”
“keydown”、“keypress”、“keyup”、“textInput”
touch
“touchcancel”、“touchend”、“touchmove”、“touchstart”
control
“blur”、“change”、“focus”、“reset”、“resize”、“scroll”、“select”、“submit”、“zoom”
              profile([name]) 使用可选名称启动 JavaScript CPU 分析会话。
若要完成配置文件并在 性能 工具中显示结果，请调用 profileEnd ([name]) 。  
profile([name])
在新选项卡或窗口中打开要分析的页面。  例如，转到 低迷动画 演示页。
按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。  
              控制台工具在 DevTools 中打开，位于网页旁边。
若要开始分析，请在 控制台 工具中键入 profile("My profile)，然后按 Enter。
若要停止分析，请在经过一段时间后键入 profileEnd("My profile")，然后按 Enter。
配置文件结果显示在 性能 工具中：
如果你的网页使用 Promise 对象，Promise则使用 queryObjects(Promise) 返回对象的所有实例。
如果你的网页使用 JavaScript 类，ClassName则 使用 queryObjects(ClassName) 返回 类的所有实例。
table (data[， columns]) 
              table(data[, columns]) 记录指定数据对象的对象数据，格式为具有列标题的表。
此函数是 console.table () 的别名。
table(data[, columns])
若要将人员姓名列表显示为表，请在 控制台中：
按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。  
              控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台中输入以下代码，然后按 Enter：
var names = {
    firstName: "John",
    lastName: "Smith"
  1:  {
    firstName: "Jane",
    lastName: "Doe"
上述代码片段在名为 names的全局命名空间中定义了一个对象，该命名空间包含两个属性。
若要将names对象显示为表，请在控制台中输入 table(names) ，然后按 Enter：
              unmonitorEvents(object[, events]) 停止监视指定对象和事件的事件。
有关详细信息，请参阅上面的 monitorEvents (object[， events]) 。
unmonitorEvents(object[, events])
值 (对象) 
              values(object) 返回一个数组，其中包含属于指定对象的所有属性的值。
若要获取相同属性的关联键，请参阅上面的 键 (对象) 。
values(object)
请参阅上面的 键 (对象) 中的示例。
              控制台功能参考

              控制台对象 API 参考 - console.* 函数，例如 console.log() 和 console.error()。

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。
原始页面 在此处 找到，由凯斯·巴斯克创作。