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 fromelement
that matches. If unspecified,element
defaults todocument
. 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 DOMnodesdescended fromelement
that match. If unspecified,element
defaults todocument
. This is like for document.querySelectorAll(), but returns an array instead of a NodeList.
- $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 ofelement
and returns an array of matching nodes. If unspecified,element
defaults todocument
. 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 |
---|---|---|
|
boolean |
When present, this parameter will cause the screenshot to be copied to the clipboard. |
|
number |
The device pixel ratio to use when taking the screenshot. |
|
boolean |
When present, the screenshot will be saved to a file, even if other options (e.g. |
|
string |
The name to use in saving the file. The file should have a “.png” extension. |
|
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, |
|
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.