Console log focused elements in GatsbyJS. Add code to the `gatsby-browser.js` file.

gatsby-browser.js

/**
 * 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()
  }
}