7 Extremely Useful Chrome Extensions for Web Developers (with quick tutorials for each)
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?
SEO Site Tools is the best one it also Validates CSS and HTML and on top of that it display result very quickly …mean its very fast to displaying result. Rest of the plugins are well known to all developers, thats what I think
.-= wparena´s last blog ..years-of-refusal =-.
Thanks for taking the time to write up this great little article, I’ve recently just switched to chrome and i must say it beats Firefox,( In my opinion before anyone starts bitching about my comment).
I installed a few of these which will help with my college course and some freelance stuff a do.
i got to go through these I really love chrome its v fast and much nicer design than FF although ff is very useful – cheers Lam= ]
Ben
.-= Benjamin Rama´s last blog ..6 Stunning Floral Brushes =-.
Pingback: 7 Extremely Useful Chrome Extensions for Web Developers (with quick tutorials for each) | AEXT.NET « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
m loving it ……chrome is moving a hell lot faster than I had anticipated …all they need to do is follow firefox
.-= shoaib hussain´s last blog ..Maximize Battery Life Of Windows 7 By Turning Off Windows Aero And Glass =-.
I am using chromium, so these do not necessarily work on it.
Nice post, the best one so far is Speed Tracer.
Thanks for the list.
.-= Teylor Feliz´s last blog ..Interview with Cerven Cotter of pixeldeath =-.
Thanks guys!
Nice Work… Appreciate your efforts in putting this together.
Nice collection
Pingback: 7 Extremely Useful Chrome Extensions for Web Developers (with quick tutorials for each) » DesignYelp – yelp and design
Pingback: [User Link:7 Extremely Useful Chrome Extensions for Web Developers (with quick tutorials for each)] | Tips for Designers and Developers | tripwire magazine
Thanks a lot for sharing with us..
.-= technotiger´s last blog ..Pagination like facebook message inbox =-.
Pingback: CSS Brigit | 7 Extremely Useful Chrome Extensions for Web Developers (with quick tutorials for each)
Great post. Thanks guy!
.-= Web Design Soul´s last blog ..20 High Quality & Amazing Fonts for Designers =-.
thanks for sharing some cool and useful one, already using seo site tools, its really useful and ill try the resolution tool !!
.-= sriganesh´s last blog ..40 Amazing Lomography wallpaper and Tutorials =-.
Pingback: 135+ Simply Fresh and Useful Articles for Designers and Developers | tripwire magazine
Pingback: Sidebar Articles | incsspired.com
informative article
.-= PelFusion´s last blog ..A Comprehensive Guide to Web Terminology =-.
Nice posting. This article has been really useful to me.
Thanks
Excellent article. Firebug is so useful! Don’t know how I did web development prior to finding this!
Woooooooooowwww finnaly the firebug, it will help a lot
thanks for all the tools
Web Developer is now available in its full version. I don’t think the mini version is still available, but the full version seems to be pretty good.
wow that’s so nice , now I can think of moving on to chrome as firefox is crashing a lot and it annoys me a lot.
Great tools, tips, and resources. Thanks for sharing.
i love this tools for web developer , chrome is the best browser i think.