It will take an awful lot of effort on Google’s part to tear most web developers away from their beloved Firefox, but with the number of web-developer-friendly extensions for Chrome on the rise, developers in increasing numbers are giving Chrome a try and some of them are not looking back.

Chrome’s faster than Firefox, uses less CPU and comes with built-in Developer Tools (accessible by pressing Ctrl+Shift+I). Even if you’re not ready to abandon Firefox yet, make sure you give Chrome a chance with the outstanding extensions below. Chrome’s improving rapidly and early adopters will benefit most.

1. MeasureIt!

Totally straightforward, MeasureIt! lets you draw a ruler so that you can measure the pixel width and height of any element online.

2. Pendule

Pendule provides a veritable smorgasbord of valuable developer tools to help with style sheets, JavaScript, forms, images, accessibility and much more.

3. BuiltWith Technology Profiler

BuiltWith profiles the webpage you’re looking at, exposing all the technologies used therein.

4. Flashblock

With Flashblock, Flash elements on a website are replaced by placeholders, which can be clicked on individually to load the Flash content.

5. Lorem Ipsum Generator

Use this extension to randomly generate lorem ipsum text. It’s as simple as that.

6. iMacros for Chrome

As a web developer, you’ll end up repeating the same actions over and over again. Record these actions as iMacros to save yourself valuable time. Great for filling out web forms.

7. Xmarks Bookmarks and Password Sync

Xmarks is the best tool at your disposal for backing up and syncing bookmarks. Use it to sync across computers and different browsers. 163,569 users can’t be wrong.

8. goo.gl URL Shortener

Google URL Shortener takes long URLs and makes them smaller for easier tweeting and emailing. Use this extension to incorporate the Shortener into your browser.

9. Aviary Screen Capture

Take a screenshot of a webpage and perform basic editing (crop, resize, rotate) in your browser with Aviary.

10. Snippy

While Aviary is the best at capturing entire webpages, Snippy is ideal for grabbing snippets from sites of interest for research.

11. Ibrii

Some people prefer Snippy; others prefer Ibrii, which is another excellent extension for capturing snippets of pictures, text and videos. Try both and see which one’s right for you.

12. PlainClothes

PlainClothes “unstyles” the websites you visit, colour coding specific elements for accessibility and educational purposes.

13. Firebug Lite

An absolute must have extension for web developers. Use it to inspect HTML elements and live edit CSS properties.

14. IE Tab

Use IE Tab to view websites in Internet Explorer while using Chrome.

15. Eye Dropper

Pick any colour from any webpage using this terrific tool.

16. TooManyTabs

Having too many tabs open at once can cause serious confusion and major errors. Clean up your online working environment with TooManyTabs, which makes it possible to clearly see all the tabs you’re using.

17. Session Manager

Session Manager saves your internet session, including all open tabs and windows, for you to come back to. It’s another good one for developers who are a little too “tab-happy”.

18. Chrome Sniffer

The aptly named Chrome Sniffer enables users to inspect the CMS and JavaScript library running on a page. Over 50 different kinds are detectable.

19. Web Developer

You get a whole new toolbar full of web developer goodies when you install this extension.

20. Shareaholic

The first step on the path to recovery from “shareaholism” is admitting you’ve got a problem. The next step is installing Shareaholic for Chrome which makes sharing webpages via Facebook, Twitter and email etc really, really easy.

21. FastestChrome

With over 10 million users, chances are you’ve heard of FastestFox, which speeds up your Firefox browsing experience. FastestChrome is essentially the same thing, but (you guessed it!) for Chrome.

22. Validity

Once installed, you can click on the Validity icon in the address bar to validate your HTML documents without even leaving the page.

23. LastPass

This one’s great for everyone, not just web developers – you can use LastPass to securely store and manage all of the passwords that you use online.

24. Google Tasks

Essentially a to-do list built into your browser, Google Tasks is another extension which is useful for everyone.

25. Chrome SEO

Chrome SEO provides Chrome users with a suite of handy SEO tools. It’s the most popular SEO extension available.

26. Resolution Test

Change the size of your browser to see how websites fare at different resolutions.

27. Speed Tracer

Using Speed Tracer, you can pinpoint and solve speed-related issues with you web apps.

28. Picnik Extension for Chrome

Picnik is one of the best free online image editors out there and now it’s available as a Chrome extension.

29. Chrome Flags

Chrome Flags tells you the physical location of the website you’re viewing by displaying the appropriate national flag.

30. WebEdit

WebEdit’s a superb extension for killing time while experimenting with your developer skills. Use it to edit (non-permanently, of course) any webpage you like.

31. Domain Availability Checker

Checking the availability of domains online is pretty easy, but if you do it regularly you can really benefit from this extension, which runs the necessary checks in secs.

32. SEOQuake Lite

SEOQuake Lite displays the PageRank and Alexa rank of the website you’re viewing in the bottom right of your Chrome browser window.

33. Site Geo IP Locator

Click on the Site Geo icon and the IP address of the current website you’re viewing is revealed. This can then be located on a proper map.

34. Google Mail Checker Plus

Not only can you use Google Mail Checker to see what’s inside your Gmail inbox without navigating away from your current webpage, you can preview messages: deleting, marking as spam or reading as appropriate.

35. SEO Analysis Tool

SEO Analysis Tool picks apart the SEO characteristics of any webpage, providing you with detailed information about meta tag listings, keywords found in anchor tags and URLs found in the page, amongst other things.

While starting a web project, we usually use a set of resources like CSS-reset, various JS hacks for IE, etc. to overcome browser incompability issues.

HTML5 Reset is a project which aims to offer a base for the HTML5-CSS3 projects which covers these issues by default.

HTML5 Reset

Besides the standard HTML tags, it has rules to reset the new tags like title, header, footer and JavaScript-powered fixes for IE.

The set comes in 2 versions:

  • Bare Bones (stripped down to the essentials)
  • Kitchen Sink (when we want the option to remove features, rather than add them)

Inside the download package, there is also a sample content provided to help you get started.

Mike Plate, a freelance web and mobile developer, has created an impressiveCSS3 Playground to help seeing the properties in action easily.

The web application enables you to style a box with a text (that can be resized and re-positioned) with the help of sliders and color-pickers.

Once the properties (like radius, box-shadow, CSS3 transforms, etc.) are updated the result is displayed instantly with the CSS code generated.

CSS3 Playground

MyWebSql is a web-based and open source MySQL client that is built withPHP.

It has an Ajaxed interface and besides the rows of tables, it can control views, stored procedures, triggers and functions.

MyWebSql

Data can be exported and imported easily (query results can be exported as well).

MyWebSql comes with a syntax highlighting rich-text SQL editor to run queries (the last-ran query is shown automatically which is a nice reminder).

The application is improved frequently and, within time, can become a good alternative to mature solutions.

Few days ago, the jQuery team announced that they are working on jQuery Mobile which will probably become quickly popular on creating mobile web apps. for the fans of the library.

On the other hand, there are already ready-to-use solutions like the pretty-complete jQuery iPhone UI (check the “Mobile Development” category for others).

jQuery iPhone UI

It is a jQuery library which emulates the iPhone interface that is handy for creating iPhone web applications.

The library includes widgets like menu, tabs, scrolling, forms and gallery browsing.

jQuery iPhone UI is not complicated to use and comes with a documentationto get you started.

Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices. Keep them web-based or wrap them for distribution on mobile app stores.

You can easily shift theme coloring, add style, and use our pre-included icons to deliver a phenomenal visual experience. Animate between views using one of our many predefined animations, with loads of configuration options.

mobile-css3-html5-a

Requirements: -
Demo: http://www.sencha.com/
License: GPL 3.0 + FLOSS License

Slippy is a HTML Presentation library written with jQuery, it takes a html file in and plays it in any browser. It is optimal for programming-related talks since it includes a syntax highlighter and is very easy to use since it’s just standard html markup with a few classes to enable specific functions.

If you are making a talk about Javascript, Slippy can even execute your code samples live and displays alert() boxes nicely instead of using the ugly browser dialog, which -I tried it today- works quite well to prove your point interactively.

slide-jquery

Requirements: jQuery Framework
Demo: http://slides.seld.be/?file=2010-05-30+Example.html
License: GPL License

Mac-like Icon Dock (v2) is a “Mac OS X” style icon dock, built entirely in XHTML/CSS and with smooth animation using jQuery/JavaScript. As from the demo, and unlike many other icon docks, the navigation works with no JavaScript. This is very important as the website should still be accessible with JavaScript disabled.

Each icon can have a scalable image and a title. As the image is dynamically resized, it is up to the browser to smoothly render the icon. You can also have a look at jqDock or other Fish Eye Menus.

mac-like-dock

Requirements: All Browsers except IE6
Demo: http://www.aplweb.co.uk/jQuery/Mac_Dock_v2/
License: License Free

Show Slow is an open source tool (and, optionally, a free web-based service) for monitoring website performance metrics over time.

It simply collects the results from YSlow and Page Speed rankings and graphs them to show you how various changes to the website can affect the performance.

And, it can do this regularly to help you see the improvements done within time.

Show Slow

free ebook oreilly - mozilla

Another free ebook from Oreilly books publisher. This ebook provides step-by-step information about how you can create your own programs using Mozilla’s framework. After installing Mozilla, you quickly learn to create simple applications. After the initial satisfaction of developing your own portable applications, the book branches into topics on modular development and packaging your application. In order to build more complex applications, coverage of XUL, JavaScript, and CSS allow you to discover how to customize and build out your application shell.

Free Ebook’s Download Link

Creating Applications with Mozilla



Copyright © 2008 NIce IT Solutions. All rights reserved.