在 Javascript 控制台中控制 Chrome Web Inspector？

Posted 2023-03-07

【中文标题】在 Javascript 控制台中控制 Chrome Web Inspector？

【英文标题】：Control Chrome Web Inspector in Javascript console?

【发布时间】：2013-04-16 21:11:17

【问题描述】：

是否可以在 javascript 控制台中控制 Chrome Web Inspector？

例如，假设我想在“元素”面板中选择一个元素 (#test_element)。通常我右键单击元素并选择“检查元素”。

我想在 JavaScript 控制台中执行此操作，使用类似：

webInspector.inspectElement("#test_element");

我希望能够以这种方式访问​​网络检查器的整个 UI。我也愿意为此使用扩展。

【参考方案1】：

来自Command Line Api Reference

inspect(object)

在适当的地方打开并选择指定的元素或对象 面板：DOM 元素的元素面板和配置文件 JavaScript 堆对象的面板。

以下示例打开 document.body 的第一个子元素 在元素面板中：

inspect(document.body.firstChild);

【参考方案2】：

为此目的使用inspect。由于您想使用选择器，请将其与控制台的$ ^{document.querySelector 的别名} 结合使用。如果页面覆盖 $，因为它使用 jQuery，请使用 $$(selector)[0] 获取对 DOM 元素的引用（任何方法都可以，只要它是对 DOM 节点的引用）。

【讨论】：

您也可以只运行选择器并将元素返回到控制台。 WebKit 检查器确实像这样显示它们