Inspecting invisible, overlapping, and parent elements

Precisely re-target any DOM element using your keyboard's arrow keys (▲ up and ▼ down) to navigate the HTML tree.

Sometimes, you can't select an element only using your mouse. Maybe they're invisible, or perhaps they're hidden deeply inside the HTML.

There are 2 ways to select these complex elements with CSS Pro:

1. Using your keyboard arrow keys (▲ up and ▼ down)

To inspect the upper and lower elements on the DOM without moving your mouse, press the arrow keys (▲ up and ▼ down):

PS: The page needs to be focused for shortcuts to work - such as the arrow keys. If the page is not focused, you must click somewhere first. Or always open the extension via the shortcut. That way, the page starts focused.

2. Via the menu's HTML Navigator feature

You can also click on the menu's option HTML Navigator to visualize the website's HTML structure and all its elements.

Visualize all the elements of a website in real-time and understand the website's structure. Click to select elements and edit.

Navigate the elements tree using your mouse or, even faster, use your keyboard's arrow keys ▲ up and ▼ down to navigate between elements and ► right and ◄ left to expand and collapse elements.

You can also click "Pick an element" to pick elements using your mouse. When this mode is active, as you move the mouse throughout the screen, elements will be focused/highlighted so that you can understand where they are located in the website's structure.

A video showing how the HTML Elements feature work.