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

Question

无论如何可以在 JavaScript 控制台中控制 Chrome Web Inspector 吗？

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

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

webInspector.inspectElement("#test_element");

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

Answer 1

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

Answer 2

来自命令行 Api 参考

inspect(object)

在适当的面板中打开并选择指定的元素或对象：DOM 元素的 Elements 面板和 JavaScript 堆对象的 Profiles 面板。

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

inspect(document.body.firstChild);