After updating my Firefox to the new 3.6 version I've noticed that my favorite shortcut Cmd+Shift+F (Display Element Information – Web Developer Toolbar) didn't work anymore. Instead of getting the expected results Firefox just switched to full screen mode. Well, my first thought was that there might be an version conflict between the Web Developer Toolbar and the new Firefox and I would simply update the plugin to fix the issue. But there is no new version of the toolbar yet.

What happened?

Mozilla has added the new shortcut for full screen mode to Firefox which apparently overrules the shortcut of the plugin. As a web developer I use Cmd+Shift+F on a daily basis for my work. And honestly, who needs to switch Firefox to full screen mode, at least I never do.

Firefox Menu

Web Developer Toolbar Menu

The Solution

There is a very simple solution to this issue:

1. Download the Keyconfig plugin for Firefox at http://mozilla.dorando.at/keyconfig.xpi
2. Restart Firefox
3. In Firefox go to Tools -> Keyconfig
4. Find the entry "Full Screen" (the one with the unwanted shortcut) and press Disable

That's it. Your Web Developer Toolbar should work again.

The Mozilla Team has done a great job with the new Firefox 3.5 browser. FF 3.5 is twice as fast as FF 3 in terms of Javascript speed and even 10 times faster than FF 2.

Smaller Memory Footprint

One of the things I didn’t like about Firefox was the fact that having several tabs open would lead to an unbelievably high consumption of memory. These days are over. The XPCOM cycle collector continuously cleans up unused memory. Plus, hundreds of memory leaks have been remedied.

Awesome Bar

The location bar is now called the awesome bar for good reasons. Now you have Safari functionality inside Firefox. You don’t need to remember exactly the website URL anymore – just start typing some keyword and it will present you results from your browsing history. Great!

Offline Browsing

Websites that are Google Gear enabled (like GMail) you can surf offline without having to install any additional Add-ons.

Newest Web Technologies

These web technologies are now natively supported:

• CSS 2.1
• CSS 3
• HTML5
• SVG Filters
• Ogg Vorbis
• Ogg Theora
• Native JSON
• MathML
• Animated Portable Network Graphics (APNG)
• Cross-Site XMLHttpRequest
• Microformats
• Web Worker Threads

Private Browsing

You can easily switch between normal and private browsing and you won’t leave a single browsing fingerprint behind for others to discover. You can even remove every trace of a specific site from your browser without loosing the history of the rest of the sites.

So don’t wait any longer and get your Firefox 3.5 upgrade here.

Recently I was working on a web project where I needed to show a preview window which was basically an IFrame. As the whole page navigation was based on Ajax calls I was looking for a bulletproof method for reloading an IFrame.

The first solution (only Firefox)

IFrame code:

Ajax code:

var iframe = document.getElementById("preview_content");
iframe.contentDocument.location.reload(true);

Well, this solution was working quite nice with Firefox but IE wouldn’t reload the page at all.

The proper solution

Ajax code:

var iframe = document.getElementById("preview_content");
iframe.src = "preview.php?x="+Math.round(Math.random());

The additional parameter x (a random number) will cause IE to reload the IFrame properly without using the cache.

Firefox is my favorite browser for creating and testing website design and functionality. On the one hand you have big share of visitors using Firefox (Wiki: Usage share of web browser)  and a rapidly growing user base. The reasons for the success of Firefox are speed, stability and a strong open source community behind it.

And then you have IMHO the most important part: an endless range of great plugins

Although there exist hundreds of absolutely great plugins I’d like to share with you today only these plugins that helped me best while working on web projects in the past:

1. Web Developer

A must-have plugin for any web developer. It will add a new toolbar to Firefox with a lot of great tools for displaying page information, request headers, CSS element information, disabling/enabling Javascript, Cookies, Images and CSS, validation and displaying Javascript generated content. I just named some of the features but there is a lot more inside this tool. So make sure to have it.

2. SearchStatus

This one is great helper for SEO work. It includes a better PageRank information (forget the original – problems with cached values), Alexa Rank and the essential NoFollow link highlighter.

3. HTML Validator

I would say 20% of SEO work is On-Site optimization. This tool will help you in locating every validation problem of your HTML code. And I guess most of you will agree: Google loves valid content.

4. Javascript Debugger

Working with Javascript can get very tricky, especially when you are loading dynamic content via Ajax requests. Just looking into the code won’t help you a lot. The Javascript Debugger allows you to set breakpoints in your script and inspect variables and objects.

5. Live Http Headers

As the name already says this plugin will show you all Http headers while browsing a website. Sometimes a valuable source to understand the redirection mechanism of a website and how data is sent across.

6. Leet Key

A very useful tool for quick transforming encoded data. Sometimes when I need to check if a Base64 encoded parameter was transferred correctly I can decode it with this plugin to plain text. Apart of the transforming for Base64, Bin, Hex, Morse and others, there is even a functionality for encrypted contents in AES and DES.

7. JS View

When you want to have a quick look on a JS or CSS file from some other website you need to view the page source and copy the file path. But it can be so much simpler. JS View provides you any given JS/CSS file of a website with the easiness of a mouse click.

8. Duplicate Tab

Sometimes you need the currently open page in a second tab. But if it’s javascript generated content you cannot just copy and paste the URL in another tab. But Duplicate Tab can.

9. Add N Edit Cookies

This tool allows you to manipulate and add cookies and can help you to test the security of your website.

10. Clear Cache

Very simple and useful. While you are changing elements on your website you want to make sure to see the changes and not a cached version. Things like that can end up in frustration.

As mentioned before, these plugins helped me a lot. I know there are a lot more useful plugins out there, so feel free to share your list with us.

Update 2009-06-10:

Firebug

Another essential tool for web developers that allows you live editing of CSS, HTML and JS on any website.

Being used to the 3-finger-swipe functionality to navigate within Safari and other Apple applications I wanted Firefox to behave the same way. Safari is really a great browser but not used by many users. To test my websites in terms of design and functionality I use Firefox and IE as well.

Unfortunately the Trackpad gestures are not working with these browsers. After some research in Google I finally came across a great piece of software:

MultiClutch

MultiClutch brings you the MultiTouch gestures to any application and lets you control the action behind every gesture. It embeds within the System Preferences Panel and is really simple to use.

Here is an example configuration for Firefox to use Swipe for back and forward history navigation: