DEV Community

Cover image for Firefox developer tools can do that?

Firefox developer tools can do that?

Yaser Adel Mehraban on August 10, 2019

It's been a while since one of the X can do that posts I've been publishing. Furthermore, Firefox Developer tools is just getting better and better...
Collapse
 
cecilelebleu profile image
Cécile Lebleu

Another really useful thing that makes me temporarily move from Vivaldi (chromium) to Firefox for testing is the option to display CSS grid. You can overlay different grids in different colors, and show/hide the line numbers.

Collapse
 
yashints profile image
Yaser Adel Mehraban

Added the Grid inspector Cécile 😊

Collapse
 
yashints profile image
Yaser Adel Mehraban

Totally forgot about this, will add it soonish

Collapse
 
drewtownchi profile image
Drew Town

As a long time Firefox use I can't believe I didn't know about the color format changer! Thanks!

Another thing I use for taking screenshots in FF is to hit the 3 dots in the address bar and use the Take a screenshot to easily take screenshots of visible/full page via a GUI. It's very handy

Collapse
 
Collapse
 
yashints profile image
Yaser Adel Mehraban

That’s grear Alex

Collapse
 
kevinhch profile image
Kevin

Pretty cool and useful, but i miss the '$' selector like google :(, i prefer firefox ofc

Collapse
 
rhymes profile image
rhymes • Edited

$("selector") does exist in Firefox

Collapse
 
jeanmachuca profile image
Jean Machuca

Hello, If you use QCObjects as the main framework in your web app you got the Tag() function that it’s pretty much the same as $ but better performance and a native stack with the .map() nested function for the list. So you can do Tag(‘my path selector’).map(e=> console.log(e)); happy coding!

Collapse
 
elmuerte profile image
Michiel Hendriks

Both $('css.selector') and $x('/xpath/query') are great tools in the console.

Collapse
 
rhymes profile image
rhymes

they are there

Collapse
 
douglasfugazi profile image
Douglas Fugazi

Super useful list of options to Firefox. Thanks a lot for sharing, definitely I'm going to use them

Collapse
 
synchromatik profile image
synchromatik

Next level firebug. CDev tools started falling behind and that's a good thing.

Collapse
 
ganonbit profile image
Andrew Reese

When Quantum came out with CSS Grid support before Chrome I switched back to FF for my main browser and havent looked back. Still use Chrome for testing but not daily coding use.

Collapse
 
yashints profile image
Yaser Adel Mehraban

I use it for development and testing, I've got a couple of extensions not available in FF so have to use Chrome for browsing, etc

Collapse
 
klapifoch profile image
Lennin Padilla

The main problem i see now with Firefox is: They don't provide a real support to inspect frames for websocket and i don't know a good add-on for it

Collapse
 
yashints profile image
Yaser Adel Mehraban • Edited

You can view them in nightly build now

nightly build web socket

Collapse
 
mateiadrielrafael profile image
Matei Adriel

Am I the only one who has to use both ff and chrome daily? I'd like if someone made some posy with different features and how to use them in different browsers

Collapse
 
antonmelnyk profile image
Anton Melnyk

Nice article. I've been using Firefox for development for a few months and it feels much better than Chrome.

Collapse
 
yashints profile image
Yaser Adel Mehraban

Thanks Anton

Collapse
 
yashints profile image
Yaser Adel Mehraban

Don’t do this please. I’ve reported this comment