Search code examples
consoleselectors-apifirefox-developer-tools

Firefox Developer Tools: Highlight element found through queryselector in console as per. 'Inspect Element'


If I open Firefox Web Develop Web Console and I reference a query selector like this:

document.querySelector('selector');

I would like to highlight the selector that is returned, in the same style as if I were to right click the element and select 'Inspect Element'


Solution

  • This feature has landed. Now DOMNodes are nicely outputted to the webconsole:

    • They are colored like in the inspector
    • Hovering over them highlights them in the page
    • Clicking on the inspector icon next to them switches over to the inspector