Skip to main content

My DevTools Cheatsheet

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


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.

Pause JavaScript execution

Cmd + backslash


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


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”.


External Link Bookmark Note Entry Search