Trigger debugger with key combination

Whenever you need to freeze your website and check its state, you can trigger debugger at any given point.

Let’s say you want to check which classes are passed when element is hovered - move your mouse over it and trigger debugger. The page will freeze and you can browse the dom tree freely.

According to Google Chrome’s DevTools documentation:

Pause script execution (if currently running) or resume (if currently paused)

You need to have your DevTools opened

MacOs: F8 or Command+\

Windows/Linux: F8 or Control+\

Hide Capture screenshots/Overview on Chrome Net. Tab

Duck: @janek

Inspecting elements that disappear from DOM

It’s impossible to right-click an element that is dynamically injected into DOM, as the click causes it to disappear:

The solution is to toggle a debugger on a parent element:

This way you are able to modify it:

Take whole page screenshot in Chrome

1. Inspect any element
2. Open Device Toolbar
3. Choose a laptop, mobile device or custom size
4. Press the 3 dots and ‘Capture full size screenshot’