loading...
Cover image for 5 Tips and Tricks for Firefox DevTools - Web Console

5 Tips and Tricks for Firefox DevTools - Web Console

lakatos88 profile image Alex Lakatos 🥑 Originally published at alexlakatos.com on ・2 min read

5 Tips and Tricks for Firefox DevTools (6 Part Series)

1) 5 Tips and Tricks for Firefox DevTools - Page Inspector 2) 5 Tips and Tricks for Firefox DevTools - Web Console 3 ... 4 3) 5 Tips and Tricks for Firefox DevTools - JavaScript Debugger 4) 5 Tips and Tricks for Firefox DevTools - Network Monitor 5) 5 Tips and Tricks for Firefox DevTools - Responsive Design Mode 6) 5 Tips and Tricks for Firefox DevTools - Storage Inspector

This is the second post in a series of productivity tips and tricks to help you debug web applications with Firefox Devtools. It shows you 5 tips & tricks for working with the Web Console and the Console API in the Firefox Developer Tools.

CSS Styling in the Web Console output

console.log("#%c%s%c%s", "color: #bada55", "dev", "color: #c55", "tricks")

You can style your Firefox Developer Tools Web Console output using CSS. Not all properties are supported, but quite a few are. The %c directive indicates that whatever comes after it will be styled, while the %s is string substitution. It’s really handy for:

  • highlighting the important parts of a log.
  • multiple color coded level of logging, when console.info, console.warn and console.log are not enough.

CSS Styling in the Web Console output

Search Web Console History

You can search through your Web Console history by pressing CTRL+R on a Mac (F9 on Windows and Linux). After that you can use CTRL+R / CTRL+S (F9 / SHIFT+F9) to move forward/backwards through the search results. It’s really handy to use instead of using the arrow keys, especially since the arrow keys only work for the current session.

Search Web Console History

Screenshots of a Page or Element on a Page

:screenshot --fullpage
:screenshot --selector .css-selector

You can take screenshots from the Web Console, of the visible section, the full page or an element on the page identified with CSS selectors. Really handy when you want to screenshot just an element exactly, whithout having to guess at the box model when you try to crop it out of the page screenshot.

Screenshots of Element on Page

Switch the Web Console JavaScript Context

cd(iframe)

You can switch the Web Console’s JavaScript evaluation context to an iframe using cd(). You can use CSS selectors to target the iframe. It’s really useful to change the iframe in context, especially in places where you can’t open the iframe in it’s own window, like Codepen.

Switch the Web Console JavaScript Contextv

Labeled timer in the Console API

console.time("#devtricks")
console.timeEnd("#devtricks")

You can start a labeled timer from the Console API using console.time("label") and top it using console.timeEnd(label). It’s really handy when you want to log function execution times to the Web Console, keep track of them and label them accordingly.

It’s a weekly thing

This is a weekly thing, I’ve gathered so many tricks over the years. If you’ve liked this or want to see more, I’m @lakatos88 on Twitter, follow me there, that’s where the magic happens.

5 Tips and Tricks for Firefox DevTools (6 Part Series)

1) 5 Tips and Tricks for Firefox DevTools - Page Inspector 2) 5 Tips and Tricks for Firefox DevTools - Web Console 3 ... 4 3) 5 Tips and Tricks for Firefox DevTools - JavaScript Debugger 4) 5 Tips and Tricks for Firefox DevTools - Network Monitor 5) 5 Tips and Tricks for Firefox DevTools - Responsive Design Mode 6) 5 Tips and Tricks for Firefox DevTools - Storage Inspector

Posted on Nov 13 '18 by:

lakatos88 profile

Alex Lakatos 🥑

@lakatos88

Made http://puns.dev. Half of @DevRelAvocados. Reformed #JavaScript person, #DevRel 🥑Manager at @fidelhq by day, @mozillareps & @moztechspeakers by night.

Discussion

markdown guide
 

Didn't know you could take screenshot from the console or search the history! Awesome!

 

Do you use Firefox or Firefox Developers browser?

 

Both. The GIFs here are recorded on the release version of Firefox, but most often than not I find myself on the Developer edition, that where all the new features land first.