Sviluppatore Debugare gli elementi DOM sulla tua pagina con una sola riga di codice

Quante volte hai lottato trova un problema specifico rovinare il tuo layout CSS? Da mancati tag di chiusura a fratelli indebitamente annidati, i problemi dei CSS sono una dozzina di volte. E con questo debugger di layout CSS, il processo giusto è diventato molto più facile.

Questa una riga di codice lo farà attraversare il DOM e delineare ciascun elemento con un colore diverso. In questo modo puoi visualizzare meglio come funziona il tuo CSS (o non funziona) e individuare rapidamente le aree problematiche.

GitHub consente agli sviluppatori di salvare piccoli bit di codice chiamato Gists. Questi sono tutti open source e gratuiti salvare per il proprio uso. Ecco perché questo debugger CSS è così utile. Combina il prodezza moderna di Chrome DevTools con il semplicità dei bookmarklets del browser.

Per usare questo codice, dovresti prima copia la versione che ti piace di più dalla pagina Gist. Allora lei incolla quel codice nella finestra del terminale e eseguirlo. Dovresti finire con un risultato come questo:

Ora, è possibile salva questo codice come bookmarklet nella barra degli strumenti del browser. Ma se sei un utente di Chrome puoi farlo salva questo codice JS come snippet di codice che è molto più facile da eseguire.

Questo snippet di codice può essere ricordato più e più volte con un clic di un pulsante. Puoi analizzare ogni pagina, pieno di questi contorni CSS colorati, per gli elementi DOM di genitori e bambini.

Tuttavia, non dovresti sentirti limitato solo a Chrome. Questo frammento funziona per tutti i principali browser, inclusi Firefox, Safari, Opera e Internet Explorer.

E per chiunque sia curioso di sapere come funziona, puoi dare un'occhiata al versione annotata con commenti per ogni riga di codice.

Questo Gist è pieno di commenti degli utenti correlati e aggiornamenti da altri sviluppatori aiutando a renderlo più piccolo e più efficiente. Ma nel suo stato attuale, questo è uno dei modi più semplici per eseguire il debug di qualsiasi DOM con una singola riga di codice.