Unlock Hidden Chrome DevTools Tricks: Copy, $ Selectors, and More

The author shares useful Chrome DevTools functions discovered while debugging an API, offering practical tips to improve development efficiency.

Developer Tools Functions

copy

The

copy

command copies any resource from the console, including variables, to the clipboard; after copying, press

Ctrl+V

to paste. It accepts a single argument; additional arguments are ignored. When the data has no variable name, use

Store As Global

to create a temporary variable (e.g.,

temp1

) and then copy it.

$ selectors

The

$

command works similarly to jQuery’s

$

and can be used as a selector.

$0

to

$4

refer to the last clicked element and the previous four elements, respectively.

$

returns an array (not a NodeList), making it easy to apply array methods in the console.

When you need the result of the previous console execution without a variable name, use

$_

, which returns a reference to the last result.

Console Importer ($i)

Install NPM packages directly from the console using

$i('package')

after installing the

Console Importer

extension. Example:

$i('lodash')

makes Lodash available in the console.

getEventListeners

The

getEventListeners

command retrieves event listeners attached to an element, useful for deeply nested structures.

monitor

The built‑in

monitor

function logs calls to a specified function, helping you observe its usage.

Preserve Log

Enable

Preserve Log

in the DevTools settings to keep console output across page reloads or navigations.

inspect

The

inspect

command jumps to the DOM element in the Elements panel, simplifying navigation of complex structures.

Elements Panel

The Elements panel shows

Elements

,

Styles

,

Computed

, and

Layout

. Press "h" to toggle element visibility quickly.

Layout

The Layout sub‑panel visualizes

flex

and

grid

layouts. For grid elements, it displays grid lines, track sizes, and area names. Options allow showing track sizes, area names, and extending grid lines to the viewport edges.

Overlay settings also let you customize grid overlay colors and highlight specific grids.

Flex

In Chrome 91, flex debugging features are more extensive; Chrome 92 synchronizes flex and grid capabilities. The Styles sub‑panel now includes a button to toggle flex layout visualizations.

Animations Group

Under

More Tools → Animations

, you can capture all running animations, adjust speed, duration, and keyframes, and preview combined effects.

Use the timeline to scrub animation progress, drag keyframe circles to modify duration, and adjust the red line to control the current execution point.

Conclusion

The article highlights several practical DevTools features—such as the

copy

command, $ selectors,

Store As Global

,

$_

,

$i

,

getEventListeners

,

monitor

,

Preserve Log

,

inspect

, layout visualizations, and animation tools—that can significantly boost web development productivity.