Search code examples
google-chromechromium

How to create a query selector out of a selected element?

In google chrome, especially now with custom elements, it became very cumbersome to select and element by hand nowadays, even though the browser knows the whole path to it already. Or is there a way that leads to a query selected for an element that I'm inspecting?

Situation:

enter image description here

What chrome can tell me:

enter image description here

What chrome is unable to create for me AFAIK:

enter image description here

Solution

  • For anyone still looking for this:

    Right click on a element > Copy > Copy JS path

    And you will get:

    document.querySelector("body > extensions-manager").shadowRoot.querySelector("#items-list").shadowRoot.querySelector("#cnfacfjpfphiedioflfpeimkdmlcgdfh").shadowRoot.querySelector("#dev-reload-button")