Using Chrome DevTools Show user agent shadow DOM feature to inspect and customize input placeholders
Show user agent shadow DOM
Using the H key to easily hide nodes in Chrome DevTools
H
Using $0, $1, $2 to navigate through DOM elements with extended history in Chrome DevTools Console.
$0
$1
$2
Duplicate elements in Chrome DevTools using either the right-click option or a keyboard shortcut.
right-click
shortcut
Using the JavaScript Context Drop-down in Google Chrome DevTools to Run JavaScript in an iframe Context
iframe
srcset
Using Google Chrome DevTools to identify which picture is loaded when using the img tag's srcset attribute, which delivers pictures based on the viewport width and Device Pixel Ratio DPR.
img
DPR
Using Chrome DevTools to fix low-contrast text.
low-contrast
Enabling Emulate a focused page in Chrome DevTools to maintain focus for interactive elements (overlay elements), even when clicking outside the inspected element.
Emulate a focused page
Dark/Light
Testing the Operating System's response to the CSS media query prefers-color-scheme, which applies different styles for users preferring 'dark' or 'light' mode.
prefers-color-scheme
in-browser
Generate and test bookmarklets in-browser.
LCP
Using LCP Chrome DevTools Script to display information about the Largest Contentful Paint in the console which adds a green dotted line to the LCP (Largest Contentful Paint) element.
Control programmatically a video to adjust playback from the Chrome DevTools.
Disable an Event Listener Manually using Google Chrome DevTools.
Get the font used for an element in Chromium-based browsers vs. Firefox.
2
2rem
Identify the effects of line-height: 2 (twice the element's font size) versus line-height: 2rem (twice the root font size) by checking the computed style using Chrome DevTools.
line-height: 2
line-height: 2rem