hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Développeur: Déboguer les éléments DOM sur votre page avec une ligne de code

Combien de fois avez-vous eu du mal à trouver un problème spécifique à votre mise en page CSS? Des balises de fermeture manquantes aux frères et soeurs imbriqués incorrectement, les questions de CSS sont une douzaine. Et avec ce débogueur de mise en page CSS, le processus est devenu beaucoup plus facile .

Cette ligne de code traverse le DOM et délimite 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ématiques .

GitHub permet aux développeurs de sauvegarder de petits morceaux de code appelés Gists. Ceux-ci sont tous open source et gratuit pour économiser pour votre propre usage . C'est pourquoi ce débogueur CSS est si utile. Il combine les prouesses modernes de Chrome DevTools avec la simplicité des bookmarklets de navigateur .

Pour utiliser ce code, vous devez d'abord copier la version que vous préférez dans la page Gist. Ensuite, vous collez ce code dans votre fenêtre Terminal et exécutez-le . Vous devriez vous retrouver avec un résultat comme celui-ci :

Maintenant, il est possible d' enregistrer ce code sous forme de bookmarklet dans la barre d'outils de votre navigateur. Mais si vous êtes un utilisateur de Chrome, vous pouvez enregistrer ce code JS sous la forme d'un extrait de code 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, pleine de ces contours CSS colorés, pour les éléments DOM des parents et des enfants.

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

Et pour toute personne curieuse d'apprendre comment cela fonctionne, vous pouvez consulter la version annotée avec des commentaires pour chaque ligne de code.

Ce Gist est rempli de commentaires d'utilisateurs et de mises à jour d'autres développeurs qui contribuent à le rendre plus petit et plus efficace. Mais dans son état actuel, c'est l'un des moyens les plus simples pour déboguer n'importe quel DOM avec une seule ligne de code .

Google Earth redessiné - Voici ce qu'il y a de neuf

Google Earth redessiné - Voici ce qu'il y a de neuf

Après l'avoir taquiné pendant une semaine, Google a enfin dévoilé le nouveau et amélioré Google Earth . Disponible dès maintenant sur le navigateur Web et sur les appareils Android, avec une version iOS bientôt disponible, le nouveau Google Earth apporte de nombreuses nouvelles fonctionnalités qui font de la navigation sur le globe numérique un véritable plaisir .Voici tout

(Conseils techniques et de conception)

20 Photos qui vous feront tomber amoureux de nouveau

20 Photos qui vous feront tomber amoureux de nouveau

Il y a une raison pour laquelle la photographie de mariage est si populaire. Une fois bien fait, il capture l'amour partagé entre deux âmes, la parfaite romance dans l'air, la façon dont un marié regarde fixement sa mariée dans sa robe de mariée, et le regard frappé qu'elle porte lorsqu'elle enfile son alliance.Nous u

(Conseils techniques et de conception)