Skip to content

Instantly share code, notes, and snippets.

@moxdev
Created February 23, 2021 14:48
Show Gist options
  • Save moxdev/b90406a743995f21f0a5cd549e1938fa to your computer and use it in GitHub Desktop.
Save moxdev/b90406a743995f21f0a5cd549e1938fa to your computer and use it in GitHub Desktop.
Console log focused elements in GatsbyJS. Add code to the `gatsby-browser.js` file.
/**
* For debugging focus in Gatsby
* @ https://flaviocopes.com/gatsby-load-external-js/
* @ https://hiddedevries.nl/en/blog/2019-01-30-console-logging-the-focused-element-as-it-changes
* @ https://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml
*/
const addScript = () => {
const html = `<script>
document.body.addEventListener('focus', function() {
console.log('focused: ', document.activeElement)
}, true)
</script>`
const scriptEl = document.createRange().createContextualFragment(html)
document.body.append(scriptEl)
}
export const onClientEntry = () => {
window.onload = () => {
addScript()
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment