Developing a good website that adheres to the widely accepted “best practices” can be super hard, and sometimes debugging to fix faults in your code is even harder.
Thankfully, there are several extensions available in the Chrome webstore that can greatly increase productivity and make life easier when working on websites and browser-based applications.
Here are eleven of the best of Chrome extensions for web designers and developers:
WhatFont is a great tool for spotting the different types of fonts on a webpage simply by hovering your mouse on them.
When you click on the font, it gives you additional information on its exact type, size and line height. So simple and elegant.
StyleBot is a CSS extension for web developers. It helps you customize the appearance of any website by picking the element and changing it’s style from the editor.
There is also an advanced CSS tab where you can write your own rules directly. It’s especially useful for people who are just learning CSS.
3. BuiltWith Technology Profiler
BuiltWith Profiler is used to check what technologies a website is built on.
This can help you decide which ones to implement on your own web projects.
4. Web Developer
Web Developer is an extension for Chrome that was ported from the popular Firefox version.
There are a ton of goodies here for testing your code or experimenting, so be sure to check it out.
ColorZilla is a wonderful extension for web designers who want to check out the exact color of websites they like.
With it you can get a color reading from any point in your browser and copy the Hex or RGB value for pasting into another program.
There are several other features like Eyedropper, Palette Viewer, CSS Gradient Generator, Picked Color History and a webpage color analyzer which provides a palette for any website.
6. Capture Page Screenshot (FireShot)
FireShot does a very simple job. It allows you to take a screenshot of different parts of a webpage or the entire webpage itself and export to PDF, JPEG, GIF, PNG or BMP.
7. Page Ruler
Page Ruler allows you to measure the width, height and position of any element on a webpage by drawing a ruler around the element and resizing to your heart’s desire.
You can also change to “Element Mode” to outline each element on a page as you mouse over them.
YSlow helps you speed up your websites by analyzing your page and suggesting ways to improve performance.
It tests your pages against a predefined set of rules which are widely accepted and summarizes your page’s load time, site components and statistical charts.
9. Web Developer Checklist
This handy tool checks your webpages to ensure that they follow best practices regarding SEO, HTML validation, Mobile responsiveness, usability and speed.
You can also visit the developer’s website for a more in-depth checklist.
10. Search Stack Overflow
Search Stack Overflow is a very simple extension that adds a search box to your browser for looking up topics on Stack Overflow.
You can search for virtually anything related to web development or programming in general and you will most likely find a good resource to solve your issues.
11. Check My Links
Check My Links Chrome extension helps to detect broken links on your webpage.
Once you have it installed, click the icon on the chrome bar, and it’ll pop up a results pane where you can see the total number of links on the page and if there are any broken ones.
It also highlights all the good links in green and broken ones in red for easy spotting.
There is no denying that all these great Chrome extensions have greatly reduced the drudgery of designing or developing web applications. If you do not have some or any of these already, you’re missing out on a lot, so please try out the ones relevant to you and experience a faster way to work right from within your web browser.
What other Chrome extensions do you use? Share them with us in the comments section below.