1. Firebug Lite
Any serious web designer/developer utilizes Firefox’s great tool Firebug. In fact, this was the one reason I didn’t immediately switch to Chrome over Firefox. Once I found Firebug Lite, though, the decision was made for me. Firebug Lite allows you to inspect various elements on a page, and edit the CSS, HTML, and JS in real-time. I find this extremely useful when laying out elements on a page because there’s no more guess-and-check – you can just test it in Firebug and edit the styles!
2. META SEO Inspector
I’ll be the first to admit that I forget a lot of SEO-oriented steps in my work. META SEO now easily inspects all META-related or SEO-related data that is always beneficial for people like us to see. It also lets you verify the description tag of your website to follow Google’s webmaster guidelines – a little fun fact.
3. Lorem Ipsum Generator
We all use it – why waste our time trying to find it? The Lorem Ipsum generator is a simple extension that generates however much Lorem Ipsum text you want it to.
4. Resolution Test
Using this extension, developers and designers can adjust the size of their browser to instantly see their sites at different resolutions. You can even specify your own resolution! Very simple and easy to use – just check boxes from a list and select “View”.
5. Chrome SEO
With this extension, you can perform a multitude of SEO-related tasks. These include keyword searches, competitive analysis, traffic, ratings, backlink checks, and social bookmark counts. It’s a must-have for all web developers.
6. IE Tab
Unfortunately, this is Windows only (I know, I was disappointed, too). But I’m going to throw it in here because at my day job (where we HAVE to use PCs…), it’s been incredibly valuable. Essentially, it makes testing for IE more streamlined because you never have to leave Chrome or your text-editor – it displays the site using IE, but inside of Chrome.
7. Speed Tracer
Speed Tracer is much like Firefox’s YSlow, but for Chrome. It identifies and helps you rectify speed problems with your sites or apps. It can detect problems from JS parsing to CSS recalculation, DOM event handling, and much more.
8. Pendule
Pendule offers a very clean UI, and many useful tools that are very easy to use. Some of the features it includes are a color picker, a ruler, view source, disable CSS, hide images, show alt text, and validate CSS, HTML, and feeds!
9. Validity
In short, validity is a very simple way to validate a current web page. All you have to do is click the icon in the address bar, and you can even use your own installation of the W3C Validation Service!
10. Aviary Screen Capture
Aviary Screen Capture is one of those hidden gems. It allows you to not only take a screenshot of a webpage in the browser, but you can also crop, rotate, resize, markup, add notes, and get exact pixel colors. Very useful!
11. Chrome Sniffer
Unfortunately, this will not scratch-n-sniff like you may think. Ha. This is a simple tool that lets the web developer see what libraries or platforms the site is using. It’ll display if the site is using jQuery (or jQuery UI), WordPress, MooTools, etc…
12. Snippy
Snippy allows the developer to grab parts (known as “snippets”) from web pages and keep track of all of them for future use, or to even upload them to Google Docs.
13. Color Pick
Color Pick can pick up both, the hexadecimal and RGB values of a selected color. Unfortunately, the site must be fully loaded at 100% (normal) zoom for the best results
Just a note:
Speed Tracer isn’t really anything like Yslow. Yslow grades a website based on automated checking of several best practices; Speed Tracer provides you with detailed performance data to identify bottlenecks in your site’s performance.
Yslow analyses performance “patterns”, not performance results. Speed Tracer ignores performance patterns, and instead informs you about the performance results of your website.
They are both performance tools, but they serve completely different purposes.
Great list! Thanks for sharing.
Wow, I must say very nice designs. Today web designing is growing day by day and it is very important that website must be very appropriate with it subject. Here given examples are superb and very well designed. Nowadays people need more and more creative designs. These all are really very nice examples. I really appreciate that you had shared this.
Excellent designs.Web design plays an important role.what we need is a solid and attractive web design for our website and that design must fulfill our business requirements..
great post! Awesome collection of tutorials…very useful…thanks…
Absolutely amazing….great post.Some amazing stuff in here,really good info,thanks for sharing.
Nice! I only knew about one or two of these, really good post!
Nice information, I really appreciate the way you presented.Thanks for sharing..
Very helpful article. Now that Chrome has the Google Chrome Inspector, I think I’m finally ready to get rid of the memory hog that is Firefox. I love Firefox to bits, but low memory consumption is not their forte. There were a few tools that I found in this article that will definitely help in the transition. Thank you!