A Closer Look at the Firefox Console

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
  • $
  • $$
  • $0
  • $_
• Inspecting Elements
  • keys()
  • inspect()
  • cd()
• Other useful commands
  • copy()
  • clearHistory()
  • :help
  • :screenshot
• Bonus

Selecting elements

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.

$

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.

$$

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…

$0

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.

$_

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.

Inspecting elements

keys()

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.

inspect()

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.

cd()

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.

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

copy()

This function will copy the argument you pass to it to your clipboard.

clearHistory()

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

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

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.

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

• 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!