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]
Top comments (0)