Firefox Firebug使用文档

1、Firebug DocumentCOMMAND LINE API3$(id)3$(selector)3$x(xpath)3dir(object)3dirxml(node)3cd(window)3clear()3inspect(object, tabName)3keys(object)3values(object)3debug(fn)4undebug(fn)4monitor(fn)4unmonitor(fn)4monitorEvents(object, types)4unmonitorEvents(object, types)4profile(title)4profileEnd()4CONSOL

2、E API4console.log(object, object, .)4console.debug(object, object, .)5(object, object, .)5console.warn(object, object, .)5console.error(object, object, .)5console.assert(expression, object, .)5console.dir(object)5console.dirxml(node)6console.trace()6console.group(object, object, .)6conso

3、le.groupCollapsed(object, object, .)6console.groupEnd()6console.time(name)6console.timeEnd(name)6file(title)6fileEnd()6console.count(title)6Implementation Notes7Firebug 1.47Firebug 1.37Firebug 1.27Firebug 1.1 and earlier7KEYBOARD AND MOUSE SHORTCUTS7Global7HTML Tab7HTML Editor8

4、HTML Inspect Mode8Script Tab8DOM Tab8DOM and Watch Editor9CSS Tab9CSS Editor9Layout Tab9Layout Editor9Command Line (small)10Command Line APIThe Firebug command line provides these special functions for your convenience:$(id)Returns a single element with the given id.$(selector)Returns an array of el

5、ements 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

6、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 pa

7、ge 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.va

8、lues(object)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 a

9、ll 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, con

10、textmenu, 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 file(title)Turns on the JavaScript profiler. The optional argument title would contain the text to be printed in the hea

11、der of the profile fileEnd()Turns off the JavaScript profiler and prints its report.Console APIFirebug 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 flo

12、wing through your scripts.console.log(object, object, .)Writes a message to the console. You may pass as many arguments as youd 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:

13、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 mo

14、re 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 cl

15、icked to inspect the object in Firebugs 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

16、 supported)%fFloating point number (numeric formatting is not yet supported)%oObject hyperlinkconsole.debug(object, object, .)Writes a message to the console, including a hyperlink to the line where it was (object, object, .)Writes a message to the console with the visual info ico

17、n 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 vis

18、ual error icon and color coding and a hyperlink to the line where it was called.console.assert(expression, object, .)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 objec

19、t. 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 intera

20、ctive 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 t

21、o 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

22、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

23、(name)Stops a timer created by a call to console.time(name) and writes the time file(title)Turns on the JavaScript profiler. The optional argument title would contain the text to be printed in the header of the profile fileEnd()Turns off the JavaScript profiler a

24、nd 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 NotesThe console is an object attached to the window object in the web

25、 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.4The console is implemented by adding a div element and a script tag to the web page just before the first Javascript script

26、 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.3As in Firebug 1.4Firebug 1.2The code and tags are added on document load event.Firebug 1.1 and earlierThe console is implemented with an insecure tech

27、niqueKeyboard and Mouse ShortcutsGlobalOpen Firebug PanelF12Close Firebug PanelF12Open Firebug in WindowCtrl+F12Switch to Previous TabCtrl+Focus Command LineCtrl+Shift+LFocus Search BoxCtrl+Shift+KToggle Inspect ModeCtrl+Shift+CToggle JavaScript ProfilerCtrl+Shift+PRe-Execute Last Command LineCtrl+S

28、hift+EHTML TabEdit AttributeClick on name or valueEdit Text NodeClick on textEdit ElementDouble-Click tag nameNext Node in PathCtrl+.Previous Node in PathCtrl+,HTML EditorFinish EditingReturnCancel EditingEscAdvance to Next FieldTabAdvance to Previous FieldShift+TabHTML Inspect ModeCancel Inspection

29、EscInspect ParentCtrl+UpInspect ChildCtrl+DownScript TabContinueF8Ctrl+/Step OverF10Ctrl+Step IntoF11Ctrl+;Step OutShift+F11Ctrl+Shift+;Toggle BreakpointClick on line numberDisable BreakpointShift+Click on line numberEdit Breakpoint ConditionRight-Click on line numberRun to LineMiddle-Click on line numberCtrl+Click on line numberNext Function on StackCtrl+.Previous Function on StackCtrl+,Focus Menu of ScriptsCtrl+SpaceFocus Watch EditorCtrl+Shift+NDOM TabEdit PropertyDouble-Click on empty spaceNext Object in PathCtrl+.Previous