Que vous soyez débutant ou professionnel, le dépannage de votre code HTML et CSS peut être un réel problème si vous n'êtes pas équipé correctement. Aujourd'hui, nous allons examiner quelques outils pour vous aider à forcer la soumission de cette page Web embêtante.
Les outils de navigation par défaut
Avant de lancer des outils, des applications et des extensions tierces, vous devez consulter les outils mis à votre disposition directement dans votre navigateur. La plupart des navigateurs modernes intègrent des outils de développement directement dans l'interface.
Jetons un coup d'œil à certains des outils fournis par Safari aux développeurs dès le départ.
Débogage dans Safari
Les outils de développement par défaut de Safari sont bien plus puissants que ce que la plupart des gens leur attribuent. Pour les activer, accédez aux préférences Safari et cochez la case située sous? Avancé? onglet qui dit? Afficher le menu de développement dans la barre de menu.? Maintenant, dans le menu Développer, allez dans? Afficher l'inspecteur Web?
Cela devrait faire apparaître un menu au bas de votre fenêtre contenant des tonnes d'excellentes options pour l'inspection et le débogage de pages Web. Aujourd'hui, nous allons nous concentrer sur deux domaines clés contenant des outils pour votre processus de débogage: les ressources et les éléments.
Sous l'onglet ressources, vous pouvez voir tous les fichiers qui composent le site. Cela inclut les scripts, les images, le HTML, les CSS, etc. Vous pouvez également voir combien de temps chaque élément met à charger et si des erreurs se produisent pendant le processus de chargement.
Sous l'onglet Éléments, vous verrez un aperçu extensible de votre code HTML:
Ici, vous pouvez survoler des portions de code et les voir surlignées dans le site ci-dessus. Vous pouvez également cliquer sur la loupe située en bas pour sélectionner directement tout ce que vous voyez sur la page Web à inspecter. La partie en surbrillance dans l'aperçu de la page vous permet de voir le remplissage et les marges affectant cet élément.
En double-cliquant sur une partie du code HTML, vous pouvez modifier ce que vous voulez. N'oubliez pas qu'il s'agit de modifications sûres et non permanentes, qui ne font que prévisualiser les différences sans affecter réellement votre fichier d'origine.
Une fois que vous avez sélectionné une section ou un objet, vous pouvez voir tous les styles associés à cet objet à l'extrême droite de la fenêtre.
Comme avec le HTML, vous pouvez déboguer et expérimenter en éditant vos styles ici (double-clic). Par exemple, si vous souhaitez modifier la couleur du texte de l'en-tête en jaune, double-cliquez simplement? Blanc? et tapez une nouvelle valeur. Vous pouvez également utiliser les petites cases à cocher pour désactiver des parties de code pour une plus grande flexibilité de débogage.
Enfin, en cliquant sur la petite forme de panneau d’arrêt avec un? X? tout en bas à droite de l'écran, vous pouvez voir les erreurs qui se produisent lors du chargement de la page (comme mentionné ci-dessus, vous pouvez également les voir sous Ressources).
Comme vous pouvez le constater, Safari est un excellent outil de débogage HTML / CSS. Vous pouvez afficher tous les fichiers associés et voir comment / s'ils se chargent, inspecter de près des éléments individuels, éditer le code HTML et CSS directement dans la fenêtre du navigateur et évaluer les erreurs.
Débogage dans d'autres navigateurs
Consultez ces articles pour en savoir plus sur l'utilisation des outils de développement par défaut dans d'autres navigateurs:
- Développement Web avec Firefox
- Découverte des outils de développement d'Internet Explorer
- Outils de développement Opera
Pyromane
Vous ne pouvez tout simplement pas discuter des outils de débogage sans faire apparaître Firebug. Il est largement considéré comme la meilleure option pour ajuster votre CSS dans le navigateur.
Firebug est un add-on gratuit pour Firefox et contient des tonnes de fonctionnalités puissantes et faciles à utiliser pour les développeurs Web. Cliquez sur l'image ci-dessous pour consulter le site et télécharger l'add-on.
Une fois que vous avez installé et activé Firebug, une fenêtre très similaire à celle que nous avons vue dans Safari s’affiche en bas de l’écran. Comme dans Safari, votre fichier HTML présente un aperçu détaillé avec des portions sélectionnables et une mise en surbrillance intelligente dans l'aperçu. Firebug l'emporte toutefois sur Safari en codant par couleur les marges et le remplissage dans l'aperçu du site Web pour faciliter la référence visuelle.
En cliquant sur une section, vous verrez apparaître le CSS associé sur le côté droit.
Alternativement, vous pouvez cliquer sur l'onglet CSS et voir votre fichier CSS entier dans une vue entièrement éditable. Comme dans Safari, les modifications que vous apportez ici ne représentent pas les modifications réelles du fichier, elles visent simplement à vous donner une certaine flexibilité pour le débogage et les expérimentations.
Cela ne fait qu'effleurer la surface de ce que Firebug peut faire. Il existe de nombreuses fonctionnalités plus avancées pour les professionnels débutants et expérimentés. Que vous soyez ou non un utilisateur dédié de Firefox, vous devriez vraiment essayer Firebug par vous-même.
Firebug Lite
Espérons qu'avec le nouveau système d'extension amélioré Safari 5, nous verrons très bientôt un plug-in Firebug officiel ou un autre équivalent tiers. Cependant, entre-temps, si vous utilisez un autre navigateur, vous pouvez utiliser Firebug Lite, un bookmarklet avec de nombreuses fonctionnalités (mais pas toutes) identiques à celles de Firebug.
Xyle Scope
Cultured Code, les développeurs de l'incroyable application de productivité? Things ,? créé une petite application impressionnante pour déboguer et peaufiner vos pages Web. Xyle Scope coûtait 20 $, mais est récemment devenu un téléchargement gratuit.
Vous ne trouverez pas de lien vers ce site sur la page d'accueil de Cultured Code. J'imagine donc qu'ils ont cessé de développer Xyle Scope à la lumière du succès retentissant de Things. Voici un lien direct vers la page de téléchargement.
Xyle Scope a une belle vue en volets séparés avec l'aperçu du site Web à gauche et tous vos outils à droite. Vous pouvez sélectionner des éléments directement sur la révision et voir tous leurs attributs associés. Il y a une tonne d'informations à examiner ici, notamment l'ordre de la cascade, les styles appliqués, les sélecteurs, la hiérarchie des pages, etc. Comme avec Firebug, Xyle Scope vous permet de distinguer visuellement les marges appliquées à un élément.
Vous pouvez ajuster les styles de votre choix et même enregistrer les modifications. Xyle Scope est un outil extrêmement utile et sous-estimé pour ajuster votre HTML et CSS. Il est vraiment regrettable que nous ne voyions pas d'autres mises à jour pour la prise en charge de CSS3 et HTML 5. Si quelqu'un sait différent, faites le moi savoir!
Extrait de débogage CSS
Le dernier outil de débogage que nous allons examiner est un petit hack intelligent que vous pouvez appliquer immédiatement à votre CSS pour examiner la superposition d'éléments sur la page. Je ne sais pas qui a pensé à cela en premier, mais j'ai déjà lu l'extrait de code sur plusieurs sites Web (à l'origine, je l'ai trouvé ici).
Chris Page décrit la fonctionnalité des extraits de code de la manière suivante: «J'utilise le code CSS suivant pour aider à visualiser la structure d'un document XHTML (ou HTML) en mettant un contour coloré autour de la bordure de chaque élément. À chaque niveau de la hiérarchie, la couleur change afin que vous puissiez voir quand? Profondeur? changements.?
La page résultante devrait ressembler à l'image ci-dessous:
Il existe également une version légèrement différente qui applique un élément de survol à chaque ligne afin que vous ne voyiez que les lignes en pointillé lorsque vous survolez une partie spécifique. Sinon, la page apparaît normale.
Pensées de clôture
Outre les outils ci-dessus, vous devez toujours valider votre code CSS et votre code HTML. Cela vous aidera à contourner d'innombrables problèmes et à vous fournir des informations simples sur la meilleure manière de coder vos pages.
J'espère que les outils ci-dessus vous seront utiles dans votre quête de la conception et de la mise en page parfaites du site. Dites-nous, dans la section commentaires ci-dessous, quels outils vous utilisez pour déboguer et peaufiner votre code HTML et CSS!