Web Console Helpers

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

$(selector, element)

Looks up a CSS selector string selector , returning the first node descended from element that matches. If unspecified, element defaults to document. Equivalent to document.querySelector() or calls the $ function in the page, if it exists.

See the QuerySelector code snippet.

$$(selector, element)

Looks up a CSS selector string selector, returning an array of DOM nodes descended from element that match. If unspecified, element defaults to document. This is similar to document.querySelectorAll(), but returns an array instead of a NodeList.

$$$(selector, element)

Looks up a CSS selector string selector, returning an array of DOM nodes descended from element that match, including elements in the shadow DOM. If unspecified, element defaults to document.

$0

The currently-inspected element in the page.

$_

Stores the result of the last expression executed in the console’s command line. For example, if you type “2+2 <enter>”, then “$_ <enter>”, the console will print 4.

$x(xpath, element, resultType)

Evaluates the XPath xpath expression in the context of element and returns an array of matching nodes. If unspecified, element defaults to document. The resultType parameter specifies the type of result to return; it can be an XPathResult constant, or a corresponding string: "number", "string", "bool", "node", or "nodes"; if not provided, ANY_TYPE is used.

:block

(Starting in Firefox 80) Followed by an unquoted string, blocks requests where the URL contains that string. In the Network Monitor, the string now appears and is selected in the Request Blocking sidebar. Unblock with :unblock.

clear()

Clears the console output area.

clearHistory()

Just like a normal command line, the console command line remembers the commands you’ve typed. Use this function to clear the console’s command history.

copy()

Copies the argument to the clipboard. If the argument is a string, it’s copied as-is. If the argument is a DOM node, its outerHTML is copied. Otherwise, JSON.stringify will be called on the argument, and the result will be copied to the clipboard.

help() (deprecated)

:help

Displays help text. Actually, in a delightful example of recursion, it brings you to this page.

inspect()

Given an object, generates:doc:rich output <../rich_output/index> for that object. Once you select the object in the output area, you can use the arrow keys to navigate the object.

keys()

Given an object, returns a list of the keys (or property names) on that object. This is a shortcut for Object.keys.

pprint() (deprecated)

Formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.

:screenshot

Creates a screenshot of the current page with the supplied filename. If you don’t supply a filename, the image file will be named with the following format:

Screen Shot yyy-mm-dd at hh.mm.ss.png

The command has the following optional parameters:

Command	Type	Description
--clipboard	boolean	When present, this parameter will cause the screenshot to be copied to the clipboard.
--dpr	number	The device pixel ratio to use when taking the screenshot.
--file	boolean	When present, the screenshot will be saved to a file, even if other options (e.g. --clipboard) are included.
--filename	string	The name to use in saving the file. The file should have a “.png” extension.
--fullpage	boolean	If included, the full webpage will be saved. With this parameter, even the parts of the webpage which are outside the current bounds of the window will be included in the screenshot. When used, -fullpage will be appended to the file name.
--selector	string	The CSS query selector for a single element on the page. When supplied, only this element will be included in the screenshot.

:unblock

(Starting in Firefox 80) Followed by an unquoted string, removes blocking for URLs containing that string. In the Network Monitor, the string is removed from the Request Blocking sidebar. No error is given if the string was not previously blocked.

values()

Given an object, returns a list of the values on that object; serves as a companion to keys().

Please refer to the Console API for more information about logging from content.

Variables

temp*N*

The Use in Console option in the Inspector generates a variable for a node named temp0, temp1, temp2, etc. referencing the node.

Examples

Looking at the contents of a DOMnode

Let’s say you have a DOMnode with the class”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 generates rich output for the object, showing you the contents of the first DOMnode that matches the CSS selector ".title", which is of course the first element with class "title". You can use the up- and down-arrow keys to navigate through the output, the right-arrow key to expand an item, and the left-arrow key to collapse it.

See also

• console