A Closer Look at the Firefox Console
Tags: firefox, webdev, beginners
Published: 2020-05-21 02:16:56

In this second installment of the series exploring the developer tools within Firefox, we will look at some of the more interesting commands and keyboard shortcuts you can use to make your life easier while using the console.

## Table of Contents
  * [Selecting Elements](#selecting-elements)
    * [$](#$)
    * [$$](#$$)
    * [$0](#$0)
    * [$_](#$_)
  * [Inspecting Elements](#inspecting-elements)
    * [keys()](#keys)
    * [inspect()](#inspect)
    * [cd()](#cd)
  * [Other useful commands](#others)
    * [copy()](#copy)
    * [clearHistory()](#history)
    * [:help](#help)
    * [:screenshot](#screenshot)
  * [Bonus](#bonus)

## Selecting elements <a name="selecting-elements"></a>

If you have used jQuery, you might be familiar with using the `$` for selecting DOM elements on the page. The console exposes different variations of that symbol as a quick way to reference objects in your document.

### `$` <a name="$"></a>

Is equivalent to the `document.querySelector` method as it returns the first element in the document which matches the selector.

Note that if you are using a library like the forementioned jQuery, using `$` will call the function of the same name directly from the library instead.
{% youtube JZaq18zU5M8 %}

### `$$` <a name="$$"></a>

Is equivalent to `document.querySelectorAll` but, unlike that method, it will return an *array* instead of a standard NodeList. Which means you have direct access to all the methods on the Array prototype such as `forEach`, `map`, `filter`, etc…
{% youtube s5oDIQfcCjE %}

### `$0` <a name="$0"></a>

Will return the currently Inspected element on the page. It is one you are likely to use often every time you want a quick glance at a specific node.
{% youtube ndxGv0eAxJs %}

### `$_` <a name="$_"></a>

Will return the result of the last expression executed in the console's command line. It is very handy to know when making adjustments directly from the console.
{% youtube 8lfjH2OxWvw %}

## Inspecting elements <a name="inspecting-elements"></a>

### `keys()` <a name="keys"></a>

When passed an object as an argument, this function returns an array of the keys on that object. In this sense, it is the console's equivalent to the `Object.keys` method.
{% youtube h_36hSqc5yA %}

### `inspect()` <a name="inspect"></a>

This function takes an object as an argument and opens the inspector for that object. At first this can seem like a roundabout way to do things, but I assure you it can be amazing when using the console within the debugger as we'll see in the next chapter.
{% youtube v_IwXG7WCZc %}

### `cd()` <a name="cd"></a>

Think of this as the `cd` command from your usual command line. The `cd` function in the console allows you to switch between execution context from the top-level document to any of the embedded iframes within it. There are 3 ways you can use it:

- Pass the iframe DOM element
- Pass a CSS selector that matches the frame
- Pass the iframe's global window object

To return to the top level document, again like in your usual command line, simply run the function with no arguments.
{% youtube N8nYGJ5RFEQ %}
{% youtube 2KKOCZPIUYU %}

> While writing this, I learned that the cd command will be deprecated in a future release. Play with it while you can!

## Other useful commands <a name="others"></a>

### `copy()` <a name="copy"></a>

This function will copy the argument you pass to it to your clipboard.
{% youtube CQndASVTfr4 %}

### `clearHistory()` <a name="history"></a>

You can research the console history using `F9` (`Ctrl` + `R` on macOS) and enter part of an expresion. Continuing to type `F9` (`Ctrl`+ `R` on macOS) cycles backwards through the matches, while `Shift` + `F9` (`Ctrl` + `S`) will search *forward* in the list of matches.

You can thus clear the history by using the `clearHistory` command.

### `:help` <a name="help"></a>

This command will bring you to the MDN help page for the console in a new tab. Use it whenever you feel like getting a refresher on the commands or checking some of the other commands not discussed in this article.

### `:screenshot` <a name="screenshot"></a>

You can and probably should mostly use the GUI in the contextual tab bar menu to take a screenshot of webpages, but the developers at Mozilla thought of giving developers an easy access to the same functionality within the console with even more powers.
{% youtube 3sKUmswkRbs %}

By default, executing `:screenshot` within the console will take a screenshot of the viewport and save it as a png file with the name encoded as ... . But it accepts a set of arguments to make it even more powerful.

- `--clipboard` will save the screenshot to your clipboard instead of saving it to your downloads folder.
- `--delay` takes a the number of seconds to delay the screenshot for.
- `--dpr` specifies the device pixel ratio use when taking the screenshot as the number passed to it.
- `--fullpage` will take a screenshot of the entire document instead of the visible area only.
- `--selector` will take a selector and only include the matching element(s) in the screenshot.
- `--file` will save the file to your specified downloads folder even if the `--clipboard` flag was enabled. You will then end up with a copy to the clipboard and also the file saved in your prefered location.

In fact, using the following command now ```:screenshot --filename 'firefox-console-article.png' --file --clipboard --selector '#article-show-container' --delay 0.5``` should put an image named 'firefox-console-article.png' in your downloads folder *and* your clipboard after a delay of half a second.

### Bonus <a name="bonus"></a>

- Instead of using the `clear()` function over and over again to clear the terminal it is best to use the `Ctrl + L` to do so. Again, just like in bash or zsh.
- The console can be toggled from any of the other dev tools by using the `Esc` key.

---

Next, we will take a look at the debugger and how you can use it with the console to speed up your debugging process. Until then, take care!