Post #299576

2026-02-15 14:33 UTC

Here&#39;s a thread of cool things I found exploring the #Firefox Developer Tools! First, a really convenient thing: You can &quot;pop out&quot; the Toolbox into a separate window! To do this, open the Toolbox (using F12), click on the ellipsis menu on the right, and select &quot;Separate Window&quot;. I like this much better than the default &quot;docked&quot; modes, especially when using a scrolling window manager like #niri! #webdev #devtools

Replies (4)

@blinry@chaos.social 2026-02-15 14:43

Let's start with the "Inspector", which shows you the tree of HTML elements. You can directly summon it, and inspect a specific element on your current site by pressing Ctrl+Shift+C (Cmd+Opt+C on macOS), and then clicking your element. This is similar to right-clicking the element, and pressing Q, but I like Ctrl+Shift+C a bit better because it will give you a live preview of which node you are picking!

Open ##2981903
@GustavinoBevilacqua@mastodon.cisti.org 2026-02-15 14:35

@blinry@chaos.social Also, really good if you have two monitors!

Open ##2981920
@khleedril@cyberplace.social 2026-02-15 19:59

@blinry@chaos.social The best thing about the Firefox developer tools is that they let you do simple things very well without knowing too much. When I'm debugging a web page, simple things are all I need. It is a great tool!

Open ##2981952
@goerp@mastodon.social 2026-04-10 09:10

@blinry@chaos.social Thanks for these tips! The first one alone is so handy. Maybe I can use these tips to get colleagues (and myself) to use Firefox more.

Open ##2981953