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 h key.
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 $0
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 Escape key.
Firefox does not to the best of my knowledge indicate with a variable in the Inspector tab that the node can be referenced, line Chromium-based browser do with == $0.
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 temp0 (with 0 incrementing) in the console.
Contrary to the reference used above with $0, 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.