Here’s a (work in progress) list of useful (Mac) Browser DevTools tips, tricks and keyboard shortcuts for my reference and yours. This is a work in progress and I’ll update it as I go.
Console Panel #
Return currently selected element to work with #
$0
Then you can execute its methods or inspect its attribute values, for example:
$0.offsetParent
Pause JavaScript execution #
Cmd + backslash
Firefox #
Get responsive img element’s currentSrc #
Inspect the element, right click and select Show DOM Properties from the context menu.
Google Chrome #
Open the Command Menu #
Command+Shift+P
Disable JavaScript #
Open the Command Menu then type “disable” and you’ll see the option.
Get responsive img element’s currentSrc #
Inspect the element, click the properties tab, toggle open the top item.