DevTools+ by URLflows
The tools a web developer reaches for every day are spread across DevTools panels, command menus, Chrome's internal pages and a handful of single-purpose extensions. DevTools+ puts them one click from the toolbar, on any page: grab and record, inspect and copy, emulate, change requests, check accessibility and get into DevTools the quick way. Private, free, forever.
What you get
- Screen grabs of the visible tab, a dragged area, one element, the whole page or your screen, and a tab recording with its sound, saved as a video
- Inspect element with the box model, contrast and copies of its selector, XPath, JS path, HTML, Markdown and styles; Copy a container picks any part of the page
- A color picker with HEX, RGB, HSL and OKLCH and a contrast check, Measure, a layout grid, and page modes: outline every element, edit page text, turn off CSS
- Page info with the heading outline, share preview, Core Web Vitals and the libraries a page is built with, and an accessibility check against WCAG
- Emulate network speed, CPU, phones and tablets, color scheme, reduced motion, vision deficiencies, time zone, language and location
- Request rules for the current site: turn off CSP, allow CORS, allow framing, block, redirect or set a header, with a full editor in Settings
- Console errors, HAR files, this page's cookies and storage, clearing site data, site switches and every way into DevTools for your keyboard
- Encode and decode, a clipboard inspector, a QR code for your phone, window sizes, a right-click menu, keyboard shortcuts and a DevTools+ tab in the Elements panel
How to install
- Click Add to Chrome above (the label adapts to your browser — "Add to Edge", "Add to Brave", etc.) and confirm.
- Pin it from the puzzle-piece Extensions menu, or press Alt+Shift+D on any page to open it.
- Pick a tool from the panel. Settings opens at Getting Started the first time, where you can choose which tools the panel shows.
Browser support: Chrome, Edge, Brave, Opera, Arc, Vivaldi and other Chromium-based browsers all install from the same Chrome Web Store listing. No Firefox or Safari.
Related help guides
Install DevTools+
Add the extension to Chrome and open your first tool.
Inspect an element and copy a container
The box model, contrast, and every way to copy what you picked.
Emulate devices, networks and preferences
Slow networks, phones, dark mode, vision deficiencies and more.
Change requests with request rules
Turn off CSP, allow CORS, block, redirect or set a header.