Hover and popover states are temporary and disappear as soon as you move the cursor or click elsewhere, making it difficult to inspect their styles. Thankfully, Chrome DevTools provides a nifty trick to pause these interactions.
The F8 Trick in Chrome DevTools
Chrome DevTools has a feature that helps you freeze the UI state, allowing you to inspect transient elements like hover cards, tooltips, and popovers. By hitting F8 on Windows/Linux (or fn + F8 on macOS), you can pause script execution, effectively freezing the UI.
How to Use It?
- Open Chrome DevTools: Right-click on the page element you want to inspect and select “Inspect” or use
Ctrl+Shift+I/Cmd+Opt+I. - Navigate to the Sources Tab: In DevTools, navigate to the “Sources” tab.
- Trigger the State: Hover over the element or trigger the popover on the webpage so it’s displayed.
- Freeze the UI: While the popover is visible, make sure your last click was within the DevTools window and press F8.
The UI will freeze, and you can now inspect the styles applied to the transient state.
Note: If you’ve clicked anywhere on the actual page, pressing F8 will do nothing. Ensure your last interaction was within the DevTools window for the feature to work correctly.
Practical Use Cases
- Debugging: This trick is invaluable when you’re trying to debug issues related to hover or popover styles.
- Design Inspection: Designers can use this feature to ensure that the styling matches the design specs without asking developers to make temporary changes.
- Performance Profiling: Freezing the UI state can also help with performance profiling for animations or transitions, as you can inspect the applied styles without them disappearing.
Conclusion
The F8 trick in Chrome DevTools is a hidden gem that significantly simplifies the process of inspecting hover and popover styles. By allowing you to freeze the UI, it provides an efficient way to debug and design transient UI states. Once you start using it, you’ll wonder how you ever managed without it.
,
