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
Debug event-based behaviour
In Chrome, right-click on the relevant element (e.g. a button) and select “Inspect Element”. By default, the Styles panel is selected but instead select the Event Listeners panel. In there you can see all events (e.g. click) currently being listened for on that element (and its parent elements so as to include instances of event delegation).
Each event can be expanded to show which element has the event listener attached – for example it might be the current element or might be document. From here you can get to the script containing the code. Click a line number within the code to add a breakpoint. This will pause code execution on that line until you click the play button to continue. You might also log the current value of a variable here.
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.
Throttle network/bandwidth
Go to tab Network then change Throttling to your desired setting, for example “Slow 3G”, or “offline”.