Element Inspector
Point at any element and read its DNA.
Pick a page element and inspect its tag, attributes, styles and dimensions.
- Side panel
- Right-click menu
- On-page overlay
- Active tab
- DevTools
- Command palette
(opens the Chrome Web Store in a new tab)or pressCtrlShiftSpace
One Panel Search tools
Element Inspector
Side panel
Hover picker
Ready01 / 04
01Features
What it does
- 01Hover picker
- 02Tag & attributes
- 03Computed styles
- 04Box dimensions
02Use cases
When you'll reach for it
Grab exact spacing for a bug report
Check which styles actually apply
How to open it
- 1
Side panel
Click the One Panel icon in the toolbar and search for “Element Inspector”.
- 2
Command palette
Press Ctrl + Shift + Space on any page and type its name.
- 3
Right-click menu
Right-click the page or an element, then choose One Panel → Element Inspector.
- 4
On-page overlay
Start it from the panel and it draws its overlay right on top of the page.
- 5
DevTools
Open Chrome DevTools and switch to the One Panel panel.
Privacy
- Injects its helper into the page only when you start it, never in the background.
- Reads the current tab only when you use it, through Chrome’s activeTab permission.
Keep going
Pairs well with
Get Element Inspector and 80 more
One install adds every tool to your side panel. No account, nothing to configure.