DEV Community

Christopher Chhim
Christopher Chhim

Posted on

Making The Best Use of DevTools

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: []

Top comments (0)