Développeur Déboguer des éléments DOM sur votre page avec une seule ligne de code

Combien de fois avez-vous eu du mal à trouver un problème spécifique gâcher votre mise en page CSS? Des balises de fermeture manquantes aux frères et soeurs mal imbriqués, les problèmes de CSS ne sont pas une mince affaire. Et avec ce débogueur de mise en page CSS, le processus juste a beaucoup plus facile.

Cette ligne de code sera traverser le DOM et décrire chaque élément avec une couleur différente. De cette façon, vous pouvez mieux visualiser comment votre CSS fonctionne (ou ne fonctionne pas) et repérer rapidement les zones à problèmes.

GitHub permet aux développeurs de enregistrer des petits morceaux de code appelé Gists. Ce sont tous open source et libre de enregistrer pour votre propre usage. C'est pourquoi ce débogueur CSS est si utile. Il combine les prouesse moderne de Chrome DevTools avec le simplicité des bookmarklets du navigateur.

Pour utiliser ce code, vous devez d'abord copier quelle que soit la version que vous préférez de la page Gist. Alors vous coller ce code dans votre fenêtre de terminal et exécuter. Vous devriez vous retrouver avec un résultat comme celui-ci:

Maintenant, il est possible de enregistrer ce code en tant que bookmarklet dans la barre d'outils de votre navigateur. Mais si vous êtes un utilisateur de Chrome, vous pouvez enregistrer ce code JS en tant qu'extrait de code ce qui est beaucoup plus facile à exécuter.

Cet extrait de code peut être rappelé encore et encore au clic d'un bouton. Vous pouvez analyser chaque page, plein de ces contours colorés CSS, pour les éléments DOM des parents et des enfants.

Cependant, vous ne devriez pas vous sentir limité à Chrome. Cet extrait fonctionne pour tous les principaux navigateurs, y compris Firefox, Safari, Opera et Internet Explorer.

Et si vous êtes curieux de savoir comment cela fonctionne, vous pouvez consulter le version annotée avec des commentaires pour chaque ligne de code.

Ce Gist est plein de commentaires d'utilisateurs associés et mises à jour d'autres développeurs aidant à le rendre plus petit et plus efficace. Mais dans son état actuel, c’est l’un des moyens les plus simples de déboguez n'importe quel DOM avec une seule ligne de code.