Firefox tools
for developers

Luke Wagner / Mozilla

About me

  • Worked at Mozilla for 4 years on the JavaScript Engine
  • Mostly on performance
  • Wrote OdinMonkey to optimize asm.js
  • Kinda weak on the DOM/CSS
    • (as will be this presentation, sorry)

About Mozilla

about: all the things!

  • about:about - See them all
  • about:support - The all-powerful Reset Firefox button
  • about:config - (Next slide)
  • about:memory - (Next next slide)

about:config

  • Turn on window.dump:
    • browser.dom.window.dump.enabled
    • Messages go to stdout, grep your heart out
  • Log GC events to Browser Console:
    • javascript.options.mem.log
  • Change the "slow script" timeout (value in seconds):
    • dom.max_script_run_time
  • Enable/Disable high/low-end JIT:
    • javascript.options.asmjs
    • javascript.options.ion.content
    • javascript.options.baseline.content
    • Try toggling them on this asm.js demo

about:memory

Mostly internal developer tool, but some general uses:

  • What tab/iframe takes how much memory for what
  • Tooltips explain what entries mean
  • Diff
  • Good for filing bugs

New Firefox builtin devtools!

The Classics

  • Console
  • Debugger (demo)
  • Profiler (demo)
  • Inspector
  • Style Editor
  • Network

Tilt

  • Click the 3D box
  • Pretty

Highlight Painted Area

  • Click the paint brush
  • For optimizing layout/drawing operations

Responsive Design Mode

  • Click the squre containing tiny square
  • See how your site looks at standard mobile/table screen widths
  • Simulate touch events

Remote devtools

  • Debug Firefox Mobile (on Android) or FF OS remotely
  • Docs
  • (demo)

Remote devtools

  • Firefox OS Simulator
  • Docs
  • (demo)

Scratchpad

  • MDN link
  • Beefier REPL than Web Console
  • Executes in the currently selected tab
  • Can have multiple open at once
  • Also pairs well with...

The Debugger API

  • Industrial strength: used by the Firefox builtin debugger
    • Soon Firebug!
  • Pure JS API → easy to test → stability
  • Clean design; easy to pick up once you get the basic concepts

Debugger + Scratchpad Demo

First we need a privileged execution context:

  1. Open Developer Toolbar, click on the gear
  2. Check "Enable chrome debugging"
  3. Open a scratchpad
  4. Click the "Environment" menu and choose "Browser"

Note: console.log will now go to the Browser Console

Debugger + Scratchpad Demo

Next, get a Debugger object


// Add the 'Debugger' constructor to the current global scope
Components.utils.import("resource://gre/modules/jsdebugger.jsm");
addDebuggerToGlobal(this);

// The current global scope is a browser-internal "ChromeWindow".
// Let's not mess with any global state because it might bork the browser
(function() {
    // Get the HTML window corresponding to the current tab:
    let win = gBrowser.selectedBrowser.contentWindow.wrappedJSObject;
    
    // Create a debugger connection to win
    let dbg = new Debugger(win);

    ...
})();
                

Debugger + Scratchpad Demo

Now let's do something that you can't do using any current JS debugger GUI (that I know of): put a conditional breakpoint on a function that inspects the stack.


dbg.onEnterFrame = function(frame) {
    if (frame.type === 'call' &&
        frame.callee.name == 'interestingCallee' &&
        frame.older.type === 'call' &&
        frame.older.callee.name.indexOf('interesting') >= 0)
    {
        win.breakOnMe();
    }
}
                

Debugger + Scratchpad Demo

Try it out!

  1. Load up this page
  2. Click "Run" in Scratchpad
  3. Open the Firefox Debugger
  4. Put a breakpoint on "breakOnMe"
  5. Click "Boring Caller": no break
  6. Click "Interesting Caller": break!

Fin

Questions?

(slides: http://people.mozilla.org/~lwagner/devtools-pres)