32 Google Chrome Extensions For Smart Designers

Posted in Web Design4 years ago • Written by 33 Comments

Google chrome is a relatively new web browser but it has already gained huge popularity with its great speed and features. Web developers must work more faster and more productively – what could help more than these extensions aimed to ease your daily development process and save time.

At least for me – none of extensions have made browser load speed slower – I cannot say this about Firefox though, which I don’t use anymore. Scroll through this list – I am sure you will find at least few new extensions to use daily!

1. FireBug Lite

I hope we all know FireBug addon for FireFox, so here is the same extension but only for Chrome. Firebug Lite is a tool for web developers, that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

2. Resolution Test

Resolution Test changes the size of the browser window for web developers to preview websites in different screen resolutions. It includes a list of commonly used resolutions as well as a custom option for you to input your own.

3. Speed Tracer

Speed Tracer is a 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. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Using Speed Tracer 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 …

4. Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox written by the same person.

5. Pendule

Use this extension in addition to the built-in Developer Tools. This tool is so similar to FireBug. You can just press mouse button and inspect the element.

6. Aviary Screen Capture

Take a screenshot of any webpage and edit it directly in your browser with Aviary.com applications. Plus convenient access to the Aviary website and tools.

Features:

  • Save to desktop, host online, or edit in other Aviary apps.
  • Captures instantly.
  • Screen capture of the visible portion of all web pages and images.
  • Add visual notes like arrows, text and highlights to your capture.
  • Crop your capture.
  • Resize, rotate and flip your capture.
  • Smart select and move of captured elements.
  • Grab color information from the page.
  • Quick launch 6 Aviary design tools: Image editor, markup editor, vector editor, color palette editor, effects editor & audio editor.

7. Chrome Web Developer Tools

This extensions developers are trying to get this as close as possible to “FireFox Web Developer” addon. This extension made easy the web development.

8. Chrome Sniffer

Chrome Sniffer will help web developer to inspect web framework / CMS and javascript library running on current browsing website. An icon will appear on address bar indicates the detected framework. Great way to know what source site is using (if source is opensource and it is popular).

9. Lorem Ipsum Generator

It generates random “Lorem Ipsum” text, it allows to choose words per paragraph and number of paragraphs.

10. PlainClothes

Unstyle the web with this tool. PlainClothes makes everything as possible closer to default or your wanted style. Just imagine – text is black, backgrounds are white, unread links are blue, visited links are purple, all links are underlined or any other colors you like. And all text is rendered in your default fonts (as defined in “Options” > “Under the Hood” > “Change font and language settings”). Everywhere. Automatically.

This is how 1stwebdesigner.com looks using this tool:

11. Internet Explorer Tab

Internet Explorer Tab shows IE in Google Chrome. Very simple extension. I think it’s very useful to not to use IE.

12. Chrome SEO

The Google Chrome SEO Extension provides easy access to Search Engine Optimization Tools that can help you with Competitive Analysis, Keyword Research, Backlink Checks, PageRank Checks and other daily SEO tasks.

13. SEO Site Tools

It validates CSS and HTML, displays server software, checks for gzip compression, page headers and shares even more on-page suggestions based on accepted SEO knowledge. It can disable right-click scripts, and does window resizing to see where fold would be on different size monitors. Fast clean simple UI with a wealth of SEO information makes doing a quick consult fast and easy.

14. META SEO Inspector

Meta data is not just the usual HTML meta tags, but the XFN tags, various microformats, the recently introduced canonical attribute, the no-follow links and so on.

15. Validity

Validity can be used to quickly validate your HTML documents from the address bar.

Just click the icon in the address bar to validate the current document without leaving the page. The number of validation errors can be seen in the tool tip.

Validity also gives you the option to use your own installation of the W3C Validation Service. (For more information on installing the W3C Validation Service see the documentation at http://validator.w3.org/docs/install.html).

16. Eye Dropper

Eye Dropper and Color Picker extension which allows you to pick color from any webpage or from advanced color picker.

17. Color Picker

Quickly get the Hex and RGB values of any color! Also adjust Hue, Saturation, and Balance.

18. Image Cropper

This extension help you to crop any images on the fly.
It’s especially useful when you need to crop your online album photo for IM thumbnail.

  • Crop images in img html element
  • Crop css background images for any html element
  • Cropped Image is in PNG format
  • Right click on top of the selection to “save as” the cropped image.

19. Webpage Screenshot

Makes screenshot of whole page even if page is very long.

20. Picnik

The Picnik Extension for Chrome lets you easily edit the images you come across while browsing the web. With a click you can create a snapshot of your current web page and open it in Picnik for easy editing, annotation and sharing. Do the same for all the image on the current page — just pick the image from the dynamic hot list and then edit, annotate and share with Picnik. It is a great replacement to PhotoShop!

21. MeasureIt!

Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.

22. Pixlr Grabber

Grab visible screen, select part or entire page. Share screen to Pixlr imm.io, edit screen in Pixlr editor or save to desktop. This is one of the few who can capture the entire screen, however since Chrome just supports canvas in png the images created gets quite large and takes a while to process.

23. Domain Availability Checker

Quickly check if domain name is already taken or not.

24. Snippy

Snippy allows you to grab snippets of web pages, save them for future use and upload them to Google Docs.

25. FlashBlock

Flashblock is an extension for the Google Chrome that blocks all Flash content from loading. It then leaves placeholders on the webpage that allow you to click to download and then view the Flash content.

26. BuiltWith Technology Profiler

BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves.

27. LastPass

LastPass is a free online password manager and Form Filler that makes your browsing more secure.

28. iMacros

Automate your web browser. Record and replay repetitious work. Web developers use iMacros for web regression testing, performance testing and web transaction monitoring. It can also be combined with Google Speed Tracer, Firebug and other web development and test tools. XPath support is included.

29. Chrome Flags

It shows the country where the server is hosting.

30. Frame Two Pages

Put two tabs into one tab’s two frames. Useful to compare two pages.

31. Split Screen

Works very similar to “Frame Two Pages” extension, but the main difference is that you can browse pages not switching tabs.

32. Session Buddy

Session Buddy is a flexible session manager that allows you to quickly save and restore session tabs.

  • View all of the tabs in each window of a current or saved session
  • Assess easily whether a displayed session has changed
  • Save the current session with 2 clicks
  • Restore sessions into a set of windows, a single window, or the current window
  • Access automatically saved crash recovery sessions after a Chrome or OS crash
  • Optionally automatically save the previous session
  • Edit sessions by deleting individual windows/tabs or rolling tabs into a single window
  • Import a list of URLs
  • Export a session to text or CSV format (more formats in development)
  • Control what types of tabs Session Buddy recognizes
  • Show/hide current session tab count in extension icon badge

13 Written Articles

Valters is 17 years old freelancer from Latvia. His experience in web-building is about 3 years - PHP, xHTML, CSS. He enjoys web-building with different languages. You can follow him on Twitter.

33 Comments Best Comments First
  • Kent Design

    Thursday, May 13th, 2010 01:22

    23

    Some good tips, am using a couple (res one in particular) but will investigate some more on the list, thank you!

    +1
  • Alex

    Tuesday, May 11th, 2010 13:40

    11

    Great list, I’m installing a couple now. You forgot one though….

    Xmarks!

    Not only will it sync your bookmarks across browsers and operating systems you can even sync open tabs. It’s a god send when checking multiple browsers. As is Last Pass which I also couldn’t live without, I even bought a paid account so I could get all my passwords on my Android phone

    0
  • kevin

    Tuesday, May 11th, 2010 16:08

    16

    That’s a nice list, i just installed some of em to try. Thanks.

    0
  • Gines

    Tuesday, May 11th, 2010 14:09

    12

    Very nice! If you have Pendule, you won’t need Eye Dropper, Color Picker or MeasureIt. I think I’ve tried most of them but kept what I need. I’m going to try some of them such as Speed Racer. Thanks for this!

    0
  • Sean O

    Tuesday, May 11th, 2010 14:43

    13

    If you develop with jQuery (and who doesn’t?), check out the jQuery API Search extension:
    http://sean-o.com/jquery-api
    – SEAN O (author)

    0
    • Saad Bassi

      Tuesday, May 11th, 2010 16:24

      17

      Cool.:) Looks useful :)

      0
  • Anooj

    Tuesday, May 11th, 2010 21:42

    15

    Awesome round-up. One of the best I’ve seen. Kudos.

    0
  • Grün Weiss

    Tuesday, May 11th, 2010 15:22

    14

    Cool Google Chrome Extensions, are firefox the best

    0
  • Lars

    Tuesday, May 11th, 2010 13:19

    10

    most of the time i’m using chrome’s build-in development-tools. but this are some promising tools. especially the speed tracer extension seems very useful. and the chrome sniffer gives an easy insight. thanks

    0
  • Neelakandan

    Tuesday, May 11th, 2010 12:23

    9

    That’s great. Thanks for sharing…..

    0
  • Robin Carlsson

    Tuesday, May 11th, 2010 12:28

    3

    Lovely round-up!

    0
  • Rilwis

    Tuesday, May 11th, 2010 12:22

    2

    The Speed Tracer extension looks great. I was looking for an alternative for YSlow and Page Speed of Firefox but didn’t find anyone. This extension maybe the thing I need. Thanks for sharing.

    0
  • Arnaud

    Tuesday, May 11th, 2010 13:55

    4
    0
  • $hekh@r

    Tuesday, May 11th, 2010 14:20

    5

    Amazing stuffs. really inspire me to use chrome.

    0
  • Pedro

    Tuesday, May 11th, 2010 12:16

    8

    Some pretty cool extensions here man, Ive installed a couple of them already, thanks

    0
  • Bryan

    Tuesday, May 11th, 2010 17:13

    7

    Try using chrome editor for easily drafting a html page without leaving your browser.

    https://chrome.google.com/extensions/detail/nglgdmkkiemejlladcdjegcllaieegoe?hl=en-US

    0
  • Sully

    Tuesday, May 11th, 2010 15:34

    6

    Great collection… I have never seen Speed Tracer or Chrome Sniffer. I will be installing them now.

    Thanks,

    0
  • Zlatan Halilovic

    Tuesday, May 11th, 2010 12:19

    1

    I had already installed a lot of these extensions prior to reading this article, but for some of these, which are VERY USEFUL btw, I was unaware that they even existed.

    Tnx Valters :)

    0
  • markandey

    Sunday, August 15th, 2010 10:42

    29

    what about this {chromYQLip}… instant mashup building tool.
    https://chrome.google.com/extensions/detail/bkmllkjbfbeephbldeflbnpclgfbjfmn

    0
  • John J Barton

    Saturday, May 29th, 2010 02:57

    28

    You have the wrong version of Firebug Lite linked here, see
    https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench
    jjb

    0
  • Ben

    Tuesday, October 12th, 2010 15:08

    30

    Hey,
    I use this cool extension its called Awesome Screenshot. Pretty cool actually.
    It has couple of options about what to capture, simple editor, and an option to upload it to the apps server.
    What do you think of that…

    0
  • Alasdair

    Wednesday, August 3rd, 2011 12:58

    31

    The Template extension provides quick and easy access to lots of information about the current page and environment;

    cookies, browser version, directory, encoded, favicon URL, file, fragment, host name, operating system, options, parameters, path, port, protocol, query string, relative, segments, selected text, shortened URL, and title

    Just to name a few…

    Better yet, using a unique template system it allows users to easily create their own templates making the possibilities endless and includes a built-in step-by-step guide to help you write your own.

    Check it out!

    0
  • Uldis (Web Designer)

    Friday, February 17th, 2012 10:24

    33

    Thanks for your post – highly valuable. I was just getting a bit pissed on Firefox because of some bugs and wanted to figure out if its the right time to move to Chrome. Found your post. Installed quite a few of your reccomended + Evernote plugin. I`ll give it a try.

    What`s the most amazing about your post ( I`m not an active commenter normally) is that you are 17 and from Latvia. I`m from Latvia too, but currently reside in Malaysia with my family. A little bit offtopic, I know :D But, when you are the only family from the country in Malaysia, it adds some nostalgic notes when I see valuable posts online by someone of your age and from this beautiful, but tiny Country. Good luck, Valter, in everything you do.

    0
  • dim

    Wednesday, August 24th, 2011 23:20

    32
    0
  • Ogonbat

    Tuesday, May 18th, 2010 01:54

    27

    Hi All
    This is my Chrome Extension, this is an automatic url reducer with a lot of features like views counter, list of link an more.
    https://chrome.google.com/extensions/detail/admmikennonanhamkamgfdfkjpamodgj

    i hope is usefoul
    thanks

    0
  • Kiel

    Wednesday, May 12th, 2010 05:06

    19

    I’d just like to correct:
    *more faster
    in your first paragraph.

    Otherwise, this is good stuff! ;)

    0
  • PromoDriver

    Wednesday, May 12th, 2010 04:38

    18

    I was hoping to see a form-fill plugin. That is about the only thing I am still looking for when using Chrome

    0
  • Jae Xavier

    Wednesday, May 12th, 2010 00:00

    20

    Some of these extensions need to be matured just a little bit more because of memory leaks that take a lot of RAM. I have to close Chrome completely to regain system resources.

    0
  • Paul Irish

    Wednesday, May 12th, 2010 07:39

    21

    You should definitely change your firebug lite one to link to the “official” and more recently updated extension: https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench
    It’s got a lot more features and is far more polished than the one that you’re currently linking.
    thanks!

    0
  • Pedro Simonetti

    Friday, May 14th, 2010 14:31

    25

    Hi,

    I tried to post a comment here, but somehow my comment was not approved. I’m a member of the Firebug Working Group working in a new version of Firebug Lite (1.3). We have developed an extension for Google Chrome with this new version, which has several improvements over the one listed on this post. Please adjust the link in the post to point to that version, as pointed by Paul Irish in a recent comment.

    Thanks.

    0
    • Saad Bassi

      Friday, May 14th, 2010 18:08

      26

      Thanks for the update Pedro. Fixing right now

      0
  • Shyju

    Thursday, May 13th, 2010 18:59

    24

    Great resource.Thanks alot

    0
  • solexy joomla

    Wednesday, May 12th, 2010 13:34

    22

    great list of plugins

    0
  • Uldis (Web Designer)

    Friday, February 17th, 2012 10:24

    33

    Thanks for your post – highly valuable. I was just getting a bit pissed on Firefox because of some bugs and wanted to figure out if its the right time to move to Chrome. Found your post. Installed quite a few of your reccomended + Evernote plugin. I`ll give it a try.

    What`s the most amazing about your post ( I`m not an active commenter normally) is that you are 17 and from Latvia. I`m from Latvia too, but currently reside in Malaysia with my family. A little bit offtopic, I know :D But, when you are the only family from the country in Malaysia, it adds some nostalgic notes when I see valuable posts online by someone of your age and from this beautiful, but tiny Country. Good luck, Valter, in everything you do.

    0
  • dim

    Wednesday, August 24th, 2011 23:20

    32
    0
  • Alasdair

    Wednesday, August 3rd, 2011 12:58

    31

    The Template extension provides quick and easy access to lots of information about the current page and environment;

    cookies, browser version, directory, encoded, favicon URL, file, fragment, host name, operating system, options, parameters, path, port, protocol, query string, relative, segments, selected text, shortened URL, and title

    Just to name a few…

    Better yet, using a unique template system it allows users to easily create their own templates making the possibilities endless and includes a built-in step-by-step guide to help you write your own.

    Check it out!

    0
  • Ben

    Tuesday, October 12th, 2010 15:08

    30

    Hey,
    I use this cool extension its called Awesome Screenshot. Pretty cool actually.
    It has couple of options about what to capture, simple editor, and an option to upload it to the apps server.
    What do you think of that…

    0
  • markandey

    Sunday, August 15th, 2010 10:42

    29

    what about this {chromYQLip}… instant mashup building tool.
    https://chrome.google.com/extensions/detail/bkmllkjbfbeephbldeflbnpclgfbjfmn

    0
  • John J Barton

    Saturday, May 29th, 2010 02:57

    28

    You have the wrong version of Firebug Lite linked here, see
    https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench
    jjb

    0
  • Ogonbat

    Tuesday, May 18th, 2010 01:54

    27

    Hi All
    This is my Chrome Extension, this is an automatic url reducer with a lot of features like views counter, list of link an more.
    https://chrome.google.com/extensions/detail/admmikennonanhamkamgfdfkjpamodgj

    i hope is usefoul
    thanks

    0
  • Pedro Simonetti

    Friday, May 14th, 2010 14:31

    25

    Hi,

    I tried to post a comment here, but somehow my comment was not approved. I’m a member of the Firebug Working Group working in a new version of Firebug Lite (1.3). We have developed an extension for Google Chrome with this new version, which has several improvements over the one listed on this post. Please adjust the link in the post to point to that version, as pointed by Paul Irish in a recent comment.

    Thanks.

    0
    • Saad Bassi

      Friday, May 14th, 2010 18:08

      26

      Thanks for the update Pedro. Fixing right now

      0
  • Shyju

    Thursday, May 13th, 2010 18:59

    24

    Great resource.Thanks alot

    0
  • Kent Design

    Thursday, May 13th, 2010 01:22

    23

    Some good tips, am using a couple (res one in particular) but will investigate some more on the list, thank you!

    +1
  • solexy joomla

    Wednesday, May 12th, 2010 13:34

    22

    great list of plugins

    0
  • Paul Irish

    Wednesday, May 12th, 2010 07:39

    21

    You should definitely change your firebug lite one to link to the “official” and more recently updated extension: https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench
    It’s got a lot more features and is far more polished than the one that you’re currently linking.
    thanks!

    0
  • Jae Xavier

    Wednesday, May 12th, 2010 00:00

    20

    Some of these extensions need to be matured just a little bit more because of memory leaks that take a lot of RAM. I have to close Chrome completely to regain system resources.

    0
  • Kiel

    Wednesday, May 12th, 2010 05:06

    19

    I’d just like to correct:
    *more faster
    in your first paragraph.

    Otherwise, this is good stuff! ;)

    0
  • PromoDriver

    Wednesday, May 12th, 2010 04:38

    18

    I was hoping to see a form-fill plugin. That is about the only thing I am still looking for when using Chrome

    0
  • kevin

    Tuesday, May 11th, 2010 16:08

    16

    That’s a nice list, i just installed some of em to try. Thanks.

    0
  • Anooj

    Tuesday, May 11th, 2010 21:42

    15

    Awesome round-up. One of the best I’ve seen. Kudos.

    0
  • Grün Weiss

    Tuesday, May 11th, 2010 15:22

    14

    Cool Google Chrome Extensions, are firefox the best

    0
  • Sean O

    Tuesday, May 11th, 2010 14:43

    13

    If you develop with jQuery (and who doesn’t?), check out the jQuery API Search extension:
    http://sean-o.com/jquery-api
    – SEAN O (author)

    0
    • Saad Bassi

      Tuesday, May 11th, 2010 16:24

      17

      Cool.:) Looks useful :)

      0
  • Gines

    Tuesday, May 11th, 2010 14:09

    12

    Very nice! If you have Pendule, you won’t need Eye Dropper, Color Picker or MeasureIt. I think I’ve tried most of them but kept what I need. I’m going to try some of them such as Speed Racer. Thanks for this!

    0
  • Alex

    Tuesday, May 11th, 2010 13:40

    11

    Great list, I’m installing a couple now. You forgot one though….

    Xmarks!

    Not only will it sync your bookmarks across browsers and operating systems you can even sync open tabs. It’s a god send when checking multiple browsers. As is Last Pass which I also couldn’t live without, I even bought a paid account so I could get all my passwords on my Android phone

    0
  • Lars

    Tuesday, May 11th, 2010 13:19

    10

    most of the time i’m using chrome’s build-in development-tools. but this are some promising tools. especially the speed tracer extension seems very useful. and the chrome sniffer gives an easy insight. thanks

    0
  • Neelakandan

    Tuesday, May 11th, 2010 12:23

    9

    That’s great. Thanks for sharing…..

    0
  • Pedro

    Tuesday, May 11th, 2010 12:16

    8

    Some pretty cool extensions here man, Ive installed a couple of them already, thanks

    0
  • Bryan

    Tuesday, May 11th, 2010 17:13

    7

    Try using chrome editor for easily drafting a html page without leaving your browser.

    https://chrome.google.com/extensions/detail/nglgdmkkiemejlladcdjegcllaieegoe?hl=en-US

    0
  • Sully

    Tuesday, May 11th, 2010 15:34

    6

    Great collection… I have never seen Speed Tracer or Chrome Sniffer. I will be installing them now.

    Thanks,

    0
  • $hekh@r

    Tuesday, May 11th, 2010 14:20

    5

    Amazing stuffs. really inspire me to use chrome.

    0
  • Arnaud

    Tuesday, May 11th, 2010 13:55

    4
    0
  • Robin Carlsson

    Tuesday, May 11th, 2010 12:28

    3

    Lovely round-up!

    0
  • Rilwis

    Tuesday, May 11th, 2010 12:22

    2

    The Speed Tracer extension looks great. I was looking for an alternative for YSlow and Page Speed of Firefox but didn’t find anyone. This extension maybe the thing I need. Thanks for sharing.

    0
  • Zlatan Halilovic

    Tuesday, May 11th, 2010 12:19

    1

    I had already installed a lot of these extensions prior to reading this article, but for some of these, which are VERY USEFUL btw, I was unaware that they even existed.

    Tnx Valters :)

    0

Comments are closed.

23.20.103.100 - unknown - unknown - US