Chrome Extensions

37 resources

Browser extensions put design and debugging tools one click away while you browse. This category lists Chrome extensions for identifying fonts with WhatFont and Fonts Ninja, detecting a site's technology with Wappalyzer and WhatRuns, picking colors with ColorZilla and Site Palette, editing pages visually with VisBug, and framework devtools for React, Angular and Redux.

For layout work, Pesticide and Debug CSS outline every element so you can find the one breaking a layout, PerfectPixel overlays a design mockup on the live page for pixel comparison, and Page Ruler Redux measures elements. Responsive Viewer and Window Resizer show multiple screen sizes, and GoFullPage captures full-length screenshots.

For quality checks, Kontrast tests color contrast against WCAG, the Statable WCAG Checker runs axe-core on the current page, UX Check guides a heuristic review, and SEO Minion checks on-page SEO and broken links. Lighthouse is also built into Chrome DevTools. Extensions can read page content, so install only what you use and review permissions, especially on work accounts.

WhatFontchrome.google.com

The easiest way to identify fonts on web pages.

WhatRunschrome.google.com

Discover what runs a website. Frameworks, Analytics Tools, Wordpress Plugins, Fonts - you name it.

Web Developerchrome.google.com

Adds a toolbar button with various web developer tools.

JSONViewchrome.google.com

Validate and view JSON documents.

JSON Litelauriro/json-lite

Browser extension for viewing JSON files.

Open source0updated 1y ago

Window Resizerchrome.google.com

Resize the browser window to emulate various screen resolutions.

Responsive Viewerchrome.google.com

Show multiple screens once, Responsive design tester

BrowserStackchrome.google.com

Instantly test your webpage on any desktop or mobile browser.

VisBugchrome.google.com

Open source web design debug tool built with JavaScript

Open source

PerfectPixelchrome.google.com

Adds a semi-transparent image overlay over the top of the developed HTML to easily perform pixel perfect comparison between them, useful for replicating UI designs.

Pesticidechrome.google.com

Inserts the Pesticide CSS into the current page, outlining each HTML element to better see placement on the page, helpful for building layouts.

Site Palettechrome.google.com

A must-have tool for designers and frontend developers to grab colors for any website.

ColorZillachrome.google.com

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies

Imageye - Image downloaderchrome.google.com

Find and download all images on a web page. With Imageye you can find, browse and download all the images present in a web page.

Stylebotchrome.google.com

Change the appearance of the web instantly.

ColorPick Eyedropperchrome.google.com

A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.

React Developer Toolchrome.google.com

React debugging tools to the Chrome Developer Tools. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

Wappalyzerchrome.google.com

Wappalyzer is a technology profiler that shows you what websites are built with.

Fake Fillerchrome.google.com

Fake Filler a form filler that fills all inputs on a page with fake/dummy data.

Page Ruler Reduxchrome.google.com

A Web Developer\Designer ruler to get perfect pixel dimensions and positioning to measure elements on any web page.

Web Editorchrome.google.com

The web editor is the tool that provides you with an enhanced way to inspect any website elements, alter their properties, insert contents, design, and visualize the way you want to see them.

CSSViewerchrome.google.com

A simple CSS property viewer.

Fonts Ninjachrome.google.com

Identify fonts from any website, bookmark, try, and buy them.

Lighthousechrome.google.com

An open-source, automated tool for improving the performance, quality, and correctness of your web apps.

Open source

Debug CSSchrome.google.com

Adds outline to all elements on the page to show the culprit element which is changing desired layout. Helps in debugging CSS of the page

UX Checkchrome.google.com

Identify usability issues through a heuristic evaluation.

Angular Developer Toolchrome.google.com

Angular DevTools allows you to understand the structure of your application and preview the state of the directive and the component instances.

Redux Developer Toolchrome.google.com

Redux DevTools provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state.

Hackertab.devchrome.google.com

Hackertab helps developers stay up-to-date with the latest dev news and resources in one tab.

JSON Formatterchrome.google.com

Formats and colors JSON content for better readability. It can also collapse and expand nested structures.

SEO Minionchrome.google.com

A SEO tool that includes features like on-page SEO analysis, broken link checking, and SERP preview and more.

Statable WCAG Checkerchromewebstore.google.com

Free accessibility checker that runs axe-core on the current page and lists WCAG 2.0/2.1/2.2 A and AA issues in a side panel, each with the rule and a link to the fix. Also for Firefox and Edge.

Free

Built on the open bradtraversy/design-resources-for-developers list by its contributors, licensed MIT. Design Resources for Developers is an independent project, not affiliated with the list's maintainers.

About Synced Oct 16, 2026

© 2026 Design Resources for Developers

Esc

Type to search every entry. ↑↓ to move, Enter to open.