Freeze screen in chrome debugger / DevTools panel for popover inspection?

by

Got it working. Here was my procedure:

  1. Browse to the desired page
  2. Open the dev console – F12 on Windows/Linux or option + ⌘ + J on macOS
  3. Select the Sources tab in chrome inspector
  4. In the web browser window, hover over the desired element to initiate the popover
  5. Hit F8 on Windows/Linux (or fn + F8 on macOS) while the popover is showing. If you have clicked anywhere on the actual page F8 will do nothing. Your last click needs to be somewhere in the inspector, like the sources tab
  6. Go to the Elements tab in inspector
  7. Find your popover (it will be nested in the trigger element’s HTML)
  8. Have fun modifying the CSS

More Related Contents:

  1. See :hover state in Chrome Developer Tools
  2. What do the crossed style properties in Google Chrome devtools mean?
  3. Custom.css has stopped working in 32.0.1700.76 m Google Chrome update
  4. Chrome / Safari not filling 100% height of flex parent
  5. How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
  6. Remove blue border from css custom-styled button in Chrome
  7. How to style a select tag’s option element?
  8. Google Chrome Printing Page Breaks
  9. How to save CSS changes of Styles panel of Chrome Developer Tools?
  10. How to apply specific CSS rules to Chrome only?
  11. :not() selector not behaving the same between Safari and Chrome/Firefox
  12. Is there any “font smoothing” in Google Chrome?
  13. Height 100% on flexbox column child [duplicate]
  14. less.js not working in chrome
  15. Background Image for Select (dropdown) does not work in Chrome
  16. Chrome Developer Tools: How to find out what is overriding a CSS rule?
  17. Webkit CSS to control the box around the color in an input[type=color]?
  18. What does it mean when a CSS rule is grayed out in Chrome’s element inspector?
  19. CSS-Only Sticky Table Headers In Chrome
  20. Fonts looks different in Firefox and Chrome
  21. Chrome renders colours differently from Safari and Firefox
  22. Changing an input’s HTML5 placeholder color with CSS does not work on Chrome
  23. How to reset / remove chrome’s input highlighting / focus border? [duplicate]
  24. Removing the image border in Chrome/IE9
  25. Print Background colours in Chrome
  26. Using “word-wrap: break-word” within a table [duplicate]
  27. WebKit CSS content Unicode bug?
  28. chrome : how to turn off user agent stylesheet settings?
  29. -webkit-font-smoothing property has no effect in Chrome
  30. How to Make Select Element be Transparent in Chrome?

Leave a Comment