Firebug: Part 2 - commands

This is a continuation of a series of articles about Firebug.

All cycle: Console , Commands , Debugging , Profiling

Firebug has a nice feature - own functions.
You have already met some of them, for example in Prototype.
And so that you do not doubt that everything is honest, we will continue to torment the Firebug website , because there are no js files connected to it.
')


To get one item with a given id:
$ (id) (don't forget that id is a unique element on the page)
$( 'main' );
$( 'content' );


To get an array of elements that fit this CSS selector:
$$ (selector) (and here the selector can return many elements)
$$( 'p' );
$$( 'div > div#content > div.fullColumn' );


You can also select elements by xpath:
learn about xpath here
$ x (xpath) (xpath also returns an array of elements)
$x( '/html/body/div/img' );
$x( '/html/body/div/img[3]' );


And now, due to the need to discover something new, we will go to the site mentioned above Prototype .

To get an array containing the name of all the properties of an object:
keys(Prototype);
keys(CodeHighlighter);


To get an array containing the values ​​of all properties of an object:
values(Prototype);
values(CodeHighlighter);


You can clear the console without touching the mouse:
clear();


You can also inspect html on the page:
(takes two parameters: the first is the object, the second is the Firebug tab)
inspect($( 'content' )); /* , inspect($('content'), 'html'); */
inspect($( 'content' ), "css" );
inspect({a: 'b' }, "script" );
inspect($( 'content' ), "dom" );


We will need the following set of functions for the next article, so we will look at everything in a row.

Now we set a breakpoint (the breakpoint for the execution of the script), check that everything works and remove it so that it doesn’t bother us:
( debug () sets breakpoint to the first line of the specified function).
element = $( 'header' );
element.hide();
debug(Element.Methods.hide);
element.hide();
undebug(Element.Methods.hide);
element.hide();


Now we install the logger (function call logging), check that everything works and remove it so that it does not interfere with us, and at the same time we return the main one to its original appearance:
( monitor () writes its name and parameters to the console each time the function is called).
element = $( 'header' );
element.show();
monitor(Element.Methods.show);
element.show();
unmonitor(Element.Methods.show);
element.show();


And now we will install the logger of events (logging of events occurring on the page), check that everything works and traditionally remove it:
( monitorEvents () writes to the console about each event happening with the object).
By default, all events are captured, but you can catch different types of events:
"Mouse" and "key" - the most interesting for us (I think it is not difficult to guess their purpose)
but you can also attach to a specific event:
“Composition”, “contextmenu”, “drag”, “focus”, “form”, “key”, “load”, “mouse”, “mutation”, “paint”, “scroll”, “text”, “ui” "And" xul ".

/* */
monitorEvents(document.window);
/* , , ;) */
unmonitorEvents(document.window);
/* */


The article is based on the Firebug Command Line and Michael Sync blog .

* This source code was highlighted with Source Code Highlighter .