While Chrome’s Dev Tools gives you more than enough utilities to cover most of your design and development requirements, by adding extensions you can extend the browser’s functionality even further with free to use extensions.
Depending on your needs, and by selecting the perfect extension, you can easily create a personalized working environment that will greatly improve your productivity.
You may also like these 20 Firefox Extensions for Web Developers.
The 25 Chrome extensions we have selected for you below have been categorized into the following categories: Frontend Extensions, Live Editors, Validators & Performance, Measuring Extensions, Color Tools, Type Playgrounds & Font Testers and Useful Utility Extensions.
Useful Frontend Chrome Extensions
SnappySnippet is a DevTools extension that will extract CSS & HTML from a selected DOM subtree, allowing you to then send the code to CodePen, jsFiddle or JS Bin.
MagiCSS is a live CSS editor extension, with an inbuilt editor, that will also beautify and minify your CSS. It can also create GitHub Gist.
CSS Dig finds and groups stylesheets and style blocks on most websites, giving you an easy way to analyze the code and plan refactors.
There are many other tools and extensions that will perform the simple task that CSSViewer does. They’ll probably do it better as well. But no Chrome extension collection would be complete without its inclusion. So easy to use, all you have to do is click the toolbar icon and hover over any element on you want to inspect.
CSS-Shack is an extension that allows you to create layers styles (just like you do with image editing applications), and export them into a single CSS file.
CSS3 Generator, as the name suugests, will generate all the code you need for your CSS.
CSS Shapes Editor
CSS Shapes Editor is a Chrome DevTools extension for live editing of CSS Shapes property values.
Live Editor Extensions
WordPress Style Editor
With WordPress Style Editor you can inspect your WordPress stylesheets and make direct edits to the CSS of your theme.
PageEdit will will change Chrome into WYSIWYG HTML editor allowing you to edit any web page.
Validators & Performance Extensions
Perfmap is an extension that will create a performance heatmap of the frontend of your site checking the timing of the resources that are loaded in the browser using the Resource Timing API.
Validity is an extension that will help you validate any web page. The extension will display the number of errors in the tool tip and the details can be viewed in the console tab.
Visual Inspector is a Chrome extension for designers to make temporary edits on websites without coding.
Web Developer Checklist
Web Developer Checklist is must-have extension that checks any web page for errors and violations of common best practices.
Bootlint This Page
Check My Links
Check My Links will scan any given web page and will highlight both valid (in green) and broken (red) links. Nobody likes broken links!
Dimensions is a simple, yet super-useful tool that will measure screen widths and heights for you.
Originally developed for Firefox, ColorZilla adds a multitude of color tools, like an eyedropper, color picker, pallette viewer and a gradient generator, to Chrome.
Created by Color Hunt, Color Tab is a color inspiration extension that will give you a beautiful new color scheme everytime you open a new tab.
Type Playgrounds & Font Testers
Fontface Ninja is a handy extension that will identify any font, also giving you the size and line-spacing, from any web page. You can then test the discovered fonts out.
TypeWonder allows you to test web fonts on any web site. Enter the site URL and preview the fonts instantly.
Useful Utility Extensions
To ensure that your text remains readable across all device sizes, 45to75 will count the number of characters, ensuring they’re between 45 and 75 characters, to help you optimize line length.
PerfectPixel is an extension that will let you to place a semi-transparent image overlay over the top of the developed HTML, allowing you to perform a per pixel comparison between them.
ZenHub is a project management extension for GitHub. It will add time-saving features, like drap-drop task boards and to-do lists, to help improve your GitHub productivity.
Minimalist Markdown Editor
The Minimalist Markdown Editor Chrome Extension allows you to preview Markdown syntax as you type. You can also quickly convert the Markdown into HTML.
Developed by Facebook, fb-flo is a Chrome extension that will allow you to edit running apps without having to reload. You can live edit JS, CSS, images, or any static resource.
If you’re not currently using Web Developer, then why not? It’s by far and away the most popular developer extension on both Chrome and Firefox. It adds a wide array of super-useful tools to the browser that every web designer and developer needs, and a bunch that you probably didn’t even know you needed.
MySQL Admin is a powerful Chrome extension to make managing MySQL databases much easier for you.
To get more out of Chrome, you might like to take a look at DevTools Tips, it’s a curated collection of essential Chrome Developer Tools tips and tricks. If you’re a designer or developer that would like to stay up-to-date with the latest design and dev news you should try the Muzli or the Panda Chrome extensions.
And if you’re looking for Firefox extensions for designers and developers, you might like to try this post: 20 Firefox Extensions for Web Developers.
- 6 Lesser Known Alternative Browsers to Chrome and Internet Explorer
- COVID-19 Has You Working from Home: Now What?
- 8 Fantastic Examples of CSS & JS Weather Widgets
- How Web Designers Can Help in a Crisis
- Manage Cloud Identity and Access with Teamstack Sponsored
- Test in Production with CloudBees Rollout Feature Flags Sponsored
- Why In-Person Conferences Are Still Relevant for Web Designers
- The 10 Best Web Design Podcasts for 2020