Chrome DevTools: Generate a JavaScript expression to get a DOM node
Last updated: 20th July 2020
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)'
!