15 Essential Chrome Extensions for Web Developers

15 Essential Chrome Extensions for Web Developers

Play this article

1. daily.dev | The Homepage Developers Deserve:

daily.dev is the fastest-growing online community for developers to stay updated on the best developer news. Get all the content you love in one place collected from +400 sources, and get a feed of the hottest developer news personalized to you.

2. Lighthouse

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

When auditing a page, Lighthouse runs a barrage of tests against the page and then generates a report on how well the page did. From here, you can use the failing tests as indicators of what you can do to improve your app.

3. React Developer Tools

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

4. VisBug

VisBug is an Open source web design debug tool built with JavaScript. Using this, you can Point, click, move, resize, Edit or style any page, in any state, inspect styles, spacing, distance, accessibility and alignment, and Nitpick layouts & content, in the real end environment, at any device size, Leverage adobe/sketch skills, edit text, replace images and much more.

5. Amino: Live CSS Editor

Amino is a free browser extension that lets you write and apply custom CSS to any website, allowing you to customize colors, fonts, page layout and more. Your custom CSS is stored in the cloud and is loaded every time the page is viewed, allowing you to permanently customize your experience of any site you want. See your custom CSS in action on any desktop browser where Amino is installed.

6. HTML to Figma - by Builder.io

Use this extension to capture your current page and import it as editable Figma layers! You can easily import real live site styles as a starting point for designs and prototypes, quickly turn real site components into design components, easily import components from the storybook and much more.

7. CSS Peeper

CSS Peeper is an extension using which you can extract CSS and build beautiful style guides, you can also inspect styles in a simple, well-organized & beautiful way. CSS Peeper is a CSS viewer tailored for Designers.

8. WhatFont

WhatFont is the easiest way to identify fonts on web pages. With this extension, you could inspect web fonts by just hovering over them. It is that simple and elegant. It also detects the services used for serving web fonts. Supports Typekit and Google Font API.

9. BrowserStack

With BrowserStack, you can instantly test your webpage on up to 12 of any desktop or mobile browser. Your webpage will be launched in the combination selected. Test this webpage using BrowserStack’s Dev Tools, check page behavior in real user conditions and file bugs directly.

10. HTML Validator

HTML Validator for Chrome is a browser extension that adds HTML validation inside the Developer Tools of Chrome. The number of errors of an HTML page is seen with an icon in the browser status bar. The details are seen in the developer tools.

11. Colorzilla

ColorZilla, is one of the most popular Firefox developer extensions with over 5 million downloads, With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You will get an eyedropper, an advanced color picket, the ultimate CSS gradient generator, and much more.

12. Wappalyzer

Wappalyzer is more than a CMS detector or framework detector: it uncovers more than a thousand technologies in dozens of categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN and others. Wappalyzer is more than a CMS detector or framework detector: it uncovers more than a thousand technologies in dozens of categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN and others.

13. WhatRuns

WhatRuns can Discover what runs a website. Frameworks, Analytics Tools, WordPress Plugins, Fonts - you name it. WhatRuns extension is one click away for you to find technologies used on any website you visit. From Developer Tools and Ad Networks to WordPress Plugins and Themes, we detect even new and upcoming tools and services.

14. ModHeader - Modify HTTP headers

With the help of ModHeader extension, you can Modify HTTP request headers, response headers, and redirect URLs. It can Add, modify, and remove request and response headers, Use ModHeader to set X-Forwarded-For, Authorization, Access-Control-Allow-Origin, Content-Security-Policy, and your custom headers, Modify cookies in request/response header, Advanced Content-Security-Policy editor, Redirect URL to another.

15. JSON Formatter

JSON Formatter, Makes JSON easy to read with this cool Open source extension. It can auto-format JSON when you load it in a browser tab. It comes with syntax highlighting, clickable URLs, a collapsible tree with indents, and fast loading performance.

This is the end of the list.

Any thoughts? Write it down in the comments.

For more such crispy blogs daily, follow Dev.Junction, subscribe to our newsletter and get notified.

Did you find this article valuable?

Support Dev.Junction by becoming a sponsor. Any amount is appreciated!