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.
Return currently selected element to work with
Then you can execute its methods or inspect its attribute values, for example:
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.
Cmd + backslash
Inspect the element, right click and select Show DOM Properties from the context menu.
Open the Command Menu
Open the Command Menu then type “disable” and you’ll see the option.
Inspect the element, click the properties tab, toggle open the top item.
Go to tab Network then change Throttling to your desired setting, for example “Slow 3G”, or “offline”.