Firefox Developer Tools
Developer Tools tricks and tips to remember.
Hide a Node
After selecting a node using the Inspector tool, one can easily hide and unhide it using the
Firefox will add
class="__fx-devtools-hide-shortcut__" to the element, making it hidden. Pressing the
h key again will show the node again.
Reference Currently Selected Node with
When a node is inspected, it can be referenced in the Console with the variable
$0. The Console Drawer itself can be opened using the
Store as Global Variable
An inspected node in the Inspector can be stored as a global variable by right-clicking on it and selecting Use in console. It will show up at
0 incrementing) in the console.
Contrary to the reference used above with
temp0 won’t disappear once a new node is selected in the Inspector.
Break on DOM Changes
Right-click the element where to set the breakpoint in Inspector. After selecting Break on…, select Subtree modifications, Attribute modifications, or Node removal.