Firebug Developers

Firebug Status

• Firebug 1.4.2 - current release, AMO
• Firebug 1.5 - alpha phase (FB 1.5beta released together with Fx 3.6beta)
  getfirebug.com/releases
• Extensions - ~30 Firebug extensions available
  getfirebug.com/extensions
• API Reference - generated from Firebug's source code
  getfirebug.com/developer/api/firebug1.5

Console panel

Persistent across page reloads (history of all logs) Show Network Errors (Use Console -> Show Network Errors option Demo: Error Request

HTML Panel

Debugging HTML Break on Mutation Break on Attribute Change Break on Child Addition or Removal Break on Element Removal CSS Selector Search (maybe not part of 1.5) Demo: Change Attribute

Next: Breakpoint Bar

Script Panel

API for source code decorations Colorize Source Code (FireRainbow extension) Decompile source code (unminified) Performance (scripts on pageas are bigger and bigger)

DOM panel

Break On Property Change Demo: Change Property

Net panel - Visualize HTTP

JSON Explorer XML Explorer Next: WDDX Explorer (Web Distributed Data eXchange)? Better UI for posted data application/x-www-form-urlencoded multipart/form-data Next: multipart/x-mixed-replace Columns Visibility Customization Next: Sorting, Resizing

Demo: XML Response Demo: JSON Response

Net panel - Debugging HTTP

Break On XHR Conditional Breakpoints URL parameter value 'param-name' == 1 Post body value $postBody.indexOf("keyword") Next: Peristent content across reloads

count == 1 count == 2 postBody == "Posted data"

Break On... Next steps

Further Polymorphic Breakpoints APIs for extensions Break On CSS Break On Cookies (Firecookie extension ... Support Conditions for all kinds of Breakpoints Conditional Break on Errors ...

Export HTTP Logs

NetExport Extension HTTP Archive (HAR) Based on JSON HAR Viewer, online preview of exported data softwareishard.com/har/viewer

HTTP Archive (HAR)

Event Listeners

• EventBug Extension BUG #448602 (blocking)
• Explore event handlers on the page (requested many times)
• Find handlers for specific DOM element
• Visualise listener chain (to be done).

Save Changes

• FireDiff extension (Kevin Decker)
• Record all changes made in Firebug (CSS, DOM)
• Next: Undo & Redo, Save Changes
• incaseofstairs.com/firediff/

Future Plans

Better support for extension ecosystem (testing, doc, bundles) Net panel persistence (history of request) Better & generic Search UI for all panels. Memory panel, inspection, GC events, closure size BUG #515946 Break on CSS, Break on Cookies, Break On... Storage panel (local storage, session storage, globalStorage, client side database) Custom Command Line APIs

Chromebug

Author: John J. Barton Debugging a debugger Aka Firebug for Firefox Extensions Based on Firebug source base

Links & Questions

• Firebug Home: getfirebug.com
• Firebug Blog: blog.getfirebug.com
• Firebug Discusssion Group: groups.google.com/group/firebug
• Firebug Issue List: code.google.com/p/fbug/issues/list
• Firebug Extension Tutorial: softwareishard.com/blog




These slides are online at: softwareishard.com/blog





Questions?