Skip to content

6 Useful Chrome Extensions For Web Designers

 

Web Developer Toolbar / Built in Developer tools

WebDevTools

There are a lot of different developer extensions but personally I use the built in developer tools. You can do a lot of different things with the developer tools extension, but what I use it the most for is checking HTML and CSS code. Instead of going through your CSS stylesheets you can highlight the object you want to find the code for. To check if it’s the right code or to check what changes you want to make, you can edit the code right in the browser instead of going to your stylesheet -> edit and save -> back to the page and refresh. A real time saver!

Wappalyzer

Wappalyzer

Wappalyzer uncovers the technologies used on websites. It detects e.g. content management systems, eCommerce platforms, web servers, JS frameworks, analytics tools etc. Great way to see how something is built.

Page Ruler

PageRuler

Ever wondered how wide or tall an element in your browser is? Just click the Page Ruler and measure it. Or you want to see if 1000px is too wide for your laptop screen? Just fill in 1000px in the field and have a look.

ColorZilla

ColorZilla

 

Great extension for finding the right colors for every occasion. Find a great color on a website that you would like to use – use ColorZilla, want a cool yellow color but don’t want to open Photoshop or go to a different website to find it – use ColorZilla. The best thing is that the extension saves the colors you have picked. The extension has a few other features as well, but these are my favorites.

User agent switcher

UserAgentSwitcher

All web designers and developers know the struggles of testing in different browsers. Don’t want to have all browsers installed or check on your phone all the time? No problem, use user agent switcher and check your pages inside chrome.

You can view pages in Chrome, Internet Explorer, Opera, Firefox, Safari, iOS, Android and Windows Phone. For some browsers you can choose versions as well, e.g. Internet Explorer from version 6 to version 10.

Full pagescreen capture

FullScreenCapture

Have you ever tried to capture a full size web page with the print screen function where you had to take a print screen, scroll down and take another print screen and then cut and paste them together? The Full pagescreen capture extension will do this for you in just one click. Once the extension has captured your page, it will open the image in a new tab.