Getting to know the Firefox developer tools

Back in 2011 things were not looking good for developer tools in Firefox. Firebug development had slowed and its lead developer took a job with Google after IBM lost interest in funding his work on the project. Mozilla was already working on moving debugging tools into Firefox core but the new dev tools were pretty uninspiring compared to what Chrome had. Myself and pretty much every other developer I know eventually ended up using Chrome for development work, which eventually translated into using Chrome all the time.

Well, I’ve been spending more time in Firefox lately, and am happy to see Mozilla has been rapidly closing the gap with Chrome on the dev tools front.

Firefox developer tools
Firefox developer tools

One of the major frustrations with the Firefox dev tools was removed with Firefox 29’s new ability to disable the cache. Strangely there does not seem to be a way to set this permanently (it’s forgotten each time you close the dev tools!), but at least it exists.

Disable cache!
Finally a way to disable the cache!

The challenge of the dev tools is in presenting a huge amount of information to the user in as compact a way as possible. After working with the Firefox dev tools a little it feels like the focus is less on piling in features trying to match Chrome and more on clear presentation of the essentials. “Clarity over parity” I suppose you could say. This approach is really visible if you compare the Network timings in Firefox and Chrome:

The network timings from Firefox and Chrome

The network timings from Firefox (top) and Chrome.

I think its far more clear in Firefox that the total time for a request is the sum of a few different times (DNS resolution, connecting, sending, waiting, receiving), while its really not clear what is going on in Chrome until you start digging.

One thing I was happy to notice was that the famous Tilt addon has been moved into core and incorporated into the dev tools (update: 3D View now needs to be enabled in the settings).

See your page in 3D
See your page in 3D

While this might have been written off initially as a WebGL Demo or a bit of a gimmick, I think its super useful for finding and eliminating unnecessary nesting of elements so I am really glad to see it find a home here.

3d_hckrnews

The dev tools also feature a responsive design mode which allow you to simulate arbitrary screen sizes. While the responsive design mode is really nice, I really like to be able to debug pages live on my phone. Fortunately Mozilla has made that possible by using the adb tool that the Android SDK provides. On Ubuntu you can install it from the repos:

mike@sleepycat:~☺  sudo apt-get install android-tools-adb
Setting up android-tools-adb (4.2.2+git20130218-3ubuntu16)
...

Then you will need to enable remote debugging in your Firefox mobile settings:

Screenshot_2014-05-05-21-46-06

With that done you should be able to see the mobile browser in the adb’s list of devices:

mike@sleepycat:~☺  adb devices
* daemon not running. starting it now on port 5037 *
* daemon started successfully *
List of devices attached 
0149B33B12005018	device

To connect run

adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket

and the choose Tools > Web Developer > Connect… from your Desktop Firefox’s menu. It will bring up a page like this:

Connecting to Firefox mobile for remote debugging
Connecting to Firefox mobile for remote debugging

When you click connect you should see this on the screen of your mobile device:

Screenshot_2014-05-05-21-49-47

While the dev tools are still missing a few features I like from the Chrome dev tools (mostly being able to get a list of unused CSS declarations), all my day to day use cases are well covered. In fact, while I rarely used network timings before, the clearer presentation of them has made me realize how much valuable information was in there.

Its been good to dig into these tools and find so much good stuff going on. It feels like there was a bit of a rocky transition from Firebug to the new dev tools, but clearly Mozilla has found it’s feet. I’m looking forward to exploring further.

XUL with HAML?

I was playing around with XUL today. I was modifying a my ffkiosk application I made a little while ago and experimenting with adding some buttons and a toolbar to it. While XUL is relatively simple stuff, I find its pretty verbose, and as an on and off user of HAML, I also find it ugly.
Then it hit me; I wonder if you can use HAML to write XUL?
The answer is yes:

!!! xml
<?xml-stylesheet href="chrome://ffkiosk/skin/main.css" type="text/css" ?>
%window{id: "main", title: "ffkiosk", onload: "onload();", sizemode: "fullscreen", height: "768", width: "1024", xmlns: "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"}
  %script{type: "application/javascript", src: "chrome://ffkiosk/content/jquery-1.7.2.js"}
  %script{type:"application/javascript", src: "chrome://ffkiosk/content/io.js"}
  %script{type: "application/javascript", src: "chrome://ffkiosk/content/main.js"}

  %toolbar
    %toolbaritem
      %toolbarbutton{label: "I'm a button"}/
    %toolbaritem
      %toolbarbutton{label:"Foo", type:"menu-button"}
        %menupopup
          %menuitem{label: "Bar"}/
          %menuitem{label: "Baz"}/
  %browser{id: "browser", type: "content-primary", flex: "1"}/

Apart from the xml-stylesheet line which HAML can’t deal with (but cheerfully lets pass through) it works really well. The output is totally legit XUL:

<?xml version='1.0' encoding='utf-8' ?>
<?xml-stylesheet href="chrome://ffkiosk/skin/main.css" type="text/css" ?>
<window height='768' id='main' onload='onload();' sizemode='fullscreen' title='ffkiosk' width='1024' xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'>
  <script src='chrome://ffkiosk/content/jquery-1.7.2.js' type='application/javascript'></script>
  <script src='chrome://ffkiosk/content/io.js' type='application/javascript'></script>
  <script src='chrome://ffkiosk/content/main.js' type='application/javascript'></script>
  <toolbar>
    <toolbaritem>
      <toolbarbutton label="I'm a button" />
    </toolbaritem>
    <toolbaritem>
      <toolbarbutton label='Foo' type='menu-button'>
        <menupopup>
          <menuitem label='Bar' />
          <menuitem label='Baz' />
        </menupopup>
      </toolbarbutton>
    </toolbaritem>
  </toolbar>
  <browser flex='1' id='browser' type='content-primary' />
</window>

Sure enough XULRunner happily renders it:
xul_haml

At the moment I can’t decide if this is a great idea or totally ridiculous. Hell, I know plenty of people that think that any usage of HAML is ridiculous. I can imagine with a complex UI the typing saved and the clarity gained might be worth it… until someone points out a decent XUL IDE.
An interesting experiment if nothing else.

X11 forwarding over SSH

I recently got my old computer up and running with Gentoo Linux with extensive help from one of my coworkers, who is an avid Gentoo fan. Now that it is back in my basement I am starting to play with it remotely.

One of the cool things about the windowing system on Linux (called X11 or just X) is that it is a server and considers the program windows you have opened as clients. There is nothing saying that the server your client program window is getting its information from has to be the local computer you are sitting in front of.

Of course, no proper Linux aficionado would send this kind of thing across the internet without encryption, so the X windows are sent through an SSH tunnel. The settings (on Gentoo at least) were pretty simple. In the /etc/ssh/ssh_config file change this:

# Host *

# ForwardAgent no

# ForwardX11 no

To this:

Host *

# ForwardAgent no

ForwardX11 yes

And then in the /etc/ssh/sshd_config file change:

# X11Forwarding no

to

X11Forwarding yes

Once you have done that restart the sshd service with the command:

sleepycat ~ # /etc/init.d/sshd restart

* Stopping sshd … [ ok ]

* Starting sshd … [ ok ]

Now you are ready to ssh to the box. Use the –X flag to enable X11 forwarding and the –l option to specify the username you are connecting with:

sleepycat ~ # ssh –X –l mike 192.168.1.1

When you are connected you can issue a command like “firefox &” and marvel as firefox opens with your search history and bookmarks from the remote computer.

When I showed this off at work I was asked “cool, but what are you going to use it for?”

I guess if I ever wanted an undetectable way to surf porn at the office I could use it for that…