Chrome's DevTools are great, but it's possible to add even more exciting features to your internet browser to make web design and development easier. Here are 29 of our favourite Chrome extensions for web designers and developers.
Responsive web design's a given these days, and it you want a straightforward way to check your designs across multiple viewports, Sizzy'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.
02. 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 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 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'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, 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.
Here's an interesting way to bring people into a discussion: Highly lets you share highlights from articles on the web, so you can draw attention to the most significant bits of writing.
Booom makes Dribbble better by showing larger shots in lists; putting Like and Add to Bucket buttons in lists; making GIFs autoplay and bringing infinite scroll.
This powerful Chrome extension enables you to create designs then export them into a CSS file for use on your site. It supports layers and contains a plethora of the tools that you're used to from your regular photo editor.
This brilliant extension will take your code and output snapshots for your demos and mockups. You can also add themes and effects to create images for promo and your online portfolio.
As a web developer, you may be required to test your webpages. Repeating the same actions over and over again can be a tiresome process. iMacros is a handy Chrome extension that lets you record your actions and save them so you only need to do them once. After that you can test your pages over and over again, repeating the action with a click of a button. It saves valuable time, freeing up your time so you can concentrate on more pressing matters.
Next: 10 more Chrome extensions