Chrome's Dev Tools are great, but it's possible to add even more exciting features to your internet browser to make web design and development easier.
There are of course, a ton of other tools around to speed things up, see our favourite web design tools (opens in new tab) post. For now, though, here are 30 of our favourite Chrome extensions for web designers and developers.
01. Simplify Gmail
If you're finding Gmail's getting a bit too messy for its own good, say hello to Simplify Gmail (opens in new tab), which sweeps away all the debris and bad UI decisions that have crept into it over the past few years. Created by Gmail's former lead designer, Michael Leggett, it gets rid of all the distracting clutter and gives you a more stripped-back and functional version.
Colour blindness of some sort affects around 200 million people worldwide, but catering for them is often low on designers' accessibility checklist. With Spectrum (opens in new tab), though, you can quickly test your site against different types of colour vision deficiency and ensure that everything's clear.
03. CSS Scan 2.0
Chrome's Dev Tools are a handy way of checking under the bonnet to see how a site works, but CSS Scan 2.0 (opens in new tab) is even easier if it's CSS you want to look at. Hover over any element and its CSS will appear in a pop-up view, enabling you to copy its rules in a single click. You can use it to copy particular elements from themes or templates to adapt for your own use, and it's great for debugging your own code.
Here's another great CSS tool. Amino (opens in new tab) is a live CSS editor that lets you generate style sheets in the browser and apply them in realtime to web sites. It effectively allows you to make permanent design changes to any site you visit, and if you're signed into Chrome with your Google account then the style sheets will be synced so that they're accessible from Chrome on all your desktop devices.
Responsive web design (opens in new tab)'s a given these days, and it you want a straightforward way to check your designs across multiple viewports, Sizzy (opens in new tab)'s worth a look. It'll show you an interactive view of your page rendered on a number of different device screen sizes, and you can also show and hide a simulated device keyboard, and switch between portrait and landscape modes.
06. Site Palette
The next time you see a site that makes great use of colour, here's a simple way to take advantage of it. Site Palette (opens in new tab) extracts the main colours from a website and generates a shareable palette that you can easily show to collaborators. You can also download a Sketch template, and there's Adobe Swatch support, too.
Making sure that all the links on your site actually work is an instant usability win and it's a good way to improve your SEO, too. Checkbot (opens in new tab) is a Chrome extension that checks for broken links, duplicate titles, redirect chains, invalid HTML/JS/CSS and more, so you can quickly audit your site for bad links and get them fixed.
It is a truth universally acknowledged that by the time you've had Chrome open for a couple of hours it'll be a confusing nest of tabs the width of your little finger. Toby (opens in new tab)'s a great way to tame them; with it you can organise all those tabs into collections of links as an alternative to loads of individual bookmarks, making them much easier to manage.
Radically speed up the processes of styling elements with DomFlags (opens in new tab), a truly great extension that lets you create keyboard shortcuts for DOM elements. It's like having bookmarks for navigating the DOM; this will change the way you work with DevTools.
10. Highly Highlighter
Here's an interesting way to bring people into a discussion: Highly (opens in new tab) lets you share highlights from articles on the web, so you can draw attention to the most significant bits of writing.
Next: 10 more Chrome extensions