Debug dello stato dell'applicazione attivato dal focus

Nell'ispettore di elementi di qualsiasi browser moderno, puoi forzare un elemento in uno stato :hover o :focus per eseguire il debug di problemi di stile. A volte, vuoi eseguire il debug di un problema di un elemento con focus in uno stato controllato da JavaScript. Sfortunatamente, gli stati forzati dalla console di sviluppo non sono sempre sufficienti. (Nota: a meno che tu non usi Chrome, a quanto pare, scorri alla fine per una soluzione alternativa!)

Ho incontrato questo problema quando stavo stilizzando un componente <select> personalizzato in React. Il menu a tendina è visibile solo quando l'input è focalizzato, ma non potevo ispezionare questo stato con i devtools. Ogni volta che volevo navigare nell'albero degli elementi, i devtools diventavano l'elemento attivo sulla pagina e il menu scompariva.

Fortunatamente, mi sono imbattuto in un piccolo snippet per aiutare a eseguire il debug in questa situazione.

window.setTimeout(() => { debugger; }, 5000);

Questo aspetterà cinque secondi prima di fermare tutta l'esecuzione del codice con un breakpoint del debugger. Con questo snippet, carico la pagina, imposto tutto nello stato che voglio ispezionare—5 secondi sono più che sufficienti—e aspetto che il timeout scatti. Quando il debugger viene attivato, posso navigare e armeggiare con l'albero degli elementi senza preoccuparmi che la pagina si aggiorni.

In React, ho avvolto questo in una chiamata useEffect per eseguirla una volta per il componente che volevo sottoporre a debug.

useEffect(() => {
  window.setTimeout(() => { debugger; }, 5000);
}, []);

Dopo aver condiviso questo post su Twitter, Bram ha twittato che Chrome DevTools ha una funzionalità per aggirare questo problema. Con l'impostazione 'Emulate a focussed page', la pagina web rimarrà in uno stato focalizzato quando giochi in DevTools. Leggi di più nelle note di rilascio di Chrome DevTool.