在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);