Entry

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 #

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

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