Better Ruler is a Chrome add-on that provides a convenient way to measure web elements for front-end development and UI design. With its snapping feature, it allows users to easily measure the size of elements on a webpage.

To use Better Ruler, simply click on the plugin icon to run the plugin. Clicking again will exit the plugin. While using the plugin, holding down the Alt/Option key while moving the mouse will display the size of the element at the mouse position in real time. Additionally, holding down the left mouse button and moving will automatically snap the ruler to the edge of the element.

Better Ruler also offers an editing mode, which can be activated by double-clicking the current layer. In this mode, users can drag and resize the layer. Pressing the Backspace key will delete the current layer, and double-clicking on the layer again or pressing Esc will exit edit mode.

To enhance usability, Better Ruler provides shortcut keys. Pressing 'f' will show or hide the toolbar, while pressing Shift will show or hide the size. Users can also use Alt+Z to activate or deactivate the plugin. If this shortcut doesn't work, users can bind the key themselves in the Chrome extensions settings. Alternatively, after activating the plugin once, users can double-press 'z' to activate or deactivate the plugin.

For local HTML files, users can go to chrome://extensions, find the Better Ruler plugin, and turn on "allow access to file URL" to ensure it works effectively.

Better Ruler is a free add-on that offers a simple and efficient solution for measuring web elements, making it a valuable tool for front-end developers and UI designers.