Core How-Tos

Pick colors, measure and switch page modes

DevTools+ by URLflows has a color picker with a contrast check, a pixel ruler, and four page modes that show how a layout is built. Three more tools tidy a page up before a screenshot or a review.

Pick a color

Click the DevTools+ icon and, under Inspect, click Color picker. The eyedropper starts straight away.
Click any color anywhere on your screen, not just in the page. Press Esc to cancel.
The color shows as HEX, RGB, HSL and OKLCH, each with its own copy button. The format chosen under Copy on pick is already on your clipboard.

Press Pick a color to pick again. The color picker works on any tab, Chrome's own pages included.

Check contrast between two colors

Once you've picked two colors, Contrast shows the ratio between the newest and the one before it, with a pass or fail for AA, AAA and AA large. Pick the text color and then its background to check a pair.

Recent keeps your last twelve colors, newest first. Click one to compare the current color with it instead, or Shift-click it to copy it. The default format and the recent colors are also in Settings → Tools → Color picker (Copy a picked color as and Recent colors).

Measure

Under Inspect, click Measure. Crosshairs follow the pointer, with its position in pixels.
Drag to measure. The box shows its width, height and diagonal, for example "320 × 180 · 367 px diagonal".
The last measurement stays until you drag again. Press Esc to stop.

Switch page modes

Four tools under This page switch a mode on or off. The panel stays open, and a mode that's on shows as pressed. Each stays on until you click it again or reload the page.

Outline every element: draws an outline around every element, colored by how deeply it's nested, so you can see the layout's boxes.
Layout grid: lays a column grid, and an optional baseline, over the page to check alignment.
Edit page text: makes every word on the page editable, to try out copy or test long text. Click any text to edit it; reload to undo.
Turn off CSS: shows the page without its stylesheets or inline styles: the order and structure a screen reader or search engine sees.

Each mode can be given a keyboard shortcut on Chrome's shortcuts page. See Right-click menu, shortcuts and the Elements tab.

Set up the layout grid

Match your design system's grid in Settings → Tools → Layout grid: Columns (12 to start), Gutter (px), Max width (px), Side margin (px), Baseline (px) and Color. A max width of 0 fills the window; a baseline of 0 draws no rows. Changes show on open pages straight away.

Hide, zoom and mask

Hide page elements: press Pick element to hide, then click each part of the page you want gone (↑ and ↓ widen and narrow the highlight), and press Esc to finish. They stay hidden every time you come back to that page. The panel lists what's hidden on this page, to restore one at a time or with Restore all on this page; Settings → Hidden Elements lists everything, grouped by page.
Zoom area: Page zoom zooms the whole tab in and out, with Reset. Container zoom zooms one part of the page, such as a reading pane: press Pick a container, click it, then use − and + or Remove. It's remembered for that site, and Settings → Tools → Container zoom lists the sites.
Mask PII: before a screenshot or screen share, choose What to mask (email addresses, phone numbers, credit cards, US SSNs, IP addresses, postal and shipping addresses, names) and a Mask style (Solid bars or Dots ••••), then press Mask this page. Unmask this page puts it back, and so does a reload. The mask is only visual: selecting or inspecting the page still shows the original.