Design a site like this with WordPress.com
Get started

Chrome Extensions For The Web Designer

  1. WhatFont
    • Identifies fonts on web pages. Firebug and webkit inspector are easy for developers. It also the services used for serving web fonts. Supports Typekit and Google Font API.
  2. Ruul. Screen Ruler
    • Simple on screen ruler for lining up and measuring type, line height, strokes and just about anything on web. Ruul has 4 different coloured ruul, steel and wooden ruul included
  3. Screen Capture (by Google)
    • Capture visual content of a tap region of web page, or whole page as PNG image. Supports horizontal and vertical version scroll. Highlighting, redacting, and adding text are supported. Fast at capturing image and does detect floating images and when capturing a whole page the floating text will only be captured once. Works on Linux, Windows, and Mac
  4. Image Downloader
    • If you need to download bulk images from a web page, with this extension you can see what the image is linked too and what it contains. Filter or sort them by URL; also supports wildcards and regular expressions, optionally show what image is linked too, show images downloaded from the checkboxes or directly clicking on the image, dedicated buttons to download or open in new tab, customize display width, border size, style and color, hide filters, buttons and notifications you don’t need.
    • The “Download” button, all selected images are saved to the default download directory of Chrome. Don’t have one, you will have to manually choose the save location for each image.
  5. Evernote Web Clipper
    • Save content from all over the web in your account. One click, clip part or all of any webpage, including text, images, and links. Collect everything that inspires you online. Have it forever, even if the original goes away.
  6. RescueTime For Google Chrome
    • Personal-analytics service that helps you understand how you spend your time. No manual data-entry required. The web-application works hand-in-hand with the installable client available for OS X, Windows, Linux, Android devices, and ChromeOS.
  7. Pinterest For Google Chrome
    • Tool to find your inspiration and share it with others. Use it to collect things you love, organize and plan important projects, and more. The extensions for Chrome allows you to save anything from the web quickly and with ease.
  8. Web Developer
    • Toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.
  9. Stylebot
    • Allows you to quickly manipulate the appearance of any website (using custom CSS). Pick an element and choose any changes you want to make from the editor. You can change the font size, color, margins, visibility and a lot more. The advanced users can also write the CSS manually. You can personalize the look and feel of your favorite websites. It is also a great tool to learn CSS and for debugging your own site’s design.
  10. Alexa Traffic Rank
    • Alexa Internet’s free extension for Chrome, and is the only extension that includes you in Alexa’s traffic panel. The Alexa extension accompanies you as you surf, providing you with Alexa data about the sites you visit without interrupting your browsing.
  11. Eyedropper
    • Open source extension which allows you to pick colors from web pages, color picker and your personal color history. For Google Chrome and Chromium, allows you to pick color from any webpage or from advanced color picker. It is great tool for web developers.
  12. Resolution Test
    • For developers to test web pages in different screen resolutions, with an option to define your own resolutions. Changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size. Check out http://browsersize.googlelabs.com/ for more information on this.
  13. Speed Tracer
    • Tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. You are able to get a better picture of where time is being spent in your application. This includes problems caused by: Javascript parsing and execution, Layout, CSS style recalculation and selector matching, DOM Event handling, Network resource loading, Timer fires, XMLHttpRequest callbacks, Painting and more.
  14. Firebug Lite For Google Chrome
    • Not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elements with your mouse, and live editing CSS properties.
  15. Corporate Ipsum
    • lorem ipsum generator with a corporate bent. Generates filler content by the word or paragraph. This is a clone (with permission) of Brian Haslanger’s Corporate Ipsum dashboard widget for Google Chrome. Efficiently create enterprise potentialities whereas interoperable e-commerce. Globally fabricate worldwide solutions via principle-centered human capital.
Advertisement

Published by Sarah

Hello! I'm a self-employed entrepreneur. I enjoy affiliate marketing and photography in my spare time. I am currently in college for communications in social media and working towards my undergraduate degree in graphic design.

%d bloggers like this: