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]
