Freeze DOM

★★★★★
★★★★★
1,000+ users
<
>
Liquid Death Mountain Water - 16.9 fl oz
★★★★★
★★★★★
Colorado Buffaloes Game Used Rawlings St-5 Football - University
★★★★★
★★★★★
Bundle Fisher Price Little People 6 People & Misc Wood And Plastic
★★★★★
★★★★★
Twisters: The Album (Original Soundtrack) - Vinyl LP (Tan)
★★★★★
★★★★★
LEGO 40725 - Cherry Blossoms
★★★★★
★★★★★
Gardner Bender WingGard Assorted Copper to Copper Wire Connector (10-Pack)
★★★★★
★★★★★

How to use:
- Step 0: Open DevTools Panel (F12 or Right Click -> select 'Inspect')
- Step 1: Right Click -> select 'Freeze DOM'  or Press Cmd + Shift + Y (on Mac) / Cmd + Shift + Y (on Window, Ubuntu)

Source code for those who's curious: https://github.com/coolcorexix /freedom-on-demand

If you find this useful, please consider donating to support my work. It means a lot to me: https://www.buymeacoffee.com/c oolcorexil

Right click on tab content and choose "Freeze DOM" (while devtool panel is open) to freeze the state of website on demand.

With a frozen DOM, you can:
- Inspect an UI part that only available while hovered / focused (for example: keeping the auto complete dropdown of a text input visible)
- Take a snapshot of an in-progress state (for example: loading state)


🔭 Explore more dev tools at: https://nemothecollector.dev/p roducts

Note: The shortcut might be overridden by built-in settings of some browsers for example Arc and Microsoft Edge. To fix it:
- For Arc: go to arc://extensions/shortcuts and update the shortkeys
- For Microsoft Edge: follow this instruction https://www.webnots.com/how-to -assign-keyboard-shortcut-to-e xtension-in-microsoft-edge/
Related