/dev tips

(184) Paint Timing Markers Logpoints for JavaScript code (186)

Chrome DevTools: Generate a JavaScript expression to get a DOM node

Generate a JavaScript expression to get a DOM node

DevTools can generate a JavaScript expression which accesses a DOM node you specify, this generated expression is ready to paste into your codebase.

To try this feature out: right-click on a DOM node in the Elements Panel and select Copy > Copy JS Path. You now have code like this in your clipboard:

document.querySelector('#content')

💡️ Tip: Don't forget to check the quality of generated selector! For example, on a page I tested, DevTools generated a selector like this: 'body > div > div > article:nth-child(1) > p > a:nth-child(3)' !

Try this feature in Canary

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.