Resources / Chrome Extensions
WhatFont and Wappalyzer let you instantly inspect any page's tech stack, ColorZilla extracts color values at a glance, and React Developer Tools together with Lighthouse are essentials for any frontend workflow.
Quick Guide
Use CodeHelper's tools when you need:
- •Privacy & offline processing
- •No account or signup required
- •Fast, client-side operations
Use external tools when you need:
- •Team collaboration features
- •Cloud storage & synchronization
- •Extensive template libraries
All Tools
WhatFont
The easiest way to identify fonts on web pages.
WhatRuns
Discover what runs a website. Frameworks, Analytics Tools, WordPress Plugins, Fonts: you name it.
Web Developer
Adds a toolbar button with various web developer tools.
Awesome Screenshot & Screen Recorder
Full page screen capture and screen recorder: 2 in 1. Share screencast video instantly.
News for Busy Developers
Get programming news with zero effort. Simply open a new tab, and you’re all set. A must-have tool for busy developers!
JSONView
Validate and view JSON documents.
JSON Lite
Browser extension for viewing JSON files.
Window Resizer
Resize the browser window to emulate various screen resolutions.
Responsive Viewer
Show multiple screens at once : responsive design tester.
BrowserStack
Instantly test your webpage on any desktop or mobile browser.
VisBug
Open-source web design debug tool built with JavaScript.
Kontrast: WCAG Contrast Checker
Quickly check and adjust contrast in real time to meet WCAG 2.1 requirements.
PerfectPixel
Adds a semi-transparent image overlay to perform pixel-perfect comparisons.
Pesticide
Outlines all HTML elements to visualize layout structure : great for debugging.
Site Palette
Grab color palettes from any website.
ColorZilla
Advanced Eyedropper, Color Picker, Gradient Generator and other color tools.
Lorem Ipsum Generator
Quickly create Lorem Ipsum or custom placeholder text.
JavaScript and CSS Code Beautifier
Beautify CSS, JavaScript, and JSON code directly in the browser.
Imageye: Image Downloader
Find and download all images on a web page easily.
GoFullPage: Full Page Screen Capture
Capture an entire web page as a screenshot : simple and reliable.
Stylebot
Change the appearance of any website instantly.
ColorPick Eyedropper
A zoomed eyedropper & color chooser tool.
React Developer Tools
Inspect React component hierarchies in Chrome DevTools.
Wappalyzer
See what technologies any website uses.
Fake Filler
Fills all form fields with dummy data automatically.
Page Ruler Redux
Measure elements on a web page with pixel precision.
Web Editor
Inspect, edit, and restyle any web page visually.
CSSViewer
View CSS properties of any element quickly.
Fonts Ninja
Identify and preview fonts from any website.
Lighthouse
Audit performance, accessibility, and SEO of any site.
Debug CSS
Add outlines to all page elements to debug CSS layout.
Angular Developer Tools
Inspect Angular component states and structure easily.
Best Chrome Extensions for Web Developers & Designers
Chrome extensions for developers can dramatically boost productivity by bringing debugging tools, design inspectors, accessibility checkers, and performance auditors directly into your browser. The right set of browser extensions makes your daily development workflow faster and more efficient.
CodeHelper's curated Chrome extensions collection covers the must-have productivity tools, design extensions, code validators, color pickers, and developer tools that every web developer and designer should have installed.
What to look for in developer Chrome extensions
- DevTools integration: Extensions that add panels to Chrome DevTools (React DevTools, Vue devtools) provide the deepest inspection capabilities.
- Performance impact: Avoid installing too many extensions simultaneously as they can slow page loads; enable them as needed.
- Maintenance status: Check that extensions are actively maintained and updated for recent Chrome versions to avoid compatibility issues.
How to use this resource collection
- Browse the curated list of Chrome extensions below.
- Click any extension to open its Chrome Web Store page in a new tab.
- Use the search bar to filter by name or description.
Whether you are looking for web development extensions to speed up debugging, design extensions for inspecting styles, or productivity tools to streamline your workflow, this collection covers all the essentials.