Instantly pause the page when DevTools is open using a keyboard shortcut.
The default shortcut is Ctrl + Shift + U or Command + Shift + U. This can be re-assigned in extension settings.
demo.mov
Sometimes we need to inspect an element at a specific point in time.
For example, for elements like popovers or dropdowns, visibility is often controlled using JavaScript events like mousemove/mouseleave, so when we try to inspect these elements, they disappear from the page because the cursor moved or keyboard focus changed.
If we pause the page once the element is visible then it won't disappear when we move the cursor or change keyboard focus, thereby allowing us to inspect the element and its styles.
This can be achieved by running debugger. This extension simply provides a keyboard shortcut for doing so, so that we can instantly pause a page as soon as we're in the desired state.
Chrome DevTools already provides an F8 shortcut to pause script execution, however this doesn't quite achieve the same effect because it will only pause the page when some JavaScript starts to run, and this might not happen for a long time.
Chrome DevTools also lets you force the CSS hover state, however this doesn't help if the element's visibility is controlled using JavaScript event listeners like mousemove/mouseleave.
To resume the page, you can either:
- close DevTools
- in DevTools, navigate to the sources panel and click "resume script execution" (or use the F8 shortcut)
Ideally we could resume the page using the same shortcut that we used to pause the page, however I don't think there is any way to run the "resume script execution" command from an extension.
These extensions provide the similar behaviour but they have larger surface areas (e.g. they require popups or timeouts).