Web Console Helpers

  • Revision slug: Tools/Web_Console/Helpers
  • Revision title: Web Console Helpers
  • Revision id: 372801
  • Created:
  • Creator: TTO
  • Is current revision? No
  • Comment $ takes a CSS string now

Revision Content

{{ gecko_minversion_header("2.0") }}

The commands

The JavaScript command line provided by the Web Console offers a few built-in helper functions that make certain tasks easier.

$()
FX16+ Looks up a CSS selector string, returning the first element that matches. Equivalent to {{ domxref("document.querySelector()") }} or calls the $ function in the page, if it exists.
FX4 to FX16 Looks up a string as an ID of a DOM node; this is a shortcut for {{ domxref("document.getElementById()") }} or calls the $ function in the page, if it exists.
$$()
Looks up a CSS selector string, returning a list of DOM nodes that match. This is a shortcut for {{ domxref("document.querySelectorAll()") }}.
$0
The currently-inspected element in the page.
$x()
Evaluate an Xpath expression and return an array of matching nodes.
keys()
Given an object, returns a list of the keys (or property names) on that object. This is a shortcut for object.keys.
values()
Given an object, returns a list of the values on that object; serves as a companion to keys().
clear()
Clears the console output area.
inspect()
Given an object, opens the object inspector for that object.
pprint()
Formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.
help()
Displays help text. Actually, in a delightful example of recursion, it will bring you to this page.

Examples

Example: Looking at the contents of a DOM node

Let's say you have a DOM node with the ID "title". In fact, this page you're reading right now has one, so you can open up the Web Console and try this right now.

Let's take a look at the contents of that node by using the $() and inspect() functions:

inspect($("#title"))

This automatically opens up the object inspector, showing you the contents of the DOM node that matches the CSS selector "#title", which is of course the element with ID "title".

Example: Dumping the contents of a DOM node

That's well and good if you happen to be sitting at the browser exhibiting some problem, but let's say you're debugging remotely for a user, and need a look at the contents of a node. You can have your user open up the Web Console and dump the contents of the node into the log, then copy and paste it into an email to you, using the pprint() function:

pprint($("#title"))

This spews out the contents of the node so you can take a look. Of course, this may be more useful with other objects than a DOM node, but you get the idea.

Revision Source

<div>
  {{ gecko_minversion_header("2.0") }}</div>
<h2 id="The_commands">The commands</h2>
<p>The JavaScript command line provided by the Web Console offers a few built-in helper functions that make certain tasks easier.</p>
<dl>
  <dt>
    <code>$()</code></dt>
  <dd>
    <strong><span style="background-color:#ffff00;">FX16</span><span style="background-color:#ffff00;">+</span></strong> Looks up a CSS selector string, returning the first element that matches. Equivalent to {{ domxref("document.querySelector()") }} or calls the $ function in the page, if it exists.</dd>
  <dd>
    <strong><span style="background-color:#ffff00;">FX4 to FX16</span></strong> Looks up a string as an ID&nbsp;of a DOM&nbsp;node; this is a shortcut for {{ domxref("document.getElementById()") }} or calls the $ function in the page, if it exists.</dd>
  <dt>
    <code>$$()</code></dt>
  <dd>
    Looks up a CSS selector string, returning a list of DOM&nbsp;nodes that match. This is a shortcut for {{ domxref("document.querySelectorAll()") }}.</dd>
  <dt>
    <code>$0</code></dt>
  <dd>
    The currently-inspected element in the page.</dd>
  <dt>
    <code>$x()</code></dt>
  <dd>
    Evaluate an Xpath expression and return an array of matching nodes.</dd>
  <dt>
    <code>keys()</code></dt>
  <dd>
    Given an object, returns a list of the keys (or property names) on that object. This is a shortcut for <code>object.keys</code>.</dd>
  <dt>
    <code>values()</code></dt>
  <dd>
    Given an object, returns a list of the values on that object; serves as a companion to <code>keys()</code>.</dd>
  <dt>
    <code>clear()</code></dt>
  <dd>
    Clears the console output area.</dd>
  <dt>
    <code>inspect()</code></dt>
  <dd>
    Given an object, opens the object inspector for that object.</dd>
  <dt>
    <code>pprint()</code></dt>
  <dd>
    Formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.</dd>
  <dt>
    <code>help()</code></dt>
  <dd>
    Displays help text. Actually, in a delightful example of recursion, it will bring you to this page.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<h3 id="Example.3A.C2.A0Looking_at_the_contents_of_a_DOM.C2.A0node">Example:&nbsp;Looking at the contents of a DOM&nbsp;node</h3>
<p>Let's say you have a DOM&nbsp;node with the ID&nbsp;"title". In fact, this page you're reading right now has one, so you can open up the Web Console and try this right now.</p>
<p>Let's take a look at the contents of that node by using the <code>$()</code>&nbsp;and <code>inspect()</code>&nbsp;functions:</p>
<pre>
<code>inspect($("#title"))</code></pre>
<p>This automatically opens up the object inspector, showing you the contents of the DOM&nbsp;node that matches the CSS selector "#title", which is of course the element with ID "title".</p>
<h3 id="Example.3A.C2.A0Dumping_the_contents_of_a_DOM.C2.A0node">Example:&nbsp;Dumping the contents of a DOM&nbsp;node</h3>
<p>That's well and good if you happen to be sitting at the browser exhibiting some problem, but let's say you're debugging remotely for a user, and need a look at the contents of a node. You can have your user open up the Web Console and dump the contents of the node into the log, then copy and paste it into an email to you, using the <code>pprint()</code>&nbsp;function:</p>
<pre>
pprint($("#title"))
</pre>
<p>This spews out the contents of the node so you can take a look. Of course, this may be more useful with other objects than a DOM&nbsp;node, but you get the idea.</p>
Revert to this revision