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

Question

Is there anyway to control the Chrome Web Inspector in the JavaScript console?

For example, say I wanted to select an element (#test_element) in the "Elements" panel. Normally I right click on the element and choose "Inspect Element".

I'd like to do this in the JavaScript console, using something like:

webInspector.inspectElement("#test_element");

I'd like to be able to access the entire UI of the web inspector this way. I'm open to using extensions for this as well.

Answer 1

Use inspect for this purpose. Since you want to use a selector, combine it with the console's $ ^{alias for document.querySelector} . If the page overrides $ , because it uses jQuery, use $$(selector)[0] to get a reference to the DOM element (anything would do, as long as it's a reference to a DOM node).

Answer 2

From the Command Line Api Reference

inspect(object)

Opens and selects the specified element or object in the appropriate panel: either the Elements panel for DOM elements and the Profiles panel for JavaScript heap objects.

The following example opens the first child element of document.body in the Elements panel:

 inspect(document.body.firstChild);