- Published:October 20th, 2010
- Comments:12 Comments
- Category:Firebug Tip, Planet Mozilla
Here is a brief tip post about the well known Firebug's inspector feature and its integration with the command line.
You need Firebug 1.7a4 that fixes a bug in command line APIs (the fix will be ported into 1.6b3)
When the inspector is used to inspect the current page, Firebug is automatically keeping a history of recent inspected elements. The history is consequently accessible in the command line through following command line APIs.
$0The currently selected object in the inspector.$1The previously selected object in the inspector.$n(index)Access to an array of last 5 inspected elements.
See all Firebug tips
So, you can use $0 as a variable pointing to the currently inspected element and pass it to another functions or access it's properties.
For example, right click on the above screen-shot and pick Inspect Element. Switch to the Console panel and use $0 in the command line to get number of attributes.
jQuery in the command line
Here is another example that uses jQuery APIs in the command line. The $0 element is passed into the jQuery function as a parameter (slideUp method animates the height of the element).
If the current page doesn't use jQuery, you can install it quickly using a jQuerify bookmarklet.
12 Comments
How does this interact with the global variables $0, $1, $n?
[...] Software is hard | Firebug tip: Inspector History & Command Line [...]
@fearphage my bet is it probably makes it hard to access them... window.$0 should grab it in Firebug. The open issue of $ being stolen by firebug is not looking resolvable.
It's also worth noting that these tricks work in webkit inspector (chrome/saf) as well! yay for interop!
[...] Software is hard | Firebug tip: Inspector History & Command Line [...]
[...] Software is hard | Firebug tip: Inspector History & Command Line [...]
@fearpage, Paul Irish: these variables (and all the other command line APIs) are defined within _FirebugCommandLine object and executed using:
with(_FirebugCommandLine) {/*cmd line expr*/}
What do you mean by "The open issue of $ being stolen by firebug"?
If "$" is already defined on the page, Firebug doesn't override it.
Do you have a test case?
[...] Software is hard | Firebug tip: Inspector History & Command Line [...]
[...] are… history la inspector. E o treabă de care habar n-aveam dar care mi-ar fi fost de folos de nenumărate [...]
keeping a history of recent inspected elements is a great feature of firebug
How can _FirebugCommandLine be accessed from the own extension module?
context.window.wrappedJSObject._FirebugCommandLine doesn't intend to work. The $0 could be accessed via _FirebugCommandLine.$0 as $0 is declared from __defineGetter__
[...] Fixed command line API for inspector history (see more). [...]