It has come to my attention that some developers out there do not know of certain DevTools features that exist, and I wish to bring these features to the limelight for the convenience of others as well as myself. I am new to DevTools so I also want to jot these down as a point of reference.

Inspect Popups on Hover

• Certain elements cannot be seen via "inspect element" such as tooltips.
• Inspect element that contains such popup.
• Open the Styles pane, click :hov, then Emulate a focused page. Use logpoints
• Debugging with console.log.
• Effective method to debug a production code. Chromium Browsers:
• Open scripts in sources panel.
• Select "Add logpoint" option after right clicking the desired line.

Emulate foldable devices

• Responsive Web Development Chromium Browsers:
• Go to Device Emulation mode
• Select a foldable device
• Toggle portrait & landscape, or single-screen and dual-screen mode from the toolbar to adjust your site accordingly.

Autocomplete styles

• DevTools is designed to suggest the closest-matching property pair to values.

Color formats

• Holding the Shift key and clicking the color preview box allows you to cycle through various color formats such as hex, rgb, hsl, and hwb. Chromium & Safari browsers:
• Safari allows you to change the color format to display-p3.
• A white line is then displayed to show the edge of sRGB.
• As a failsafe, one can right-click on the color box and select “Clamp to sRGB” to use the closest available color in the sRGB space.

This post was heavily inspired from:
Parashar, P. (2024, April 5) DevTools Tips & Tricks Retrieved from: [https://frontendmasters.com/blog/devtools-tips-tricks/#4-autocomplete-styles]