DEV Community: Charles De Mount

A Closer Look at the Firefox Console

Charles De Mount — Thu, 21 May 2020 02:16:56 +0000

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.

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!

10 Tips about the Firefox Page Inspector

Charles De Mount — Sun, 03 May 2020 21:42:59 +0000

Firefox is my browser of choice for anything involving web development. The developer edition comes with a plethora of tools and niceties which make working, with CSS especially, a breeze.

While everyone raves about tools like the fantastic Grid and Flex Inspectors, or the fonts and changes panels, I felt like there was a gap in my knowledge of the browser to use it to its full potential. So I embarked on a journey of reading all the entries about Firefox on MDN and found cool features which could enhance your development experience.

This is the first part of a series where we will take a look at each of the tools within Firefox.

For now we will focus on the Inspector tool, a best friend of mine.

Shift-Click on the color swatch to change the displayed format

Color formats can be tricky to work with when making small changes for accessibility in particular. An HEX value doesn't tell us much about a specific color besides its hue, thankfully we can toggle between different formats right in the browser.

If the color in question is used as a foreground color, the color picker menu also provides the contrast rating based on WAI-ARIA.

Move the location of Absolutely positioned elements

The joke about centering an element being difficult in CSS might not be longer true with all the introduction of flex and grid properties, but absolutely positioned elements can still be tricky to work with.

You can go about nudging numbers, but why not do it optically? Clicking the target icon in the layout panel allows you to do just that.

Talking about nudging numbers, you can use Shift + Up / Down to increment by a factor of 10, Alt + Up / Down to increment values by 0.1, and Shift + Page up / Page down to increment values by 100.

Editing filters

Clicking on the gray and white swatch next to a filter property in the Rules View will open a filter editor displaying all the effects applied by that filter individually. You can also add, remove, reorder effects, and even save some for later using the drop-down menu at the bottom.

Grayscale Filter

Editing timing functions

When defining an animation or a transition, the timing function might need some tweaks. In the past I would have to use a website like this one to define a better one and update my code before testing it again within the browser.

Thankfully there is a tool in Firefox which allows you to set them directly by clicking the cubic Bézier swatch. You can decide to try modify the current curve or try one of the presets as a starting point. Neat, uh?

Monitoring animations

The animations panel is really useful when working with complex animations that involve a number of elements and properties.

Clicking on an element will open a bottom panel from which we can analyze the components of the running animation. Animation properties which are optimized through the compositor have a lighting bolt icon next to them while hovering on the animation. If they aren't, a message explaining the cause will appear instead.

If your CSS animations seem to stutter, or lack in smoothness, taking a look there might be a good idea.

Restict matches when searching

It is sometimes helpful to search for a particular property name or rule in the Rules view to filter styles. By default, the search will highlight all the items containing the query. For example, if you wanted to look for the flex keyword, you'd obtain all results including flex-direction or flex-flow.

But what if you only wanted to highlight the flex shorthand property instead. You can surround the query with backticks to restrict the match. Et voilà!

Toggling classes

Classes that have been assigned to an element can be quickly toggled using the .cls selector on top of the Rules view. It's so useful and easy to access, I don't know why I don't see it used often enough.

Manipulating Shapes

This feature is so awesome and complex that it would need an entire article to cover it. But it is just too good not to mention.

Using the Shape Path Editor when using either the shape-outside or clip-path properties allows for easy creation of simple to complex shapes within your CSS.

8 little videos about the Firefox shape path editor

Quick referencing

I don't know about you but I only go to the computed panel when something is going very wrong in the cascade. Well, selecting an element in the Computed panel and pressing F1 will open its reference page in MDN. How cool is that?

Re-using the element picker

Using the element picker Shift + Cmd + C, the default behavior exits the tool right after a single selection.

It is possible to continue selecting elments by holding the Shift key. The tool will return to its default behavior once you let go of the key.

And that's it for today. Next, we'll talk about my other best friend, the console panel.

I hope you found something useful, what's your favorite thing about the inspector tool that I haven't mentioned?