CODEWITHSUNDEEP
javascriptgoogle-chromeconsolegoogle-chrome-devtoolsweb-inspector
Brad Parks
Brad Parks

Reputation: 71961

Control Chrome Web Inspector in Javascript console?

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.

Upvotes: 1

Views: 941

Answers (2)

Rob W
Rob W

Reputation: 348962

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).

Upvotes: 5

epascarello
epascarello

Reputation: 207491

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

Upvotes: 1

Related Questions