My Profile Photo

Rich Werden

Web Developer & Software Engineer


A site for Rich to write about code and show some completed projects for future reference...


#TIL: Chrome Debugger Element History trick

Was recently reminded of this Chrome debugger trick that I knew once upon a time I but obviously forgot about.

The debugger remembers the last five DOM elements that you clicked on to examine in the Elements panel.

You can then access these items in the Console by referencing $0 [the most recent], through $4 [the ‘first’ element you clicked on]. I’ll let you work out the particulars, but so far as I’ve found, this will work for any type of DOM tag you click on to examine. Of course, until you click on things, these $_#_ references will return undefined, so make sure to click around on the Elements panel first.

See either this or this official chrome.dev links for full info!


(Apparently in React you can use this trick and reference $r if you have the react devtools open?)