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...
For further actions, you may consider blocking this person and/or reporting abuse
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.
Added the Grid inspector Cécile 😊
Totally forgot about this, will add it soonish
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 handyI've got a whole series on these, there's a few you've missed:
5 Tips and Tricks for Firefox DevTools - Page Inspector
Alex Lakatos 🇬🇧 ・ Apr 13 ・ 3 min read
5 Tips and Tricks for Firefox DevTools - Web Console
Alex Lakatos 🇬🇧 ・ Apr 19 ・ 2 min read
5 Tips and Tricks for Firefox DevTools - JavaScript Debugger
Alex Lakatos 🇬🇧 ・ Apr 27 ・ 2 min read
5 Tips and Tricks for Firefox DevTools - Network Monitor
Alex Lakatos 🇬🇧 ・ May 7 ・ 3 min read
5 Tips and Tricks for Firefox DevTools - Responsive Design Mode
Alex Lakatos 🇬🇧 ・ Jul 30 ・ 3 min read
That’s grear Alex
Pretty cool and useful, but i miss the '$' selector like google :(, i prefer firefox ofc
$("selector")
does exist in FirefoxHello, 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!
Both
$('css.selector')
and$x('/xpath/query')
are great tools in the console.they are there
Super useful list of options to Firefox. Thanks a lot for sharing, definitely I'm going to use them
Next level firebug. CDev tools started falling behind and that's a good thing.
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.
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
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
You can view them in nightly build now
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
Nice article. I've been using Firefox for development for a few months and it feels much better than Chrome.
Thanks Anton
Don’t do this please. I’ve reported this comment