Every web developer should (and probably does) use these tools on a daily basis. They streamline your development and help speed up little niggles with your site.

Web Developer Toolbar

This handy toolbar includes features such as in browser CSS editing which lets you see CSS changes live, the ability to disable Javascript, Cookies, CSS and Images (for usability testing) and includes many handy features.

Some fancy tricks also include:

• Element outlining
  This allows you to see which <div/input/anything> tags are lining up wrong and combined with the CSS editor proves a powerful tool in element alignment.
• Disabling CSS
  This allows you to see how your layout holds up with browsers which don’t support CSS (such as screen readers). If your content is laid out poorly, it. will. be. read. out. loud. poorly.
• Browser Resizing
  Want to see how your site looks in a 1024×768 browsers? Click the re-size button and the toolbar will set your browser window to any size you specify!
• Quick Validation links
  Want to know if your XHTML or CSS validates? There’s quick handy links under the Tools drop-down.
• Generated Source vs Source
  Is your Javascript messing up your code? Then view the Generated Source to see what it’s actually doing to your pages.
• Quickly Edit HTML & CSS in-line
  It’s a quick and dirty way to see how your new CSS/HTML code works in your site. Simply open the editor and type away to see your page update live.

There’s many more options you can play with. All you need is Firefox and the Web Developer Toolbar.

Firebug

Firebug is a tool used by almost every web developer in the world. If you’ve not installed it yet, do it immediately as it will save you many man hours fixing bugs in your websites code. It’s had over 19 million downloads and averages 22,000 downloads every day.

Colorzilla

When I can’t remember how to count in hex (which often happens) I use Colorzilla. It makes sure my #009ecc is not #02a4d3 and that my #666 isn’t #999. It’s best to keep consistency and is what separates a good designer, with a great designer.

There’s loads more Firefox Add-ons you could also check out:

• YSlow https://addons.mozilla.org/en-US/firefox/addon/5369
• Pixel Perfect https://addons.mozilla.org/en-US/firefox/addon/7943
• Firecookie https://addons.mozilla.org/en-US/firefox/addon/6683
• PageDiff https://addons.mozilla.org/en-US/firefox/addon/4274

Internet Explorer Developer Tools

On the Internet Explorer front there’s not much for the modern Web Developer. However, using the Firefox tools above covers most if not all of your needs, except for IE8, IE7 and IE6 testing. This is what I’ll go over next.

The best tool is actually one released by Microsoft themselves. The aptly named Internet Explorer Developer Toolbar which gives you a few tools to play with which include a CSS and HTML editor, the ability to disable CSS and images, use a colour picker and outline elements. It’s basically a shorter version of the Firefox web developer toolbar. It also allows you to quickly switch between IE7 and IE8 browser rendering. Simply select which browser mode you need and you can see what your page looks like in IE7.

Now for IE6 (cringe). I know a lot of developer are now dropping support but as previously mentioned sometimes it’s not an option, and we sometimes need to think about this when developing mass market websites.

Spoon.net

It’s a tool I only recently found and because Microsoft won’t properly develop something which lets you run IE6 on your machine, Spoon developed a browser plug-in which lets you run ANY browser, well, IN browser. They call it “App Virtualization” and I call it magic as it let’s you run IE6! (note, as of writing I couldn’t get it to buffer on Windows 7 64-bit but could on Vista (32) and XP (32), let me know, maybe it needs to be XP Virtualized?)

Adobe BrowserLab

This amazing tool lets you preview your pages side by side and even overlay pages (known as onion skin). You can also preview your site in many browsers which include Internet Explorer 6/7/8, Safari 3/4 and Firefox 2/3. The only downside is you can’t preview it as a functional page so can only be used for styling sakes, and it’s a little slow to run sometimes.

I hope you found these tools useful for your web developing needs and good luck (you’ll need it if your working with IE6)

With the release of Google’s new web browser named “Chrome”, will this mean a shift in browser usage?

Probably not. It’s the same situation as Firefox found itself in nearly four years ago, and it’s only just catching Microsofts browser.

So, is Chrome any good? We downloaded the BETA yesterday and have been playing ever since.
We are pleased to say it’s extremely fast. It features a new open source Javascript Engine named “V8″ as well as multiple tab processing. This means the browser can handle processes from each individual tab rather than processing the lot at the same time, which competitors such as Firefox 3 and IE7 do (IE8 BETA has a similar system to Chrome).

Although it may take up a little more memory and power it ultimately makes for a faster browsing experience and more stability. If one of the processes fail you only lose one tab rather than the whole browser.
Firefox has a similar stability system included where it re-initiates your tabs after a crash. Google Chrome never has to close when a piece of dodgy Javascript breaks the tab. It just closes it.

Things we like in Chrome:

1. The truely awesome Chrome Inspector
   A great debugging tool is built right into Chrome. Want to know what’s making your page load slowly? Not sure how long your page takes to load? Want to know which elements load first? This shows you the lot. You can see which order elements load, how long they take to load, how long it takes for each element to load after the previous as well as file information and the built in debugger and property inspector. You have to use it to truly understand it’s complexity. Simply click the control button, then down to Developer>Javascript console and click away!
2. Incognito Browsing (and the awesome logo)
   It’s basically a porn mode. Very much like IE8′s new privacy feature. Upon opening this new “Incognito Window” all your history and web cookies won’t be stored meaning your basically invisible on the internet. It also means your mom/mum won’t find that dirty website you have been visiting over the past few days…
   We also love the “spy” logo very similar to Gamespys logo. It looks very cool for a Google graphic! (We also love the Chrome logo).
3. The iGoogle like welcome page
   When opening a new tab you have the option of showing a “New Tab page”. It shows your most visited websites in order and also shows your full browser history with time and date. Clicking show full history actually allows you to see your online travel path. The new tab page also shows new bookmarks and recently closed tabs. A feature we like very much as losing closed tabs can be easy.
4. Organised tabs
   When you have several tabs opened, keeping track can be difficult. And when Firefox adds your tab onto the end of the list it can be hard to find again. Google Chrome adds the tab next to the currently opened one, which helps keep them organised. The more tabs you have open at any one time, the harder it becomes to sort, and the more valuable this feature becomes.
   Click on the image to see a better example. 
5. Unobtrusive status bar
   This is a personal preference. The more browser space is available, the better. This means you can see more of the page at any one time. Even if it is 10px worth of space, every little bit helps.
   When hovering over links the status bar pops up in the lower left corner, then fades away when you move away from the link. Simple and effective.
    

To be honest we could write about the new Chrome all day, but we know that it’s already been well documented. Maybe we got a little carried away.

To download Google Chrome simply head over to their website.

This week sees Microsoft leave behind the IE7 which had lasted for two years, and announces the second beta of IE8, but does more effort need to be placed on getting users to actually upgrade, rather than adding another version number to the mix?

According to W3.org there are more or less the same amount of users toddling along with IE6 as there are IE7. IE6 is seven years old yesterday (27th) and still holds a market share of around 25% while IE7 holds 26%.

Firefox is steadily climbing up the browser tree holding 42%, and nearly all of those users are on the latest version (or there about). Why is this? Do Internet Explorer users not bother? Is it too complicated? Or is it even due to piracy? After all, if you have an illegal key, you won’t be able to upgrade. Let’s make a few points and ask some questions…

1. Firefox is easy to update, IE is confusing?
   Which is 100% correct. Hell, Firefox is so easy to update it’s basically a couple of clicks. And there is even the option of auto-updating, which saves even more hassle.
   Internet Explorer is downloaded using Windows Update, which is frankly a pain. Updates should be notified in browser and warned that out of date software is potentially unsafe. I’m not saying IE’s update system is bad, but it is slightly confusing to use the Windows Update service.
2. Internet Explorer has lazy users?
   This maybe because of the confusing update sequence or even due to a high number of Windows XP users. If people bothered replacing their IE with Safari, Opera or Firefox they are going to be bothered about updating a genuinely good brower. On the other hand, if they have not known anything but IE6 since they bought their computer why change?
3. Piracy
   Windows Genuine Key checks come as standard with the system. It’s a great way of making sure only paying users get the software Microsoft develops. It does however mean that users with a pirate copy of IE6 won’t be able to download IE7 or IE8 without “hacks”. This may force the user to stick with IE6 (on Windows XP) or even download a competitors browser. I’m not condoning pircay in any way, but it’s definately a reason people are sticking to IE6.
4. Microsoft is too corporate
   An issue that has plagued Microsoft for quite some years. IE should take a leaf out of other browsers books.
   Firefox’s SpreadFirefox.com is a brilliant example of community marketing. It’s a way of spreading the word through social networking, and it works, to great effect. Firefox is taking the battle to IE (and winning) while IE combats with forcing the browser with Windows. Ever seen anyone selling IE t-shirts? Didn’t think so. Then again, Mozilla has to get it’s money from somewhere…

Still want to stick to IE6? Maybe Microsoft need some sort of better marketing strategy to explain to users that upgrading is important to their security. Or maybe you should download Opera, Firefox or even Apples Safari. *shudder*