GUIDE: Inspect HTML Elements

Developers are keenly aware of element structure. An element is made of many attributes that combine to create the looks and actions of elements. To see an element up close, use the element inspector.


Inspector's Hover Details:

Step 1: Right click anywhere and select Inspect or use the keyboard shortcut CTRL + SHIFT + I

Dev tools panel open
Dev tools pictured in green highlight.

Step 2: Click the inspector icon in the top left.

Select an element in the page to inspect it - Ctrl + Shift + C
URL panel with multiple button selections

Step 3: Hover the mouse over any element.

Arbitrary Articles heading element inspection
Cursor located on certificate button

Firefox does not have an information panel for inspection hovering. Instead, the element locator is displayed and the tools brought into focus of the Elements panel.


Step 4 (Optional): Click the element to bring the DOM into focus of the selected element.

Dev panel opens to "Elements" tab after the selection.
HTTPS certificate: general details panel