11 Best Chrome Extensions for Web Designers and Developers

    06/08/2015

    1. WhatFont

    chrome-dev-whatfont

    WhatFont is a great tool for spotting the different types of fonts on a webpage simply by hovering yourmouse 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.


    2. StyleBot

    chrome-dev-stylebot

    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

    chrome-dev-builtwith

    BuiltWith Profiler is used to check what technologies a website is built on.

    Once you click on the icon in the Chrome bar, it pops up a tray where you can see the different technologies a website uses such as Web Server, Content Delivery Network, Content Management System, JavaScript Libraries and functions and a lot more.

    This can help you decide which ones to implement on your own web projects.


    4. Web Developer

    chrome-dev-web-dev

    Web Developer is an extension for Chrome that was ported from the popular Firefox version.

    It brings a wealth of tools to your browser including the options to switch between stylesheets, disable JavaScript, show hidden elements or populate forms.

    There are a ton of goodies here for testing your code or experimenting, so be sure to check it out.


    5. ColorZilla

    chrome-dev-colorzilla

    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)

    chrome-dev-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

    chrome-dev-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.


    8. YSlow

    chrom-dev-yslow

    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

    chrome-dev-web-dev-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

    chrome-dev-stackoverflow

    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

    chrom-dev-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.

    11 Best Chrome Extensions for Web Designers and Developers