Better Ruler
Extension Actions
- Extension status: Featured
- Live on Store
A page ruler which can snaps around web elements for easier measurement. Provide convenience for front-end development and ui design
**A smart web ruler with element snapping for easier frontend development and UI design.**
### ✨ Features
- **Smart Snapping**: Hold `Alt` (or `Option` on Mac) while moving the cursor to automatically detect and snap to web elements. Supports snapping to **edges, 4 corners, and 4 edge midpoints**, displaying dimensions instantly. The snap preview uses a contrasting color to distinguish from measurement boxes.
- **Easy Measurement**: Click and drag to create a measurement layer that snaps to element edges automatically.
- **Flexible Editing**: Double-click any layer to enter edit mode: move, resize, or fine-tune.
- **Esc**: Exit edit mode
- **Backspace**: Delete the selected layer
- **Status Indicator**: The extension icon changes based on status (colored = active, gray = inactive) for easy identification.
- **Shortcuts Help**: Hover over the `?` button in the toolbar to view all available shortcuts.
- **Customization**:
- **Individual Colors & Opacity**: Each measurement box can have its own color and opacity; editing when selected only affects the current item
- **Global Mode**: When enabled, changing color or opacity affects all existing measurement boxes simultaneously
- **Single Mode**: When enabled, only one measurement box can exist at a time; new boxes automatically clear old ones
- **Size Position**: Configure where dimension labels appear (center, corners, etc.)
- **Dashed Background**: Choose between solid or dashed background for measurement boxes
- **Reference Lines**: Automatic horizontal and vertical reference lines with X, Y coordinate labels
- **Crosshair Display**: Configure mouse crosshair display mode
- **Quick Controls**:
- Press `f` (configurable): Toggle toolbar visibility
- Press `r` (configurable): Toggle reference lines
- Press `Shift`: Toggle dimension labels
- `Alt + z` (customizable): Global shortcut to toggle the extension
- Double-press `z` (configurable): Quickly activate/deactivate within the page (after first launch)
- **Local File Support**: Enable "Allow access to file URLs" in `chrome://extensions` to measure local HTML files.
- **Mobile Simulation**: Works in DevTools mobile simulation mode (ensure `device type` is set to `no touch`).
Latest reviews
- ppp
- good job
- Yaser
- Really great simple extention!
- Asep IT
- Good, And Thank You
- KOTA KAWANISHI (OKAKA)
- good! easy to use!
- Alex Raven
- A very good extension. Useful for me as for a web developer. There is one important function missing I think - activate it by hotkey (changeable). So you press hotkey and ruler appears. Press second time - and it disappears.
- Rajesh
- Please Add option to detact auto height widht of object.
- Mizanur Rahman
- Awesome I'm thankful to the developers.
- Junaid Khan
- Brilliant tool.
- Hamid Imomov
- It works with local files too. Good!
- David Rahrer
- Great, simple ruler -- just what I was looking for. One thing, I closed the bar at the bottom of the screen. How do I get it back? Thanks again for your work.
- Katie Bruhl
- Simple to use and very useful. Thank you.
- Katie Bruhl
- Simple to use and very useful. Thank you.
- WHO IS
- how to set the language to english?
- WHO IS
- how to set the language to english?
- Rajesh
- I recently came across the Better Ruler Chrome extension and I must say, it has been an incredibly helpful tool for my web development projects. This extension provides a simple and intuitive way to measure various elements on a webpage, making it easier than ever to ensure pixel-perfect precision.
- Cássio Gabriel Santos
- Extensão muito top, prática e simples de usar. Só falta ter a opção de mudar de idioma. Um inglês já bastaria
- tj y
- 增加一个快捷键用于显示隐藏工具栏，现在按键会和 vimium 冲突
- Yunhai Wang
- 牛批 兄弟
- Youssef OUIZIANE
- Again Good Job Developers !
- Youssef OUIZIANE
- Again Good Job Developers !
- BIUBIU UP
- 更新之后更好用了
- Stefan Trinh
- Perfect. check check my UI properly now
- Stefan Trinh
- Perfect. check check my UI properly now
- Arthur Volokhov
- It doesn't work with local files html. Не работает с локальными файлами html.
- Med choayb bouanimba
- just perfect
- Med choayb bouanimba
- just perfect
- Alexander Nikonov
- During the usage, caused the Maximum call stack size exception.
- Alexander Nikonov
- During the usage, caused the Maximum call stack size exception.
- Usman Basharat
- Simple and Superb
- Usman Basharat
- Simple and Superb
- Google利用歴5年以上（PCゲームギーク）
- これは、思っていた以上の性能。 所謂OCR系というんですかねぇ。 この手のフリーソフト（アドオン）は、沢山あるけど、大体1つの座標しかキャップチャー出来ない。 でも、コイツは、複数の座標をキャプチャーできる（しかも、キャプチャーしたままの状態を維持できる）。 これが無料で使えるなんて。凄い世の中になったものだなぁ・・・😮
- Võ Đức Mạnh
- Nice extensions
- Vo Duc Manh (IT Kai nè)
- Nice extensions
- Mauricio Souza
- simples, prático e fácil... a melhor ferramenta de medidas que encontrei!
- Hardi
- Perfect! The shortcut is helpful too
- Hardi
- Perfect! The shortcut is helpful too
- Sudipto Mitra
- This is really better ruler.
- Sudipto Mitra
- This is really better ruler.
- Denis Semionov
- Exactly what I needed
- Denis Semionov
- Exactly what I needed
- Tony Tschanz
- Fantastic Ruler, sample and effective, makes crosshairs over full screen while moving the cursor. Also useful to scale points with axes on graphs.
- Tony Tschanz
- Fantastic Ruler, sample and effective, makes crosshairs over full screen while moving the cursor. Also useful to scale points with axes on graphs.
- Roman Velboi
- This ruler works with developer tools!
- Roman Velboi
- This ruler works with developer tools!
- Jovan Mabilin
- It wasn't that compatible in Tablet and Mobile View.
- Jovan Mabilin
- It wasn't that compatible in Tablet and Mobile View.
- Stacie T
- This does exactly what I needed it to do! Thank you!
- Stacie T
- This does exactly what I needed it to do! Thank you!
- Theodore Nguyen
- This is what I look for, easy to use and convenient
- Theodore Nguyen
- This is what I look for, easy to use and convenient