UI Tools

A collection of frontend precision tools for browser DevTools.

UI Tools brings the guide line workflow from design tools directly into Chrome DevTools. Place draggable guides, measure spacing between DOM elements, inspect typography, pick colors, and more — all from a dedicated DevTools panel with zero visual footprint when inactive. Features: Guide Lines — Add horizontal and vertical guides at any position. Drag to reposition, change colors, and see live coordinate updates. Distance measurements appear automatically between adjacent guides. Nudge selected guides with arrow keys (1px) or Shift+arrow (10px). Measurement Boxes — Place resizable rectangular overlays to compare dimensions against design specs. 8-point resize handles, central drag zone, crosshair center markers, and live width x height display. Rulers — Sticky ruler bars along the top and left viewport edges with tick marks every 10px and numeric labels at every 100px. Drag from the ruler to create new guides. DOM Spacing Inspector — Click to select a reference element, then hover other elements to see measurement lines with pixel labels. Supports external spacing, internal inset distances, and overlap detection. Updates live on scroll and resize. Color Eyedropper — Pick any color from the page using the native EyeDropper API. The hex value is copied to your clipboard with a toast notification showing the sampled color. Font Inspector — Hover tooltip that displays font family, size, weight, and line height of any element. Box Model Picker — Click any element to visualize its full CSS box model with colored semi-transparent layers for margin, border, padding, and content. Crosshair — A viewport-wide crosshair that follows the cursor for precise alignment work. Column Grid Overlay — Configurable column grid rendered directly on the page. Adjust column count (1-48), gutter gap (0-200px), and color in real time. Breakpoint Presets — Auto-scans page stylesheets for min-width and max-width media queries and displays them as quick-add guide buttons. Falls back to standard defaults (320, 768, 1024, 1440px). How to use: - Open any webpage and launch DevTools (F12 or Cmd+Option+I) - Click the UI Tools tab in DevTools - Use the toolbar to add guides, boxes, or toggle inspection tools Privacy: UI Tools requires no permissions and works entirely through the DevTools API. It does not collect, transmit, or store any user data. No analytics, no tracking, no network requests. Technical details: Pure vanilla JavaScript, no frameworks or external dependencies Works through the DevTools API (no content scripts, no host permissions) Page remains fully interactive when tools are active