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

Question

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

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

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

webInspector.inspectElement("#test_element");

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

Answer 1

来自Command Line Api Reference

inspect(object)

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

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

inspect(document.body.firstChild);

Answer 2

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