Firefox Mobile Developer Tools

Tuesday, 18 September 2012 00:00

Note: this is Part II of our 8 part series introducing desktop browser tools for testing mobile sites.

While Firefox has been one of the most popular Internet browsers, the Firefox mobile browser (codename “Fennec”) hasn’t been around for too long. Firefox and the Mozilla developer community provide a package of mobile developer tools along with useful browser add-ons for both users and web developers. The mobile browser Fennec can also be installed on desktops for testing. However, for most users it's probably easiest to install a few plugins to the Firefox desktop browser in order to preview and test mobile sites.

The latest Firefox 15 also has a built-in tool for testing web sites with various resolutions, under Tools->Web developer->Responsive Design View. Note that this view only changes the resolution of the browser, and not the User Agent of the browser for those websites that use server-side device detection (see our introduction to this mobile site testing article series for more info). However, when you have User Agent Switcher plugin installed this feature can be very handy, as you can just switch to the user agent of the target device and easily set the Firefox resolution accordingly.

Update Sep-19: Firefox 16 Beta apparently also has command line access to developer tools.

Works on: Windows, Linux, Mac OS X
Price: Free 
Requirements: For Firefox desktop web browser, you need to get some Firefox add-ons also, at least User Agent Switcher. Optionally you maybe also want to get Modify Headers, and XHTML mobile profile. You also need the User Agent strings for the mobile devices you want to test -- easiest way is to get a big bunch in the same XML and just directly import the file to User Agent Switcher (In Firefox, select Tools->Default User Agent->Edit User Agents->Import).
For using the Fennec desktop version you should check the instructions and setup the Android SDK according to the Fennec Android guide. It is also possible to build a desktop executable version of Fennec from the latest source.

Pros

• Firefox desktop plugins are simple to install and fast to launch and use. No SDK to be installed.
• Fennec has keyboard, mouse, and pinch zoom support.
• Ability to sync bookmarks between the Fennec desktop emulator and normal Firefox browser can be handy for testing.

Cons

• Fennec doesn’t declare itself clearly as mobile browser, so many sites may not recognize it as one. In those cases you’ll need to use desktop Firefox and user agent changer.
• Installing and using Android SDK for Fennec is cumbersome if you don’t need the SDK for anything else. Also building Fennec from source code for desktop is a turnoff for casual users.
• Like Opera, it is just one browser - there might be variations with e.g. vendor-prefixed CSS properties etc.

BONUS NOTE FOR CHROME:
You can also find similar features in Google Chrome: Right-click on any page, select Inspect Element to open the Web Inspector, and then click on the “settings” icon in the bottom right corner of the Web Inspector. There you can set a different User Agent, screen size, and also so called “font-scale factor." You can also get User Agent Switchers for Chrome.

Do you have your own tips or comments, or have we missed something? Let us know in the comments below!