A Chrome extension to visually inspect and compare element alignment on any webpage.
- Visual alignment guides — Vertical and horizontal lines through element centers and edges
- Multi-element comparison — Select up to 100 elements and compare them all
- Live measurements — See exact pixel differences for center, left, right, top, and bottom edges
- Hover preview — See alignment guides before selecting
- Draggable panel — Move the info panel anywhere on screen
- Draggable badges — Reposition element number badges as needed
- Keyboard shortcuts — Press Escape to clear selections
(Coming soon)
- Download or clone this repository
- Open Chrome and go to
chrome://extensions/ - Enable "Developer mode" in the top right
- Click "Load unpacked" and select the extension folder
- Click the extension icon to activate
- Click on any element to select it
- Select additional elements to compare alignment
- See instant visual feedback with alignment guides
- Center X & Y alignment
- Left edge alignment
- Right edge alignment
- Top edge alignment
- Bottom edge alignment
✅ = Aligned (within 0.5px)
❌ = Misaligned (shows exact pixel difference)
MIT License - feel free to use and modify.