• Firecookie Firebug extension - Cookie Manager
• Console panel integration
• Break on Cookie Change
• Conditional breakpoints
  cookie.value == "Some Value"


• Better Console logging for: document.cookies

• Firepicker
  Firebug extension - Color Picker

• FireFontFamily
  Firebug extension
• What font-family is actually used?


Inspect me...

• Net panel preview
• Style panel tooltip

@font-face {
    font-family: "My Font";
    src: url('myFont.woff') format("woff");
}

#myLabel {
    font-family: "My Font";
}

• Show Entities As Symbols: ∫
• Show Entities As Names: ∫
• Show Entities As Unicode ∫

• Break on XHR
• Conditional Breakpoints
• URL Parameter Value
  

  param-name == value

• POST body
  

  $postBody.indexOf("keyword")

• Break on Mutation
  • Attribute Change
  • New Element
  • Remove Element


Demo: Change Attribute

• Event logging in to the Console panel
• Command line API: monitorEvents(element, event-type);

monitorEvents($("#testElement")[0], "mousemove")
unmonitorEvents($("#testElement")[0], "mousemove")

• NetExport
  Firebug extension
• Export Data collected by the Net panel
• HTTP Archive (HAR) format
• HAR Viewer

{
  "log": {
    "version": "1.1",
    "creator": {
      "name": "Firebug",
      "version": "1.10"
    },
    "pages": [ ... ],
    "entries": [ ... ]
}

• HTML Preview Example HTML Response
• JSON Inspector Example JSON Response
• XML Inspector Example XML Response


• Extensible, e.g. Cookies Example Response with Cookies

1. Start inspecting
   
2. Select an element on the page
   

3. Use $0 in the console
   

• Include jQuery on the page, execute in Firebug's command line:

var s=document.createElement('script');
s.setAttribute('src','http://jquery.com/src/jquery-latest.js');
document.getElementsByTagName('body')[0].appendChild(s);

• Use jQuery API on the command line:
• jQuery("img").slideUp()
• jQuery("img").slideDown()