7 Extremely Useful Chrome Extensions for Web Developers (with quick tutorials for each)

written by aext on March 18, 2010 in Tools with 26 comments

← older posts newer posts →

Web developers, you guys are really lucky. The tools available for you as a group are very powerful and they come in all shapes and sizes. With the introduction of Google Chrome, the community has made some amazing extensions which are very easy to use for every day work. Below you have the ones I consider most useful (starting with the best, of course 😉 ).

1. Speed Tracer

How is it useful? You can track your web application’s speed and see exactly how much time various tasks consume. It’s a great way to identify problems in case you notice something is slow.

Before you install Speed Tracker, you need to enable the â€“enable-extension-timeline-api flag. You do this (in Windows) by right clicking the Google Chrome shortcut, then clicking on “Properties” and the adding the flag next to the â€œTargetâ€ section. Hereâ€™s a screenshot on how I did it:

Now, letâ€™s see this powerful extension in action!

I took this screenshot while opening a new document in Google Docs. As you can see, Speed Tracker does its job very well.

2. iMacro

How is it useful? It saves time while testing web applications. You can easily extract information from websites, test online forms, measure website response times and do many other powerful things.
This is the initial window youâ€™ll get after installing iMacro in Chrome:

If you want to create a simple macro (in case you never did that before), just click on Record button and start recording the actions you take. Hereâ€™s what I did, starting from the Google homepage and then going to Google Blog Search and clicking on the â€œAdvanced Searchâ€ option:

3. FireBug Lite

How is it useful? This allows you to inspect the HTML, CSS, Javascript code without leaving the page. Youâ€™re also able to edit the code without any problems and test the new changes immediately.

If you use Firefox, youâ€™ll know this is the most popular Firefox extension among web developers. For now, FireBug Lite is not as advanced as its Firefox counterpart. However, Iâ€™m sure that will change in the near future.

Here’s a screenshot using Firebug Lite on AEXT.net:

4. SEO Site Tools

How is it useful? Optimizing the page/site for the search engines becomes a much simpler task. You know how important this is if you consider the fact that Google, Yahoo and Bing are all in the top 10 most visited websites worldwide.

I’ve seen many SEO plugins for Chrome. This seems to be best in terms of the actionable items it can give you for your site.

For example, take a look at the screenshot below where I’ve analyzed one of the posts I wrote on some powerful Gmail tips. This is just one of the tabs SEO Site Tools has:

5. Web Developer Mini

How is it useful? Quick and simple access to essential things every web developer wants to see: Viewing the source of the document, validating HTML and CSS and a link to BrowserShots where you can see the page in multiple web browsers.

Very convenient. Take a look:

6. Pendule

How is it useful? It gives you more advanced options than Web Developer Mini (Web Developer mini is way more convenient in my opinion though, thatâ€™s why Iâ€™ve included it.) Some of the features Pendule includes: disabling CSS, showing passwords in forms, pixel ruler, eye dropper, viewing alt text in images, feed validator and topographic view. For all of the options, take a look at the picture below:

7. Resolution Test

How is it useful? You can use it to test various resolutions in Chrome. The way it works is it resizes the Chrome window to emulate a particular screen resolution. Resolution Test is the most convenient plugin I found in this category because it enables you to quickly see and compare different resolutions.

As you can see, Chrome and its extensions can be very powerful for you as a web developer. What extensions have you come to use in your every day development?