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

Question

有没有办法在JavaScript控制台中控制Chrome Web Inspector？

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

我想做到这一点在JavaScript控制台中，使用类似：

webInspector.inspectElement("#test_element"); 

我希望能够访问Web检查的这样整个UI。我也愿意为此使用扩展。

Answer 1

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

Answer 2

从Command Line Api Reference

inspect(object)

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

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

inspect(document.body.firstChild);