Web Console Helpers
Looks up a CSS selector string
selector, returning the first node descended from
elementthat matches. If unspecified,
document. Equivalent to
document.querySelector()or calls the $ function in the page, if it exists.
See the QuerySelector code snippet.
- Looks up a CSS selector string
selector, returning an array of DOM nodes descended from
elementthat match. If unspecified,
document. This is like for
document.querySelectorAll(), but returns an array instead of a
- 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
xpathexpression in the context of
elementand returns an array of matching nodes. If unspecified,
document. The resultType parameter specifies the type of result to return; it can be an XPathResult constant, or a corresponding string:
"nodes"; if not provided,
- (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
- Clears the console output area.
- 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.
- 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
outerHTMLis copied. Otherwise,
JSON.stringifywill be called on the argument, and the result will be copied to the clipboard.
- Displays help text. Actually, in a delightful example of recursion, it brings you to this page.
- Given an object, generates rich output for that object. Once you select the object in the output area, you can use the arrow keys to navigate the object.
- Given an object, returns a list of the keys (or property names) on that object. This is a shortcut for
- Formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.
- 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 number of seconds to delay before taking the screenshot.
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.
--clipboard) are included.
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, "-fullpage" will be appended to the file name.
string The CSS query selector for a single element on the page. When supplied, only this element will be included in the screenshot.
- (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.
- Given an object, returns a list of the values on that object; serves as a companion to
Please refer to the Console API for more information about logging from content.
- The "Use in Console" option in the Inspector generates a variable for a node named
temp2, etc. referencing the node.
Let's say you have a DOM node 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
This automatically generates rich output for the object, showing you the contents of the first DOM node 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.