Extension lists are usually padded with things that duplicate devtools or that you install once and never open. This one is grouped by job, and each entry says what it replaces, because the most useful thing a list like this can do is stop you installing four tools that do the same thing.
One preamble on permissions, because it matters more than any individual recommendation. An extension that can read and change data on all sites can read your session cookies, your email, and anything on your company’s internal tools. Check what each one asks for, prefer extensions that request access on click rather than always, and audit the list every few months. The number of abandoned extensions that get sold and turn into ad injectors is not small.
Capturing what you find
The category with the biggest gap between what people use and what is available.
- Stele (ours). Captures an element with its real DOM and computed CSS rather than as a picture, so the reference stays inspectable after the site changes, and extracts tokens and generates code from it. Replaces: your screenshots folder, for web pages specifically.
- GoFullPage. The most reliable full-page screenshot extension, and the one to keep for the cases where a picture genuinely is what you want. Replaces: the fiddly parts of devtools’ built-in full-size capture.
- Raindrop.io. If your saving problem is really a links problem rather than a UI problem, this is the better tool and you should use it instead. Replaces: browser bookmarks.
Note that devtools already does a full-page screenshot: command palette, "Capture full size screenshot". If that covers you, skip this category’s screenshot entry entirely.
Inspecting type and color
- WhatFont. Hover any text, get the family, size, weight, and line height. Redundant with devtools, and still worth having because it is two seconds instead of twenty and works while you are reading rather than while you are debugging.
- VisBug. Design-tool-style manipulation of a live page: drag things around, change type, adjust spacing, all without opening devtools. Genuinely the best way to try a change on someone else’s site before deciding it is worth building.
- ColorZilla. Eyedropper plus a page color palette. Worth one caveat that applies to every eyedropper: it samples the rendered result, so a translucent surface reads as the blended color and you lose the fact that it was translucent at all.
Accessibility
The category most likely to change how you work rather than just what you can see.
- axe DevTools. The standard automated audit, and the one whose false positive rate is low enough that you will keep running it. Catches roughly a third to a half of real issues, which is the honest ceiling for automated checking; it does not replace a keyboard pass.
- WAVE. A different presentation of a similar sweep, rendered as annotations on the page itself. Good for showing a non-developer what is wrong, which is often the actual blocker.
- Accessibility Insights. Adds a guided manual assessment on top of the automated sweep, which is the part axe deliberately leaves to you.
A reminder that costs nothing: the single highest-yield accessibility check is unplugging your mouse and trying to complete the flow. No extension does that for you.
Performance and debugging
- React Developer Tools. Non-negotiable if you write React. The Profiler tab in particular is underused; most people install this and only ever use the component tree.
- Web Vitals. Shows LCP, CLS, and INP for the page you are on, live. Its value is ambient: you start noticing which sites are bad and why, which teaches you more than reading about it.
- JSON Formatter (or similar). Makes raw API responses readable in the browser. Small, and you will use it every week.
Deliberately not listed: Lighthouse, which is built into devtools, and any extension that promises to find your performance problems for you. The bottleneck is nearly always visible in a profile you already can record.
Reading and writing
- Wappalyzer. Tells you what a site is built with. Useful more often than you expect, mostly for answering "how are they doing that" by first knowing what "they" are.
- uBlock Origin. On the list for a development reason as much as an ideological one: browsing with and without it is the difference between seeing your site as you experience it and as a large fraction of your users do.
What to uninstall
The other half of the advice, and the more valuable half.
- Anything that duplicates devtools and that you have not opened in a month. Ruler extensions, generic CSS viewers, most color pickers.
- Anything with an account you never made and a permission set that covers every site.
- Extensions from developers who have gone quiet. Check the last update date. An extension that has not shipped in three years with full site access is a liability regardless of how good it once was.
- Any two extensions that do the same job. Pick one. Two capture tools means you use neither consistently, which is worse than either.
A reasonable steady state is six to ten enabled extensions. If you are past fifteen, some of them are costing you memory and attention for nothing.
The one worth adding if you add nothing else
Whichever one closes the gap between seeing something good and being able to use it. For most frontend developers that is capture, because the current default is a screenshot, and a screenshot of a web page throws away every value the browser had already computed.
Stele’s extension is our answer to that, and it is free to try in beta. If you would rather not install another extension, the console snippets in our post on extracting design tokens get you a meaningful part of the way with nothing installed at all.