Firebug notes: - Downloaded and installed Firebug 1.2.1 -------------------------------------- - https://addons.mozilla.org/en-US/firefox/addon/1843 - Firebug 1.2 requires Firefox 2 or 3. OK. - Clicked "Add to Firefox" to get Version 1.2.1, 9/12/2008, 478 KB - Had to enable software installation - It downloaded, installed into Firefox, and re-started Firefox in about 20 seconds. - Demo ---- - Watched Joe Hewitt's advanced features demo at: http://yuiblog.com/blog/2007/01/26/video-hewitt-firebug/ - Getting Started --------------- - Run Firebug from Firefox Tools menu - Docs available via drop down menu of Firebug icon in Firebug tab bar which takes you to: http://getfirebug.com/docs.html - Console tab: - Enable Console - Enable JavaScript debugging - Enable Network monitoring - Options (right side of left tab bar) | Break on all errors - Clicked a button in my Web app to run some JavaScript. Got error: document.getElementById("txtAnalyzeIdent") has no properties - Right. It should be: txtAnalyzerIdent - Now fixed. - Loaded a page with a JavaScript error. - Click Script tab to see code with erroneous line highlighted - Click Stack tab in right pane of Script tab to see call stack. - Call stack has routine names but no line numbers. - Call stack is clickable (only sometimes, why?) - Profiler -------- - Ran Firebug Profiler from Firefox Tools menu (Ctrl-Shift-P), then did some stuff, then ran it again to see stats in Console tab. - For each method called: - Number times called - Percent of elapsed time - "Own Time" = Millseconds spent in method but not in another method called by it. - "Time" = Milliseconds spent in method, including in called methods. - Average, min, and max times per call - Filename and line number (clickable links) - Can insert profiler calls in your code, to limit what you measure: - console.profile() - console.profileEnd() - After running profiler: - Can left click profile line, or filename and line number to jump into source. - Can left click filename and line number - Can right click profile lines in console to: - Copy source code of function - Start logging to console all calls to function, showing params, etc. - Logged lines show params, which highlight in the HTML page when you hover over them, if they are controls, and which take you to the HTML for the object if you click them. - Can click the function names in the logged lines to see the source code of the function. - Inspect it in the DOM tab - Inspect ------- - Click Inspect, then an HTML element to see HTML text for it. - Then right click to: - Copy HTML - Copy inner HTML - Copy XPath needed to find it in the DOM - Log all events sent to it. - Logged to console, showing event params - Can filter unwanted events by typing a pattern into the quick search box of the Firebug toolbar - They are all still getting logged, but only some of the log lines are shown - Can click event to see properties in DOM tab - Give it a new attribute - Edit an attribute value - Delete an attribute - Edit the HTML - Delete the element - Inspect it in the DOM tab - Network Traffic --------------- - In console tab, can see HTTP request traffic being logged (Ajax) - Can expand tree of each request to see params, request headers, response headers, copy of response (requires re-post) - Can see all network traffic (not just Ajax requests) in Net tab, - Can filter different types in and out: - HTML - CSS - JS - XHR - Images - Hovering over the image request shows the image in a popup, along with its width and height. - Flash - All - Can see size of each response, and totals of sizes for each type or for all. Useful when doing a Shift-Reload to force it to get all files. Can see how much app sends across wire. - Can see graph of time to fetch each file, and total time to load page. - Editing HTML and CSS -------------------- - Pretty much all info displays are editable. Click on, or tab around HTML, CSS, etc. to see editable fields. - Or click Edit button to edit HTML or CSS in a larger window. - Re-rendered live at each keystroke - Hit ESC to cancel changes - Temporary, what-if type changes. No way to save changes - When editing a number, nudge it up/down via arrow keys - When editing an enumerated type value, cycle via arrow keys. - Same for colors - Hovering over color in HTML or CSS shows color in small swatch popup - Use Layout tab of HTML tab to see sizes, margins, borders, and padding. - As you mouse over the Layout tab, horizontal and vertical rulers appear in the HTML page showing the exact numeric sizes, margins, borders, and padding. - Rulers are zeroed at offset parent of the HTML element. - Click, tab, edit, nudge (up/down arrows) the numeric values for sizes, margins, borders, and padding, and watch the effect on the live HTML. - Move mouse outside of Layout tab to temporarily hide rulers and the highlighting of margin values, etc. to see what the page will really look like. Move back in to resume tweaking. - ESC to cancel most recent change - Use Style tab of HTML tab to edit CSS. - Shows entire inheritance chain of styles, with clickable links to CSS files and line numbers. - Can click "not" (circle w/line through it) at left of each CSS element to disable it to see what default value does. - Can flatten hierarchy to see complete actual set of CSS values via Options | Show Computed Style - JavaScript debugging -------------------- - Script tab | Choose JS file from dropdown next to Inspect button. - Ctrl-Shift-Space to drop it down. - Start typing a string that occurs in filename to filter the list. - Or navigate to a JS function via the DOM tab, since they are objects too, and all my custom objects are bolded at the top of the list. - Expand com, bristle, jslib, etc. to see functions. Click on them to jump to the code. - Use Quick Search in Firebug toolbar to find the method you want. - Click line number to set breakpoint, or use right click menu. - Right click on line number to specify expression for conditional breakpoint. - Set breakpoints inside methods, not on method name or open brace. - See Breakpoints tab to see if it worked. Those that are "undefined" won't be hit. - Interact w/page, or re-load page to cause events to fire and call methods. - Toolbar buttons for: - F8 = Continue - F10 = Step over - F11 = Step into - Step out - Middle mouse click or Ctrl-Click on line number to run to that line - Hover over variables to see values in tooltips - Use Watch tab to see/edit variable values - "New Watch expression..." button to watch expressions instead of just variables. - Tab for autocomplete - Esc to cancel portions of autocomplete - Type "#" and number in Quick Search to go to line number - Ctrl-Shift-K = Quick Search - Enter = Search Next - Detached firebug window may support Ctrl-F (not grabbed by browser) - Ctrl-Shift-L = Open Command line window (JavaScript console), like VB immediate window. Ctrl-Enter to execute. - Console log debugging --------------------- - console.log(object_name) - Logs in the console a link to the object in the DOM tab. - console.dir(object_name) - Logs all current properties of the object to the console (since a link to the DOM shows latest props, not props at time of logging). - console.trace(function) - Logs callstacks of all calls to function - Keys (from http://getfirebug.com/keyboard.html) ----------------------------------------------- Global ------ Open Firebug Panel F12 Close Firebug Panel F12 Open Firebug in Window Ctrl+F12 Switch to Previous Tab Ctrl+` Focus Command Line Ctrl+Shift+L Focus Search Box Ctrl+Shift+K Toggle Inspect Mode Ctrl+Shift+C Toggle JavaScript Profiler Ctrl+Shift+P Re-Execute Last Command Line Ctrl+Shift+E HTML Tab -------- Edit Attribute Click on name or value Edit Text Node Click on text Edit Element Double-Click tag name Next Node in Path Ctrl+. Previous Node in Path Ctrl+, HTML Editor ----------- Finish Editing Return Cancel Editing Esc Advance to Next Field Tab Advance to Previous Field Shift+Tab HTML Inspect Mode ----------------- Cancel Inspection Esc Inspect Parent Ctrl+Up Inspect Child Ctrl+Down Script Tab ---------- Continue F5 (no, actually F8) Ctrl+/ Step Over F10 Ctrl+' Step Into F11 Ctrl+; Step Out Shift+F11 Ctrl+Shift+; Toggle Breakpoint Click on line number Disable Breakpoint Shift+Click on line number Edit Breakpoint Condition Right-Click on line number Run to Line Middle-Click on line number Ctrl+Click on line number Next Function on Stack Ctrl+. Previous Function on Stack Ctrl+, Focus Menu of Scripts Ctrl+Space Focus Watch Editor Ctrl+Shift+N DOM Tab ------- Edit Property Double-Click on empty space Next Object in Path Ctrl+. Previous Object in Path Ctrl+, DOM and Watch Editor -------------------- Finish Editing Return Cancel Editing Esc Autocomplete Next Property Tab Autocomplete Previous Property Shift+Tab CSS Tab ------- Edit Property Click on property Insert New Property Double-Click on white-space Focus Menu of Style Sheets Ctrl+Space CSS Editor ---------- Finish Editing Return Cancel Editing Esc Advance to Next Field Tab Advance to Previous Field Shift+Tab Increase Number by One Up Decrease Number by One Down Increase Number by Ten Page Up Decrease Number by Ten Page Down Autocomplete Next Keyword Up Autocomplete Previous Keyword Down Layout Tab ---------- Edit Value Click on value Layout Editor ------------- Finish Editing Return Cancel Editing Esc Advance to Next Field Tab Advance to Previous Field Shift+Tab Increase Number by One Up Decrease Number by One Down Increase Number by Ten Page Up Decrease Number by Ten Page Down Command Line (small) -------------------- Autocomplete Next Property Tab Autocomplete Previous Property Shift+Tab Execute Return Inspect Result Shift+Return Open Result's Context Menu Ctrl+Return Command Line (large) -------------------- Execute Ctrl+Return - Other notes from demo --------------------- - Ctrl-Shift-C = Inspect (Firefox "Web Developer" extension may have a conflict) - Double click a variable name in the Watch window to change to a new name? - Runs on Mac and Linux as well as Windows. - Futures at the time (now done?): - Syntax validation - Internal APIs - Aptana may integrate their text editor - May integrate w/TextMate - Firebug lite = half-day hack for use w/IE - Makes console.log() and others, but not rest of Firebug - Docs ---- - Read docs at: - http://getfirebug.com/docs.html especially: - http://getfirebug.com/faq.html - http://getfirebug.com/keyboard.html - http://getfirebug.com/commandline.html - Functions that can be called from the command line, or your JavaScript code, while Firebug is running. - http://getfirebug.com/console.html - Functions that operate on the console and can be called from your JavaScript code. --Fred 10/3/2008