Every list of Chrome extensions for developers contains roughly forty entries, of which you will install three and keep one. This is a list of twelve that survive that filter, split by the job they do rather than by how impressive they look in a screenshot.
Key takeaways
- You need four tools, not forty. Something to read type, something to read colour, something to measure, something to capture. Everything else is a preference.
- Inspect element already does a lot of this. These extensions are worth installing because they are faster, not because they are capable of something the browser cannot do.
- Extensions can read the pages you visit. That is how they work. Install fewer, from publishers you recognise, and remove the ones you stopped using.
- The best one is the one you remember you have. A toolbar of thirty icons is a toolbar you ignore.
For reading a page: type, colour and layout
WhatFont
Hover over any text and it tells you the font family, size, line height and weight. That is the entire product, and it is the one extension on this list nobody uninstalls.
You can get the same information from the browser’s inspector in about four more clicks. The four clicks are the point.
ColorZilla
An eyedropper that picks any colour on screen and hands you the hex value, plus a palette history and a gradient generator. It is the single most useful tool here for anyone rebuilding a design from a live site rather than from a file.
CSS Peeper
Click an element and it shows you the styles that actually matter: colours, fonts, spacing, and the assets used on the page, without the wall of inherited declarations the inspector insists on showing you.
If you are looking for a CSS Peeper alternative because it does not do quite what you need, CSS Viewer below is the leaner option.
CSS Viewer
A floating panel showing the computed CSS of whatever you hover. Lighter than CSS Peeper, less pretty, and often quicker for a fast check.
Page Ruler
Draws a ruler over the page so you can measure elements and the gaps between them in pixels. Useful precisely when someone says “that spacing looks a bit off” and you would like to reply with a number.
For testing: responsiveness and stacks
Window Resizer
Resizes the browser window to a list of preset device dimensions in one click. Chrome’s own device toolbar does this too, and does it well, so install this only if you prefer resizing the actual window rather than simulating one.
Web Developer
The oldest tool here and the most cluttered. A toolbar of utilities for disabling CSS, outlining elements, examining forms, clearing specific cookies and a great deal more.
It looks dated. It also does about thirty things nothing else on this list does, which is why it is still installed on a lot of machines fifteen years later.
Wappalyzer
Tells you what a site is built with: CMS, framework, analytics, hosting, payment provider. Genuinely useful for competitive research and for that moment when a prospect says “we do not know what our old site runs on”.
Treat its output as a strong hint rather than a certainty. It infers from fingerprints, and fingerprints can be hidden or misleading.
For capturing: screenshots and assets
GoFullPage
Captures an entire page, including everything below the fold, as one image or PDF. One click, no account, no watermark. This is the correct answer to “can you send me the whole page”.
Image Downloader
Lists every image on a page and lets you download them in bulk with filters for size and type. A considerable time saver during a migration, and a reminder that everything you publish is trivially downloadable.
SVG Grabber
Shows every SVG on a page and lets you download them individually or as a set. Vector, so it stays sharp at any size.
Worth being clear about the ethics: this makes taking someone else’s icons very easy. Taking your own icons back off a site you no longer have files for is the legitimate use, and it is a common one.
HTML to Figma
Imports a live web page into Figma as editable layers. It will not produce a tidy file, and it will not respect your component structure, but as a starting point for redesigning an existing page it saves an hour of rebuilding boxes.
Which of these you actually need
If you install four, install these.
| If your job is | Install | Because |
|---|---|---|
| Front-end development | Web Developer, CSS Viewer, Window Resizer | Inspecting, breaking and resizing things quickly |
| Visual design | WhatFont, ColorZilla, Page Ruler | Reading type, colour and spacing off any page |
| Rebuilding an existing site | Wappalyzer, CSS Peeper, SVG Grabber | Working out what it is and recovering the assets |
| Client work and handover | GoFullPage, Image Downloader | Capturing and collecting without asking for access |
A note on extension permissions
Every extension here asks to read the content of the pages you visit, because that is the only way any of them can function. That is a real permission and worth a moment’s thought rather than a reflexive click.
Three habits that cost nothing:
- Install from publishers with a visible history, not from whichever result has the shiniest icon.
- Remove extensions you stopped using. An abandoned extension can be sold, and the new owner inherits its permissions on your machine.
- Do not run browser extensions that read page content on a machine handling client credentials, unless you know exactly what each one is.
None of this is a reason to avoid extensions. It is a reason to keep the list short, which is the argument of this entire article.
Frequently asked questions
What are the best Chrome extensions for web developers?
Web Developer for general utilities, CSS Viewer or CSS Peeper for reading styles, Window Resizer for responsive checks, and Wappalyzer for identifying what a site is built with. Four covers almost every day-to-day need; the rest are situational.
What Chrome extensions do designers actually use?
WhatFont for identifying type, ColorZilla for picking colours, Page Ruler for measuring spacing, and GoFullPage for capturing whole pages. Designers rebuilding an existing site usually add SVG Grabber and HTML to Figma.
Is there a good CSS Peeper alternative?
CSS Viewer is the closest lightweight alternative. It shows computed CSS on hover in a floating panel, without CSS Peeper’s asset panel and styled presentation. Chrome’s built-in inspector does the same job for free if you do not mind a few more clicks.
How do I download SVGs from a website?
SVG Grabber lists every SVG on the page and lets you download them individually or together. The browser inspector can also do it manually: find the element, copy its markup, and save it as a .svg file. Only take assets you have the right to use.
Do Chrome extensions slow down the browser?
Some do, particularly any that inject scripts into every page. The practical fix is to keep the number small and disable the ones you only need occasionally, turning them on when required rather than leaving a dozen running permanently.
Are Chrome extensions safe to install?
Most are, but every extension on this list can read the pages you visit, which is how it functions. Install from recognisable publishers, remove what you no longer use, and be cautious on machines that handle client logins or payment details.
