Core How-Tos

Inspect an element and copy a container

Two tools in the Inspect group of DevTools+ by URLflows let you read and copy any part of a page without opening DevTools: Inspect element shows how something is built, and Copy a container takes it with you in whatever form you need.

Inspect an element

Click the DevTools+ icon and, under Inspect, click Inspect element. Or press Alt+Shift+I.
Point at anything on the page. The box model is drawn over it the way DevTools draws it (margin, border, padding and content), and a card beside the pointer shows its details.
Click to pin the card, so you can copy from it. Press Esc to stop without pinning.

While pointing, press ↑ to widen to the element around the one under the pointer, ↓ to narrow back, and Enter to pin the one highlighted. That's the easiest way to reach a container whose children cover it.

What the card shows

Size, Display (with its position when it isn't static), Margin, Padding and Border.
Font (family and weight) and Size / line (font size and line height).
Radius, Layout (for a flex or grid container: its direction or columns, gap and alignment) and z-index, when they apply.
Color: the text color on the background behind it, and Contrast: their ratio with a WCAG verdict of AAA, AA, AA large only or Fails. Large text is judged against the large-text thresholds.

Copy from the pinned card

Under Copy, each button puts one thing on your clipboard:

Text: the words in it, as they read on the page.
HTML: its full outer HTML.
Markdown: headings, paragraphs, emphasis, code, links, images, lists, quotes and simple tables turned into Markdown.
Picture: a screenshot of exactly that element, copied as an image.
Selector: a CSS selector that matches only this element, preferring IDs and stable class names over generated ones.
XPath and JS path: ways to find it again in scripts and tests.
Styles: the computed styles that matter for rebuilding it, as a CSS rule, skipping the values every element has by default.

Press Pick another to inspect something else, or close the card with × or Esc.

Copy a container

When you already know what you want to copy, Copy a container goes straight to the copy buttons.

Click the DevTools+ icon and, under Inspect, click Copy a container. Or press Alt+Shift+C.
Point at the part of the page you want. Press ↑ to widen the highlight to its container, ↓ to narrow it again.
Click it, or press Enter. A small card shows what you picked and its size.
Under Copy it as:, choose Text, HTML, Markdown, Picture, Selector, XPath, JS path or Styles. The card closes once it's copied.

Press Esc at any point to stop.

Other ways in

Right-click any element to inspect it (the pinned card opens straight away), screenshot it, or copy its selector, XPath, outer HTML, text or Markdown.
In DevTools, the Elements panel's DevTools+ tab, beside Styles, shows the selected element's selector, box, colors and contrast, with buttons to copy them.

See Right-click menu, shortcuts and the Elements tab.