Every "must have extensions" list on the internet is padded. Half the entries duplicate something already sitting in devtools, and a third of them you install, poke at once, and never open again. So instead of thirty extensions with one line each, here are twelve grouped by the actual job they do, with a note on what each one replaces, because the real win here isn’t finding a new tool, it’s not installing four that do the same thing.
One thing before the list, because it matters more than any single pick on it. An extension that can "read and change your data on all sites" can read your session cookies, your email, whatever your company runs internally. Check what each one is actually asking for. Favor the ones that only get access when you click them instead of always. And go back through your list every few months, because abandoned extensions get sold off and quietly turned into ad injectors more often than you’d think.
Capturing what you find
This is the category with the biggest gap between what people actually use and what’s out there.
- Stele (that’s us). Grabs an element with its real DOM and computed CSS instead of a picture of it, so the thing you saved is still inspectable months later even after the original site gets rebuilt. Pulls out design tokens and can generate code straight from the capture. What it replaces: your screenshots folder, for anything on the web.
- GoFullPage. Still the most reliable full page screenshot tool around, and the right pick for the times a picture really is all you need. What it replaces: fighting with devtools’ built in capture.
- Raindrop.io. If you’re honest with yourself and your saving problem is really a links problem, not a UI problem, use this instead. What it replaces: bookmarks.
One thing worth knowing before you install anything: devtools already does full page screenshots. Open the command palette and type "Capture full size screenshot." If that’s all you need, skip the screenshot pick above entirely.
Inspecting type and color
- WhatFont. Hover any text on a page and it tells you the family, size, weight, line height. Yes, devtools can do this too. It’s still worth having because it’s a two second glance instead of a twenty second dig, and you’ll reach for it while reading rather than while debugging.
- VisBug. Lets you manipulate a live page the way you would in a design tool. Drag things, change type, nudge spacing, no devtools required. Honestly the best way to try a change on somebody else’s site before you decide it’s worth building for real.
- ColorZilla. An eyedropper plus a running palette of the page’s colors. One caveat that applies to literally every eyedropper tool, not just this one: it samples what actually got painted on screen, so a translucent surface just reads as its blended color and you lose the fact that it was ever translucent at all.
Accessibility
This is probably the category most likely to actually change how you work, not just what you can see.
- axe DevTools. The standard automated audit at this point, and its false positive rate is low enough that you’ll actually keep running it. It’ll catch somewhere between a third and half of real issues, which honestly is about the ceiling for anything automated. It’s not a substitute for a keyboard pass.
- WAVE. A different take on a similar sweep, shown as annotations right on the page. Good for showing a non developer what’s broken, which is often the real blocker anyway.
- Accessibility Insights. Adds a guided manual walkthrough on top of the automated part, covering the ground axe deliberately leaves to you.
One check that costs nothing and beats most of these: unplug your mouse and try to get through the flow. Nothing on this list does that for you.
Performance and debugging
- React Developer Tools. If you write React, this isn’t optional. The Profiler tab specifically is underused. Most people install this for the component tree and never open Profiler once.
- Web Vitals. Shows LCP, CLS, and INP live for whatever page you’re on. The value here is ambient, honestly. You start noticing which sites feel bad and start connecting that to why, and that teaches you more than any article on the topic.
- JSON Formatter or something like it. Turns raw API responses into something you can actually read in the browser. Small tool, but you’ll reach for it weekly.
Deliberately left off: Lighthouse, because it’s already in devtools, and anything that claims it’ll find your performance problems for you. The bottleneck is almost always sitting right there in a profile you could record yourself.
Reading and writing
- Wappalyzer. Tells you what a site is built with. More useful than it sounds, mostly because "how are they doing that" usually starts with knowing who "they" even are.
- uBlock Origin. This one’s on the list for a development reason as much as a philosophical one. Browsing with it off for an hour is the difference between seeing your site the way you experience it and seeing it the way a huge chunk of your users actually do.
What to uninstall
This is the other half of the advice, and honestly the more valuable half.
- Anything that duplicates devtools and that you haven’t opened in a month. Ruler extensions, generic CSS viewers, most color pickers.
- Anything with an account you don’t remember making and permissions that cover every site you visit.
- Extensions whose developers have gone quiet. Check the last update date. Something that hasn’t shipped in three years but still has full site access is a liability no matter how good it used to be.
- Two extensions doing the same job. Pick one. Having two capture tools means you use neither consistently, which is worse than picking either one.
A reasonable steady state is six to ten enabled extensions. If you’re past fifteen, some of them are costing you memory and attention for nothing in return.
The one worth adding if you add nothing else
Whatever closes the gap between seeing something good and actually being able to use it. For most frontend developers that’s capture, because the default is still a screenshot, and a screenshot of a web page throws away every value the browser already computed for you.
That’s our answer with Stele. It captures the element with its real DOM and computed CSS, not a picture of it. Free to try in beta. And if installing another extension feels like too much right now, the console snippets in our post on extracting design tokens will get you most of the way there without installing a thing.