Firefox Firebug使用文档.doc

1 10 Firebug Document COMMAND LINE API 3 id 3 selector 3 x xpath 3 dir object 3 dirxml node 3 cd window 3 clear 3 inspect object tabName 3 keys object 3 values object 3 debug fn 4 undebug fn 4 monitor fn 4 unmonitor fn 4 monitorEvents object types 4 unmonitorEvents object types 4 profile title 4 profileEnd 4 CONSOLE API 4 console log object object 4 console debug object object 5 console info object object 5 console warn object object 5 console error object object 5 console assert expression object 5 console dir object 5 console dirxml node 6 console trace 6 console group object object 6 console groupCollapsed object object 6 console groupEnd 6 console time name 6 console timeEnd name 6 console profile title 6 console profileEnd 6 console count title 6 IMPLEMENTATION NOTES 7 Firebug 1 4 7 2 10 Firebug 1 3 7 Firebug 1 2 7 Firebug 1 1 and earlier 7 KEYBOARD AND MOUSE SHORTCUTS 7 Global 7 HTML Tab 7 HTML Editor 8 HTML Inspect Mode 8 Script Tab 8 DOM Tab 8 DOM and Watch Editor 9 CSS Tab 9 CSS Editor 9 Layout Tab 9 Layout Editor 9 Command Line small 10 3 10 Command Line API The Firebug command line provides these special functions for your convenience id Returns a single element with the given id selector Returns an array of elements that match the given CSS selector x xpath Returns an array of elements that match the given XPath expression dir object Prints an interactive listing of all properties of the object This looks identical to the view that you would see in the DOM tab dirxml node Prints the XML source tree of an HTML or XML element This looks identical to the view that you would see in the HTML tab You can click on any node to inspect it in the HTML tab cd window By default command line expressions are relative to the top level window of the page cd allows you to use the window of a frame in the page instead clear Clears the console inspect object tabName Inspects an object in the most suitable tab or the tab identified by the optional argument tabName The available tab names are html css script and dom keys object Returns an array containing the names of all properties of the object values object 4 10 Returns an array containing the values of all properties of the object debug fn Adds a breakpoint on the first line of a function undebug fn Removes the breakpoint on the first line of a function monitor fn Turns on logging for all calls to a function unmonitor fn Turns off logging for all calls to a function monitorEvents object types Turns on logging for all events dispatched to an object The optional argument types may specify a specific family of events to log The most commonly used values for types are mouse and key The full list of available types includes composition contextmenu drag focus form key load mouse mutation paint scroll text ui and xul unmonitorEvents object types Turns off logging for all events dispatched to an object profile title Turns on the JavaScript profiler The optional argument title would contain the text to be printed in the header of the profile report profileEnd Turns off the JavaScript profiler and prints its report Console API Firebug adds a global variable named console to all web pages loaded in Firefox This object contains many methods that allow you to write to the Firebug console to expose information that is flowing through your scripts 5 10 console log object object Writes a message to the console You may pass as many arguments as you d like and they will be joined together in a space delimited line The first argument to log may be a string containing printf like string substitution patterns For example console log The s jumped over d tall buildings animal count The example above can be re written without string substitution to achieve the same result console log The animal jumped over count tall buildings These two techniques can be combined If you use string substitution but provide more arguments than there are substitution patterns the remaining arguments will be appended in a space delimited line like so console log I am s and I have myName thing1 thing2 thing3 If objects are logged they will be written not as static text but as interactive hyperlinks that can be clicked to inspect the object in Firebug s HTML CSS Script or DOM tabs You may also use the o pattern to substitute a hyperlink in a string Here is the complete set of patterns that you may use for string substitution String Substitution Patterns sString d iInteger numeric formatting is not yet supported fFloating point number numeric formatting is not yet supported oObject hyperlink console debug object object Writes a message to the console including a hyperlink to the line where it was called console info object object Writes a message to the console with the visual info icon and color coding and a hyperlink to the line where it was called console warn object object Writes a message to the console with the visual warning icon and color coding and a hyperlink to the line where it was called console error object object Writes a message to the console with the visual error icon and color coding and a hyperlink to the line where it was called console assert expression object 6 10 Tests that an expression is true If not it will write a message to the console and throw an exception console dir object Prints an interactive listing of all properties of the object This looks identical to the view that you would see in the DOM tab console dirxml node Prints the XML source tree of an HTML or XML element This looks identical to the view that you would see in the HTML tab You can click on any node to inspect it in the HTML tab console trace Prints an interactive stack trace of JavaScript execution at the point where it is called The stack trace details the functions on the stack as well as the values that were passed as arguments to each function You can click each function to take you to its source in the Script tab and click each argument value to inspect it in the DOM or HTML tabs console group object object Writes a message to the console and opens a nested block to indent all future messages sent to the console Call console groupEnd to close the block console groupCollapsed object object Like console group but the block is initially collapsed console groupEnd Closes the most recently opened block created by a call to console group or console groupEnd console time name Creates a new timer under the given name Call console timeEnd name with the same name to stop the timer and print the time elapsed console timeEnd name Stops a timer created by a call to console time name and writes the time elapsed console profile title 7 10 Turns on the JavaScript profiler The optional argument title would contain the text to be printed in the header of the profile report console profileEnd Turns off the JavaScript profiler and prints its report console count title Writes the number of times that the line of code where count was called was executed The optional argument title will print a message in addition to the number of the count Implementation Notes The console is an object attached to the window object in the web page In Firebug for Firefox the object is attached only if the Console panel is enabled In Firebug lite the console is attached if Lite is installed in the page Firebug 1 4 The console is implemented by adding a div element and a script tag to the web page just before the first Javascript script tag is run So the first script tag is compiled then the console is injected then the outer function code of the script tag is executed Firebug 1 3 As in Firebug 1 4 Firebug 1 2 The code and tags are added on document load event Firebug 1 1 and earlier The console is implemented with an insecure technique Keyboard and Mouse Shortcuts GlobalGlobal Open Firebug PanelF12 8 10 Close Firebug PanelF12 Open Firebug in WindowCtrl F12 Switch to Previous TabCtrl Focus Command LineCtrl Shift L Focus Search BoxCtrl Shift K Toggle Inspect ModeCtrl Shift C Toggle JavaScript ProfilerCtrl Shift P Re Execute Last Command LineCtrl Shift E HTML Tab Edit AttributeClick on name or value Edit Text NodeClick on text Edit ElementDouble Click tag name Next Node in PathCtrl Previous Node in PathCtrl HTML Editor Finish EditingReturn Cancel EditingEsc Advance to Next FieldTab Advance to Previous FieldShift Tab HTML Inspect Mode Cancel InspectionEsc Inspect ParentCtrl Up Inspect ChildCtrl Down Script Tab ContinueF8 Ctrl Step OverF10 Ctrl Step IntoF11 Ctrl Step OutShift F11 Ctrl Shift Toggle BreakpointClick on line number Disable BreakpointShift Click on line number Edit Breakpoint ConditionRight Click on line number 9 10 Run to LineMiddle Click on line number Ctrl Click on line number Next Function on StackCtrl Previous Function on StackCtrl Focus Menu of ScriptsCtrl Space Focus Watch EditorCtrl Shift N DOM Tab Edit PropertyDouble Click on empty space Next Object in PathCtrl Previous Object in PathCtrl DOM and Watch Edito