Install DevTools+

Add it to your browser

1. Open the DevTools+ by URLflows listing on the Chrome Web Store.
2. Click Add to Chrome (the label adapts to your browser: "Add to Edge", "Add to Brave" and so on), then Add extension.
3. The settings page opens at Getting Started, with a short tour of the toolbar panel, the right-click menu, request rules and themes.

Chrome warns about several permissions when you add it, including reading and changing data on every website and using the debugger. DevTools+ needs them because its tools work on any page you open: grabs, Inspect, request rules, cookies, and Emulate, HAR recording and Console errors (which use Chrome's debugger only while they run). Nothing the tools read leaves your browser. See Privacy & permissions for what each permission is for.

Pin it to the toolbar

Click the puzzle-piece Extensions icon at the top right of the browser and press the pin beside DevTools+ by URLflows. You can also open the panel without the icon: press Alt+Shift+D.

Try it

1. Open any web page and click the DevTools+ icon.
2. Under Inspect, click the first icon, Inspect element (point at an icon to see its name).
3. Point at anything on the page to see its size, spacing, font and colors, then click to pin the details and copy what you need. Press Esc to stop.

Page tools can't run on Chrome's own pages (chrome:// addresses) or the Chrome Web Store, so try a regular website first.

Which browsers work

Chrome, Edge, Brave, Opera, Arc, Vivaldi and other Chromium-based browsers all install from the same Chrome Web Store listing. There's no Firefox or Safari version. DevTools+ is private, free, forever: no account, no sign-in, nothing to pay.

Related guides

Next, read What DevTools+ does, Use the toolbar panel or Choose and order your tools.