Before diving into the Firefox 4 addons, though, here’s a quick glimpse into some of the noteworthy new Firefox 4 features that benefit web developers:

• Improved HTML5: Gecko now uses the HTML5 parser, which fixes bugs, improves interoperability, and improves performance.
• Better CSS support: Firefox 4 features support for new CSS transitions, computed values, selector grouping, background image subrectangle, and touch properties.
• New CSS stuff: Firefox 4 adds new CSS properties, pseudo-classes, pseudo-selectors, and functions.
• More graphics and video support: for WebGL, WebM video, SMIL animation for SVG, and more.
• Better DOM support: for JavaScript typed arrays, touch and multi-touch events, and more.
• Improved security: new security features added like Content Security Policy (CSP), HTTP Strict Transport Security, and more.
• Built-in developer tool: Firefox 4 features the Web Console tool which is a debugging aid for web and extension developers.

However, what makes Firefox great is the development community around it, and appropriately there are tons of addons that make your web development simpler and easier.
Please note that four of the extensions below are still marked as ‘experimental’, but have been tested and do work perfectly well with Firefox 4, they are: HTML5toggle, HTML5 Validator, Mobile Toolkit and Mobilify.

20 Essential Firefox 4 Addons for Web Developers

FireFTP

FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers. Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and more.

Download FireFTP here

HTML5toggle (Experimental)

HTML5toggle provides a button which makes it easy to turn on or off the HTML5 support in Firefox 4. Given that HTML5 support is still evolving, some websites do not work as expected when HTML5 support in Firefox 4 is enabled.

Download HTML5toggle here

HTML5 Validator (Experimental)

HTML5 Validator adds a ‘HTML 5 Validator’ context menu item to a page’s context menu.

Download HTML5 Validator here

IE Tab 2

IE Tab 2 lets you use IE to display web pages in a tab within FireFox. Adopted from the original IE Tab, this version has new features including IE 7, 8 or 9 compatibility modes. You can also import settings from your old IE Tab.

Download IE Tab 2 here

Total Validator

Total Validator lets you perform multiple validations and take screen shots in one go. Total Validator is an all new HTML5 and XHTML5 validation. It provides true HTML validation for HTML 2.0 through to XHTML 1.1 using the official DTDs, plus added attribute and other tests. So you no longer have to put up with the limitations of the W3C validator (no type checking) and tools like HTML Tidy which interpret the standards incorrectly as they don’t use the official DTDs.

Download Total Validator here

Web Developer

Web Developer adds various web developer tools to Firefox.

Download Web Developer here

EditCSS

EditCSS is a stylesheet modifier in the Sidebar.

Download EditCSS here

Console²

Console² replaces the JavaScript Console with what could be the next generation Error Console. Console² let’s you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content). Furthermore it provides a simple search box (as seen in the History and Bookmarks sidebars), hiding of duplicates, sidebar optimizations, a customizable toolbar and some more accessibility improvements. From v0.5 includes the Console Filter extension previously available separately from the Console² website.

Download Console² here

CSS Reloader

CSS Reloader allows you to reload all the CSS of any site without you have to reload the page itself. The goal for this browser extension is to enable developers to become more productive. You can use the keyboard shortcut F9, or the context-menu’s option “Reload CSS” to reload the CSS files or at page.

Download CSS Reloader here

View Source Chart

View Source Chart lets you inspect the DOM—and learn HTML—at lightning speed. Eyesight is the most efficient way for the human brain to process information. By placing visual boundaries where they already exist invisibly, View Source Chart enables you to take in DOM structure and hierarchy as fast as your brain possibly can.

Download View Source Chart here

Screenshot Pimp

Screenshot Pimp has a silly name but a useful function: it lets you capture, grab, save, download, or copy anything you see in your web browser—and beyond—with only one click. Screenshot Pimp not only creates an image of whatever is inside you’re web browser, but it has the ability to also capture the rest of the website that you have not scrolled down to yet. So whether the part of the website you don’t see has more text, or an image, or even flash content that is just too big to fit on the page without shrinking or scrolling, Screenshot Pimp allows the user to grab it in multiple formats, and save it to your hard drive.

Download Screenshot Pimp here

Mobile Toolkit (Experimental)

MobileToolkit helps you to validate the code of any page, check it on several mobile emulators and find documentation to improve your mobile compatibility. It offers not only one click code validation but also mobile render emulation for various mobile devices and browsers.

Download Mobile Toolkit here

Mobilify (Experimental)

Mobilify slims down the content of pages and applies a phone frame to better simulate the Firefox Mobile UI for iterative local development. It does this by placing an icon in your Addon Bar that lets you switch a page into “mobile” mode- narrowing the to 320px, darkening the surrounding content, and placing your content in a mobile phone ‘frame’. Simply click the ‘widescreen’ icon to enable mobile mode, and click again to disable.

Download Mobilify here

Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Download Firebug here

CodeBurner for Firebug

CodeBurner integrates with Firebug to extend it with reference material for HTML and CSS. CodeBurner’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties. It also hooks into context-menus in the HTML and CSS panels, the DOM crumb trail, and the Inspector, adding options to look up a selected item (ie. search for it in the Reference panel) or to view a code example.

Download CodeBurner for Firebug here

Adobe BrowserLab for Firebug

Adobe BrowserLab integrates with Firebug and generates screenshots of your pages (public or behind a firewall) in multiple browsers. Launch Adobe BrowserLab directly from Firebug and preview temporary changes you’ve made using Firebug.

Download Adobe BrowserLab for Firebug here

FirePath for Firebug

FirePath integrates with Firebug and adds a development tool to edit, inspect and generate XPath 1.0 expressions, CSS 3 selectors and JQuery selectors (Sizzle selector engine).

Download FirePath for Firebug here

Firepicker for Firebug

Firepicker integrates with Firebug and adds a small color picker dialog when editing a CSS rule in Firebug. Firepicker scans for values that can be parsed as CSS colors (#abc, rgb(1,2,3), blue, red etc.) and displays them in a drop-down list right below the firebug’s CSS editor box. Clicking on the color value in the drop-down brings up a color picker dialog.

Download Firepicker for Firebug here

iMacros

iMacros lets you automate Firefox. Whatever you do with Firefox, iMacros can record and replay that repetitious work so you don’t have to manually do it each time. It can automate visiting the same sites, filling out forms, remembering passwords, downloading and uploading, data extraction and web scraping/mining, web testing, social scripting/bookmarking, and more.

Download iMacros here

FoxyProxy

FoxyProxy is an advanced proxy management tool that completely replaces Firefox’s limited proxying capabilities. It offers more features than SwitchProxy, ProxyButton, QuickProxy, xyzproxy, ProxyTex, TorButton, etc. It automatically switches an internet connection across one or more proxy servers based on URL patterns. Basically, FoxyProxy automates the manual process of editing Firefox’s Connection Settings dialog. Proxy server switching occurs based on the loading URL and the switching rules you define.

Download FoxyProxy here

What Are Your Essential Web Developers Firefox 4 Addons?

Over to you: what are your favorite Firefox 4 addons for web developers? Feel free to share your useful additions in the comments section below.

You may also like:

Creating a Web Development Environment using Google Chrome Extensions →
22 Firefox Extensions to Turn Gmail into a Powerhouse of Productivity and Manageability →
Extend the Firebug Console with these 15 Extensions →

Go to Source

Advertise here with BSA

Firefox is a widely-used browser – not just by users but web developers. Simply put, Firefox and its addons can make developing for the web easier and simpler. And with the release of Firefox 4, it got even easier. This article features 20 essential Firefox 4 addons for web developers.

Before diving into the Firefox 4 addons, though, here’s a quick glimpse into some of the noteworthy new Firefox 4 features that benefit web developers:

• Improved HTML5: Gecko now uses the HTML5 parser, which fixes bugs, improves interoperability, and improves performance.
• Better CSS support: Firefox 4 features support for new CSS transitions, computed values, selector grouping, background image subrectangle, and touch properties.
• New CSS stuff: Firefox 4 adds new CSS properties, pseudo-classes, pseudo-selectors, and functions.
• More graphics and video support: for WebGL, WebM video, SMIL animation for SVG, and more.
• Better DOM support: for JavaScript typed arrays, touch and multi-touch events, and more.
• Improved security: new security features added like Content Security Policy (CSP), HTTP Strict Transport Security, and more.
• Built-in developer tool: Firefox 4 features the Web Console tool which is a debugging aid for web and extension developers.

However, what makes Firefox great is the development community around it, and appropriately there are tons of addons that make your web development simpler and easier.
Please note that four of the extensions below are still marked as ‘experimental’, but have been tested and do work perfectly well with Firefox 4, they are: HTML5toggle, HTML5 Validator, Mobile Toolkit and Mobilify.

20 Essential Firefox 4 Addons for Web Developers

FireFTP

FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers. Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and more.

Download FireFTP here

HTML5toggle (Experimental)

HTML5toggle provides a button which makes it easy to turn on or off the HTML5 support in Firefox 4. Given that HTML5 support is still evolving, some websites do not work as expected when HTML5 support in Firefox 4 is enabled.

Download HTML5toggle here

HTML5 Validator (Experimental)

HTML5 Validator adds a ‘HTML 5 Validator’ context menu item to a page’s context menu.

Download HTML5 Validator here

IE Tab 2

IE Tab 2 lets you use IE to display web pages in a tab within FireFox. Adopted from the original IE Tab, this version has new features including IE 7, 8 or 9 compatibility modes. You can also import settings from your old IE Tab.

Download IE Tab 2 here

Total Validator

Total Validator lets you perform multiple validations and take screen shots in one go. Total Validator is an all new HTML5 and XHTML5 validation. It provides true HTML validation for HTML 2.0 through to XHTML 1.1 using the official DTDs, plus added attribute and other tests. So you no longer have to put up with the limitations of the W3C validator (no type checking) and tools like HTML Tidy which interpret the standards incorrectly as they don’t use the official DTDs.

Download Total Validator here

Web Developer

Web Developer adds various web developer tools to Firefox.

Download Web Developer here

EditCSS

EditCSS is a stylesheet modifier in the Sidebar.

Download EditCSS here

Console²

Console² replaces the JavaScript Console with what could be the next generation Error Console. Console² let’s you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content). Furthermore it provides a simple search box (as seen in the History and Bookmarks sidebars), hiding of duplicates, sidebar optimizations, a customizable toolbar and some more accessibility improvements. From v0.5 includes the Console Filter extension previously available separately from the Console² website.

Download Console² here

CSS Reloader

CSS Reloader allows you to reload all the CSS of any site without you have to reload the page itself. The goal for this browser extension is to enable developers to become more productive. You can use the keyboard shortcut F9, or the context-menu’s option “Reload CSS” to reload the CSS files or at page.

Download CSS Reloader here

View Source Chart

View Source Chart lets you inspect the DOM—and learn HTML—at lightning speed. Eyesight is the most efficient way for the human brain to process information. By placing visual boundaries where they already exist invisibly, View Source Chart enables you to take in DOM structure and hierarchy as fast as your brain possibly can.

Download View Source Chart here

Screenshot Pimp

Screenshot Pimp has a silly name but a useful function: it lets you capture, grab, save, download, or copy anything you see in your web browser—and beyond—with only one click. Screenshot Pimp not only creates an image of whatever is inside you’re web browser, but it has the ability to also capture the rest of the website that you have not scrolled down to yet. So whether the part of the website you don’t see has more text, or an image, or even flash content that is just too big to fit on the page without shrinking or scrolling, Screenshot Pimp allows the user to grab it in multiple formats, and save it to your hard drive.

Download Screenshot Pimp here

Mobile Toolkit (Experimental)

MobileToolkit helps you to validate the code of any page, check it on several mobile emulators and find documentation to improve your mobile compatibility. It offers not only one click code validation but also mobile render emulation for various mobile devices and browsers.

Download Mobile Toolkit here

Mobilify (Experimental)

Mobilify slims down the content of pages and applies a phone frame to better simulate the Firefox Mobile UI for iterative local development. It does this by placing an icon in your Addon Bar that lets you switch a page into “mobile” mode- narrowing the to 320px, darkening the surrounding content, and placing your content in a mobile phone ‘frame’. Simply click the ‘widescreen’ icon to enable mobile mode, and click again to disable.

Download Mobilify here

Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Download Firebug here

CodeBurner for Firebug

CodeBurner integrates with Firebug to extend it with reference material for HTML and CSS. CodeBurner’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties. It also hooks into context-menus in the HTML and CSS panels, the DOM crumb trail, and the Inspector, adding options to look up a selected item (ie. search for it in the Reference panel) or to view a code example.

Download CodeBurner for Firebug here

Adobe BrowserLab for Firebug

Adobe BrowserLab integrates with Firebug and generates screenshots of your pages (public or behind a firewall) in multiple browsers. Launch Adobe BrowserLab directly from Firebug and preview temporary changes you’ve made using Firebug.

Download Adobe BrowserLab for Firebug here

FirePath for Firebug

FirePath integrates with Firebug and adds a development tool to edit, inspect and generate XPath 1.0 expressions, CSS 3 selectors and JQuery selectors (Sizzle selector engine).

Download FirePath for Firebug here

Firepicker for Firebug

Firepicker integrates with Firebug and adds a small color picker dialog when editing a CSS rule in Firebug. Firepicker scans for values that can be parsed as CSS colors (#abc, rgb(1,2,3), blue, red etc.) and displays them in a drop-down list right below the firebug’s CSS editor box. Clicking on the color value in the drop-down brings up a color picker dialog.

Download Firepicker for Firebug here

iMacros

iMacros lets you automate Firefox. Whatever you do with Firefox, iMacros can record and replay that repetitious work so you don’t have to manually do it each time. It can automate visiting the same sites, filling out forms, remembering passwords, downloading and uploading, data extraction and web scraping/mining, web testing, social scripting/bookmarking, and more.

Download iMacros here

FoxyProxy

FoxyProxy is an advanced proxy management tool that completely replaces Firefox’s limited proxying capabilities. It offers more features than SwitchProxy, ProxyButton, QuickProxy, xyzproxy, ProxyTex, TorButton, etc. It automatically switches an internet connection across one or more proxy servers based on URL patterns. Basically, FoxyProxy automates the manual process of editing Firefox’s Connection Settings dialog. Proxy server switching occurs based on the loading URL and the switching rules you define.

Download FoxyProxy here

What Are Your Essential Web Developers Firefox 4 Addons?

Over to you: what are your favorite Firefox 4 addons for web developers? Feel free to share your useful additions in the comments section below.

You may also like:

Creating a Web Development Environment using Google Chrome Extensions →
22 Firefox Extensions to Turn Gmail into a Powerhouse of Productivity and Manageability →
Extend the Firebug Console with these 15 Extensions →

Advertise here with BSA

Go to Source

Advertise here with BSA

Firefox is a widely-used browser – not just by users but web developers. Simply put, Firefox and its addons can make developing for the web easier and simpler. And with the release of Firefox 4, it got even easier. This article features 20 essential Firefox 4 addons for web developers.

Before diving into the Firefox 4 addons, though, here’s a quick glimpse into some of the noteworthy new Firefox 4 features that benefit web developers:

• Improved HTML5: Gecko now uses the HTML5 parser, which fixes bugs, improves interoperability, and improves performance.
• Better CSS support: Firefox 4 features support for new CSS transitions, computed values, selector grouping, background image subrectangle, and touch properties.
• New CSS stuff: Firefox 4 adds new CSS properties, pseudo-classes, pseudo-selectors, and functions.
• More graphics and video support: for WebGL, WebM video, SMIL animation for SVG, and more.
• Better DOM support: for JavaScript typed arrays, touch and multi-touch events, and more.
• Improved security: new security features added like Content Security Policy (CSP), HTTP Strict Transport Security, and more.
• Built-in developer tool: Firefox 4 features the Web Console tool which is a debugging aid for web and extension developers.

However, what makes Firefox great is the development community around it, and appropriately there are tons of addons that make your web development simpler and easier.
Please note that four of the extensions below are still marked as ‘experimental’, but have been tested and do work perfectly well with Firefox 4, they are: HTML5toggle, HTML5 Validator, Mobile Toolkit and Mobilify.

20 Essential Firefox 4 Addons for Web Developers

FireFTP

FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers. Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and more.

Download FireFTP here

HTML5toggle (Experimental)

HTML5toggle provides a button which makes it easy to turn on or off the HTML5 support in Firefox 4. Given that HTML5 support is still evolving, some websites do not work as expected when HTML5 support in Firefox 4 is enabled.

Download HTML5toggle here

HTML5 Validator (Experimental)

HTML5 Validator adds a ‘HTML 5 Validator’ context menu item to a page’s context menu.

Download HTML5 Validator here

IE Tab 2

IE Tab 2 lets you use IE to display web pages in a tab within FireFox. Adopted from the original IE Tab, this version has new features including IE 7, 8 or 9 compatibility modes. You can also import settings from your old IE Tab.

Download IE Tab 2 here

Total Validator

Total Validator lets you perform multiple validations and take screen shots in one go. Total Validator is an all new HTML5 and XHTML5 validation. It provides true HTML validation for HTML 2.0 through to XHTML 1.1 using the official DTDs, plus added attribute and other tests. So you no longer have to put up with the limitations of the W3C validator (no type checking) and tools like HTML Tidy which interpret the standards incorrectly as they don’t use the official DTDs.

Download Total Validator here

Web Developer

Web Developer adds various web developer tools to Firefox.

Download Web Developer here

EditCSS

EditCSS is a stylesheet modifier in the Sidebar.

Download EditCSS here

Console²

Console² replaces the JavaScript Console with what could be the next generation Error Console. Console² let’s you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content). Furthermore it provides a simple search box (as seen in the History and Bookmarks sidebars), hiding of duplicates, sidebar optimizations, a customizable toolbar and some more accessibility improvements. From v0.5 includes the Console Filter extension previously available separately from the Console² website.

Download Console² here

CSS Reloader

CSS Reloader allows you to reload all the CSS of any site without you have to reload the page itself. The goal for this browser extension is to enable developers to become more productive. You can use the keyboard shortcut F9, or the context-menu’s option “Reload CSS” to reload the CSS files or at page.

Download CSS Reloader here

View Source Chart

View Source Chart lets you inspect the DOM—and learn HTML—at lightning speed. Eyesight is the most efficient way for the human brain to process information. By placing visual boundaries where they already exist invisibly, View Source Chart enables you to take in DOM structure and hierarchy as fast as your brain possibly can.

Download View Source Chart here

Screenshot Pimp

Screenshot Pimp has a silly name but a useful function: it lets you capture, grab, save, download, or copy anything you see in your web browser—and beyond—with only one click. Screenshot Pimp not only creates an image of whatever is inside you’re web browser, but it has the ability to also capture the rest of the website that you have not scrolled down to yet. So whether the part of the website you don’t see has more text, or an image, or even flash content that is just too big to fit on the page without shrinking or scrolling, Screenshot Pimp allows the user to grab it in multiple formats, and save it to your hard drive.

Download Screenshot Pimp here

Mobile Toolkit (Experimental)

MobileToolkit helps you to validate the code of any page, check it on several mobile emulators and find documentation to improve your mobile compatibility. It offers not only one click code validation but also mobile render emulation for various mobile devices and browsers.

Download Mobile Toolkit here

Mobilify (Experimental)

Mobilify slims down the content of pages and applies a phone frame to better simulate the Firefox Mobile UI for iterative local development. It does this by placing an icon in your Addon Bar that lets you switch a page into “mobile” mode- narrowing the to 320px, darkening the surrounding content, and placing your content in a mobile phone ‘frame’. Simply click the ‘widescreen’ icon to enable mobile mode, and click again to disable.

Download Mobilify here

Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Download Firebug here

CodeBurner for Firebug

CodeBurner integrates with Firebug to extend it with reference material for HTML and CSS. CodeBurner’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties. It also hooks into context-menus in the HTML and CSS panels, the DOM crumb trail, and the Inspector, adding options to look up a selected item (ie. search for it in the Reference panel) or to view a code example.

Download CodeBurner for Firebug here

Adobe BrowserLab for Firebug

Adobe BrowserLab integrates with Firebug and generates screenshots of your pages (public or behind a firewall) in multiple browsers. Launch Adobe BrowserLab directly from Firebug and preview temporary changes you’ve made using Firebug.

Download Adobe BrowserLab for Firebug here

FirePath for Firebug

FirePath integrates with Firebug and adds a development tool to edit, inspect and generate XPath 1.0 expressions, CSS 3 selectors and JQuery selectors (Sizzle selector engine).

Download FirePath for Firebug here

Firepicker for Firebug

Firepicker integrates with Firebug and adds a small color picker dialog when editing a CSS rule in Firebug. Firepicker scans for values that can be parsed as CSS colors (#abc, rgb(1,2,3), blue, red etc.) and displays them in a drop-down list right below the firebug’s CSS editor box. Clicking on the color value in the drop-down brings up a color picker dialog.

Download Firepicker for Firebug here

iMacros

iMacros lets you automate Firefox. Whatever you do with Firefox, iMacros can record and replay that repetitious work so you don’t have to manually do it each time. It can automate visiting the same sites, filling out forms, remembering passwords, downloading and uploading, data extraction and web scraping/mining, web testing, social scripting/bookmarking, and more.

Download iMacros here

FoxyProxy

FoxyProxy is an advanced proxy management tool that completely replaces Firefox’s limited proxying capabilities. It offers more features than SwitchProxy, ProxyButton, QuickProxy, xyzproxy, ProxyTex, TorButton, etc. It automatically switches an internet connection across one or more proxy servers based on URL patterns. Basically, FoxyProxy automates the manual process of editing Firefox’s Connection Settings dialog. Proxy server switching occurs based on the loading URL and the switching rules you define.

Download FoxyProxy here

What Are Your Essential Web Developers Firefox 4 Addons?

Over to you: what are your favorite Firefox 4 addons for web developers? Feel free to share your useful additions in the comments section below.

You may also like:

Creating a Web Development Environment using Google Chrome Extensions →
22 Firefox Extensions to Turn Gmail into a Powerhouse of Productivity and Manageability →
Extend the Firebug Console with these 15 Extensions →

Advertise here with BSA

Go to Source

It all sounds good, doesn't it… There are some down-sides, though – some of the extensions are a little bit buggy (most are still in Beta) and others do lack a fair bit of polish. But if you choose your extensions carefully you will be able to build yourself a great web browsing environment.

Remember, the extensions directory has only just opened, with time Chrome and its extensions may just win the web browser war… Then again Firefox may come back fighting back, it always has done, hasn't it?

In today’s news round-up we have collected the best resources to help you choose best extensions for Chrome.

11 Chrome Extensions, For Starters

Google promised that Chrome would be fast to launch and fast to load web pages, but people predicted it would fail with the arrival of its extensions. Well, the extensions are here (at least for some of us) and surprisingly they do not affect the browser’s performance.

Here are a 11 cool extensions to get you started and ease you into your possible transitions to Chrome. Maybe not yet.

11 Chrome Extensions, For Starters

Creating a Web Development Environment using Google Chrome Extensions

How powerful can Chrome actually be for designers and developers? In just under a month there are dozens upon dozens of new extensions specifically developed for web developers, and in this article they have collected the best and most useful extensions for creating your own personal Google Chrome web development environment.

Creating a Web Development Environment using Google Chrome Extensions

Make the Most of Chrome with These 13 Excellent Extensions

Lifehacker, in this article, have pulled 13 fresh extensions from the extension gallery that were worthy of highlighting. They all have something a bit different from the widely-available bookmarklets, or at least fill a crucial need for those who use the web productively.

Make the Most of Chrome with These 13 Excellent Extensions

How To Create Your Own Google Chrome Extension

Developing your own Google Chrome extension is surprisingly easy. You might think you need all types of development skills and coding knowledge, but it’s really no more difficult than creating or tweaking a web page. If you know HTML/CSS and are somewhat familiar with Javascript, you can have a simple extension up and running in no time.

How To Create Your Own Google Chrome Extension

By Paul Andrew (Speckyboy and speckyboy@twitter).

Go to Source

Since its launch, an extension system has been one of the most sought after and requested features for Google Chrome, and last month, Google delivered. They launched, in beta, there Google Chrome Extensions web site, and in just under a month they have already cataloged an impressive 1000+ extensions (no support for the Mac, as yet).
So, the big question now is, how powerful, useful and indispensable can we, as developers and designers, actually make Chrome, while backed up with its new extensions? The next question is, can it or will it replace Firefox?

Chromes main asset is its speed. Yes, it is faster than Firefox but, speed should not be what defines your browser. Your browser should be defined by the personalized environment that you create and are comfortable with, and can seamlessly house the many utilities, apps and tools that your browsing habits require.
That is exactly what Firefox gives me, that is why I use it and love it, and it is going to take something extraordinary to make me change. Its is a blank canvas to create my own personal window to the web, that Firefox offers me. And, for me, that is why Chrome is lagging behind… but it may just be catching up.

Back to the first question, how powerful can we actually make Chrome, as designers and developers? Well, pretty powerful, to be honest. In just under a month there are dozens upon dozens of new extensions specifically developed for web developers, and in this article I have collected, what I feel, are the best and most useful extensions for creating your own personal Google Chrome web development environment.

Firebug Lite

If you are a serious developer you will, of course, be using Firefox, and the chances are you will be using the phenomenal Firebug extension. Firebug gives you a wealth of web development tools, allowing you to edit, debug, and monitor CSS, HTML, and JavaScript live on any web page. It is a truly indispensable tool.

The Chrome solution/alternative for Firebug is, basically, a stripped down version of Firebug, called Firebug Lite. It has been developed by the same team behind its big brother, and yes, it is much smaller than the Firefox version, and can only simulate a handful of the powerful Firebug features. Don’t let that put you off though, the features it packs would be powerful enough for most developers and designers.

Pendule

Pendule is a very useful extension that gives you a wide array of easy to use developer tools. Some of its features include: View Page Source, Color Picker, Display Ruler and Disable CSS. On top of that you also have some handy image tools: Hide Images, Show Alt Text, Show Dimensions and Show paths. And, to top it all off, it even has tools that will validate CSS, HTML and Feeds.
What I love about this extension is its simplicity, nothing flashy about it, just tools, and even more tools. Excellent!

Web Developer Mini

Unlike Firebug Lite and Pendule, Web Developer Mini does not offer a huge volume of tools, nor is it anywhere near as powerful. It is a basic developer extension that offers easy access to validate your CSS and HTML, view the Page Source, and it has an added feature, which I like, is that it gives you direct access to BrowserShots (a screenshot generating app).

Speed Tracer

Speed Tracer is an open-source tool that will help you identify and fix performance problems within 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.
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 much more ….
Speed Tracer Tutorial Video
Learn about one of Google Web Toolkit 2.0’s newest tools, Speed Tracer, in this video tutorial. This video provides an overview of Speed Tracer, a Chrome extension which enables developers to profile the internals of the browser, preventing bottlenecks by enabling diagnosis of hidden problems.

PlainClothes

This extension can “unstyle” any web page. 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 of the text is rendered in your default fonts (as defined in “Options” > “Under the Hood” > “Change font and language settings”).
You can control the extent of the “unstyling” via the Options window (”Extensions” > “PlainClothes” > “Options”), and you can toggle the “unstyling” on a per-site basis by clicking the icon in the location bar.
Although this is primarily designed as an accessibility feature, anyone can use it.

Chrome Sniffer

Chrome Sniffer is an extension that allows you to inspect the web framework/CMS and javascript library running on any website. The extension simply works by displaying an icon that indicates which frameworks have been detected. Currently, this extension can detect up to 25 popular CMS and javascript libraries, with much being planned with future releases.

BuiltWith Chrome Extension

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.

BuiltWith technology tracking includes widgets (snap preview), analytics (Google, Nielsen), frameworks (.NET, Java), publishing (WordPress, Blogger), advertising (DoubleClick, AdSense), CDNs (Amazon S3, Limelight), standards (XHTML,RSS), hosting software (Apache, IIS, CentOS, Debian) .

IE Tab

Use Internet Explorer to display web pages in a Chrome tab. Some sites can only be displayed using IE, and with this extension you can now see those sites without leaving Chrome. The Extension is great for web developers who want to test the IE rendering engine, users who use sites with ActiveX controls, and users who want to use the explorer view for local files.

JavaScript Console

This simple, yet handy web development extension, will allow you to do some JS prototyping on any web page.
You will probably have to disable the extension when you are not using it, because it is somewhat obtrusive and seems to block some functionality on some sites. This is not one of those extensions you just install and leave going (there is a popup window with a link to the extensions page so you can deactivate when you are finished).

Window Resizer

The very polished Window Resizer extension allows you to resize the browser window to emulate various screen resolutions, including mobile screens. You even have the added option of customizing the settings and creating a personalized screen sizes or viewports.
Support video link: Window Resizer Support.

META Inspector

META Inspector is a Chrome extension that can be used to inspect the meta data, that is usually not visible while browsing, found inside web pages.
This extension is mainly aimed at web developers that need to verify the description tag of their site to follow the Webmasters’ Google Guidelines, but even to who is curious about page contents that are usually not visible, but can reveal interesting site properties.

Aviary Screen Capture

With Aviary Screen Capture, you can take a screenshot of any webpage and edit it directly in your browser using Aviary applications.
This quick screen capture addon is a must-have for bloggers and designers. It will perform a screen capture of the visible portion of any webpage and then open the capture INSTANTLY in a basic image editor where you can do markup (draw arrows and rectangles), edit (crop, rotate and resize) and get the exact pixel colors of the image.

LoremIpsumGenerator

This very simple extension that gives you quick access to a Lorem Ipsum generator, an essential tool for any web designer.
Many other extensions of this type – in other browsers – simply complicate this task, using really extensive code, XHR, etc. The main purpose of this one, is to use the less amount of code (and also memory) and help the developer/user to simply get the job done.

Useful Chrome Extensions Resources

You might also like…

32 Indispensable Bookmarklets for Web Developers and Designers »
27 Indispensable Web Design and Development Firefox Extensions »
10 Online Tools and Apps to Help Optimize and Format CSS »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
50 Useful Tools and Generators for Easy CSS Development »
20+ Resources and Tutorials for Creative Forms using CSS »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »

Go to Source

Text Editors

Aptana Studio

Aptana is a complete web development environment that combines powerful authoring tools for HTML, CSS, and JavaScript, along with thousands of additional plugins created by the community.

KompoZer

KompoZer is a complete web authoring system that combines web file management and easy-to-use WYSIWYG web page editing.

Notepad++

Notepad++ is a source code editor and Notepad replacement that supports several languages. It runs on Windows and is governed by a GPL License.

Firebug

Firebug is a plugin for Firefox that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Quanta Plus

Quanta Plus is a highly stable and feature rich web development environment.

jEdit

jEdit is a cross platform text editor with hundreds of person-years of development behind it.

Graphics Applications

GIMP

GIMP is a versatile graphics manipulation package. It’s considered by many to be an excellent alternative to Photoshop.

Dia

Dia is a cross operating system diagram creation application.

Krita

Krita is a graphics application for everyone who wants to get creative with images.

Inkscape

Inkscape is a vector graphics editor, with capabilities similar to Adobe Illustrator.

FTP

FileZilla

FileZilla is probably the most popular ftp application. You can download a client or server version.

Cyberduck

Cyberduck is an FTP client built for the Mac.

WinSCP

WinSCP is an open source free SFTP client and FTP client for Windows.

Go to Source