Getting Started

What DevTools+ does

DevTools+ by URLflows puts a web developer's everyday tools one click from the toolbar, on any page, without hunting through DevTools menus. Its tools sit under five headings in the toolbar panel: Capture, Inspect, Debug, This page and Utilities.

Capture

Screen grab, Selection area grab, Element grab, Full page grab and Full screen grab: the visible tab, an area you drag, one element (even one taller than the window), the whole page top to bottom, or a screen, window or another tab. Each is copied, saved as a file, or both.
Record the tab: a video of the tab, with its sound if you like, saved to Downloads.

See Take screen grabs and record the tab.

Inspect

Inspect element: point at anything to see its box model, size, spacing, font, colors and contrast; click to pin it and copy its text, HTML, Markdown, picture, selector, XPath, JS path or styles.
Copy a container: pick any part of the page and copy it the same ways.
Color picker and Measure: pick any color on screen as HEX, RGB, HSL or OKLCH, with a contrast check; measure distances and areas in pixels.
Page info and Accessibility check: meta and social tags, headings, links, images, scripts, the technology a page is built with and its load times; and a WCAG check with axe-core, on your computer.

See Inspect an element and copy a container, Pick colors, measure and switch page modes and Check page info and accessibility.

Debug

Open DevTools: Chrome doesn't let an extension open DevTools, so this lists every way in, with the shortcuts for your keyboard.
Console errors and Record a HAR file: record a page's errors and warnings and see which site or extension each came from; record the tab's network traffic as a HAR file.
Emulate: a slow network or CPU, a phone screen, dark mode, reduced motion, print styles, vision deficiencies, time zone, language and more.
Request rules: block, redirect or change the headers of requests, such as turning off a site's CSP or allowing CORS.
Chrome's developer pages and AI tools: Chrome's internal pages for developers, and your AI coding and chat tools, each one click away.

See Console errors, HAR files and DevTools, Emulate devices, networks and preferences and Change requests with request rules.

This page

Cookies and storage, Clear site data and Site switches: see and edit this page's cookies and storage, clear a site's data, and turn JavaScript, images, pop-ups and more on or off for one site.
Outline every element, Layout grid, Edit page text and Turn off CSS: page modes you switch on and off.
Hide page elements, Zoom area and Mask PII: hide parts of a page for good, zoom the page or one part of it, and cover personal details before a screenshot or screen share.

See Cookies, storage and site data and Pick colors, measure and switch page modes.

Utilities

Encode and decode (Base64, URLs, JWTs, JSON, timestamps, hashes and more), Clipboard inspector, Open on your phone (a QR code), Resize the window, Open in incognito, Extensions and Browser and system info. See Encode, decode and other utilities.

Beyond the toolbar panel

A right-click menu inspects, screenshots or hides the element you clicked, or copies its selector, XPath, HTML, text or Markdown. Keyboard shortcuts open the panel and start the most-used tools. And in DevTools itself, the Elements panel gets a DevTools+ tab beside Styles. See Right-click menu, shortcuts and the Elements tab.

Private by design

There are no accounts, no servers and no tracking. Your settings, rules and recent colors stay in Chrome's storage on your computer, and grabs, recordings and HAR files go only to your clipboard or Downloads folder. See Privacy & permissions.