Joe Hewitt is the author of Firebug, the single greatest web development debugging tool ever created. You can watch a video of the talk he gave to Yahoo on the 1.0 release. It’s about a year old, but if you are not familiar with Firebug, it’s a nice overview. I listened to it and tried to note some timestamps of the topics to make them easier to find. These are from the .mp4 video that you can download, so there’s a chance they don’t match up exactly with the Flash version.
2:15 DOM elements are highlighted in yellow as they change
4:30 Javascript profiler overview
5:00 In the Javascript profiler, time is time spent INSIDE function including other calls. Own Time is spent in the individual statements that don’t recurse.
6:35 You can insert calls in code that limit parts of code measured by profiler. Insert console.profile(’something’), then console.profileEnd(’something’). Let’s you see specific code measurements
8:35 View when a function was called and what was passed. In Script tab, right click and ‘log calls’
10:20 Can log events that are sent to elements. Inspect an element, right click, choose ‘log events’. Will give you a list of EVERY event. Can type in quick search box and it will filter by the name of the event.
11:45 You can click events and see DOM properties of the event.
12:10 Firebug created to monitor XML-HTTP Requests (XHR). In the console you can view full requests - body, response headers, parameters, etc in Firebug.
13:20 Console only shows XHR. Net tab shows ALL traffic. Also see requests that aren’t XHR and see a timeline of those requests and delivery.
14:45 NET tab lets you filter by file type with buttons across the top.
16:00 NET tab shows time to GET the file, not render it.
16:25 CSS. You can edit just about anything by clicking and editing.
17:15 Click the element and choose edit tab. Can edit innerHTML and outerHTML. ESC will revert the code to the original. Can copy and paste back to your text editor.
18:20 You can directly edit a value. Can use arrow keys to edit numeric values up and down once clicked. Also use pageup/pagedown for larger changes to those values.
20:00 Use ‘not’ sign to toggle properties in the CSS right hand pane. Lines that are struck out shows property is overridden.
21:05 The layout tab shows the box model. ruler shows on page.
22:45 Can click the values in layout tab and use arrows/pageup/pagedown trick to change amounts again. ESC cancels.
23:10 Computed style shows all CSS properties
24:30 Inspect images and a src attribute hover will show the image and height/width. Same with colors - shows the colors the code represents.
25:30 If you want to see actual style sheet, the name on the right of the style panel is a hyperlink. You can click and see it. Either edit to click or edit button will let you change entire file.
27:00 JS debugging. Breakpoints - stop script execution at a particular line. Red dot - breakpoint.The Watch tab shows local variables. hover over variables and it will show values in left side.
28:45 Watch expressions - type it in or select item in code and right click ‘add watch’. mini command line with autocomplete. Tab cycles through attributes with tab if nothing tabbed. ESC goes back to previous dot.
30:50 Conditional breakpoints - break only when a js expression is true/false.
32:15 Step over, step into, step out. line by line. Right click menu or middle click will do a ‘run to line’, or ctrl-click the line to run to. (For definitions of step over/into/out, see http://www.mozilla.org/rhino/debugger.html.
33:20 F10, F11 shortcuts from MS Visual Studio debugger
33:40 To jump to a line #, use the search box and type #linenumber
34:10 To search plain text in the firebug panel, Ctrl-shift-k, enter goes to next.
35:10 Can jump to specific files in js tab. Grouped by subirectory, just type and it will filter. Quicksilver users - hit Cmd/Ctrl-shft-space opens that list.
36:15 DOM tab shows window properties. Separates built in vars from one you define. Bolded items are ones you added. Clicking functions moves you to the source
37:30 Command line can expand to a box. You can paste into command line. Ctrl-enter runs the code. Bookmarklets - can use copy to crunch it all together.
39:00 Console log feature. console.log(obj) gives you a log of link to object. console.dir gives you properties that are LIVE
41:30 Console.trace shows who called and functions
43:00 Can doubleclick properties to edit
44:25 ctrl-shift-c should activate the ‘inspect’ feature, although the Web Developer Toolbar may already use this shortcut.
45:00 Can extend firefox to add own tabs
47:00 firebug lite - console logging for other browsers.
