Chrome et Firefox sont des navigateurs Web modernes dotés d’outils intégrés pour aider les développeurs à modifier des pages et à résoudre les problèmes directement dans le navigateur.
Les deux possèdent des outils de développement qui ont de nombreuses fonctionnalités en commun et certaines fonctionnalités uniques.
Dans cet article, nous couvrirons les fonctionnalités les plus courantes pour vous aider à démarrer.
Safari possède aussi ce type d’outil, il faut d’abord aller dans les Préférences de Safari, onglet « Avancées » et cocher « Afficher le menu Développement dans la barre de menus ». Un nouveau menu est apparu et les outils de développement sont accessibles et leur manipulation très proche de ce que l’on va découvrir ci-dessous.
Accéder aux outils de développement
Appuyez sur « Ctrl + Maj + i » (PC) ou « Alt + Cmd + i » (Mac) pour ouvrir les outils ou faites un clic droit n’importe où dans la page Web et appuyez sur « Inspecter » ou « examiner l’élément » (Firefox)
Cela ouvrira les outils de développement:
Panneaux disponibles
Sur Chrome
Les panneaux disponibles dans Chrome se trouvent dans la barre supérieure des outils de développement :
- Éléments – Affichez et modifiez le DOM et le CSS.
- Console – Affichez les messages et exécutez JavaScript à partir de la console.
- Sources – Déboguez JavaScript, conservez les modifications apportées dans DevTools lors des rechargements de page, enregistrez et exécutez des extraits de JavaScript et enregistrez les modifications que vous apportez dans DevTools sur le disque.
- Network – Affichez et déboguez l’activité réseau.
- Performance – Trouvez des moyens d’améliorer les performances de charge et d’exécution.
- Memory – Profil d’utilisation de la mémoire et recherche des fuites.
Pour une liste complète des panneaux disponibles, visitez ce lien .
Les éléments et la console sont les panneaux les plus couramment utilisés et ceux que nous aborderons dans cet article.
Panneaux Firefox
Les panneaux disponibles dans Firefox se trouvent dans la barre supérieure des outils de développement :
- Inspecteur – Utilisez l’inspecteur de page pour examiner et modifier le code HTML et CSS d’une page.
- Console – Affichez les messages et exécutez JavaScript à partir de la console.
- Débogueur – Le débogueur JavaScript vous permet de parcourir le code JavaScript et d’examiner ou de modifier son état pour aider à localiser les bogues.
- Réseau – Le Moniteur réseau vous montre toutes les demandes de réseau faites par Firefox, combien de temps chaque demande prend et les détails de chaque demande.
- Performances – L’outil Performances vous donne un aperçu de la réactivité générale de votre site, de JavaScript et des performances de mise en page.
- Accessibilité – L’inspecteur d’accessibilité fournit un moyen d’accéder à des informations importantes exposées aux technologies d’assistance sur la page actuelle via l’arborescence d’accessibilité, vous permettant de vérifier ce qui manque ou nécessite une attention particulière.
Pour une liste complète des panneaux disponibles, visitez ce lien .
Inspecteur et console sont les panneaux les plus couramment utilisés et ceux que nous aborderons dans cet article.
Déplacer l’interface
Pour déplacer les outils de développement, appuyez sur les trois points sur le côté droit de la barre supérieure:
Il existe quatre options: ancrer à gauche, ancrer à droite, ancrer en bas et ouvrir dans une fenêtre distincte.
Afficher la page Web sur différentes tailles d’écran
Chrome et Firefox ont tous deux des options pour simuler l’affichage d’une page Web dans différentes tailles d’écran. Cela vous aidera à voir à quoi ressemble votre site Web sur différentes tailles d’écran et appareils, y compris sur des écrans plus grands que le vôtre !
Pour activer la vue réactive dans Chrome, appuyez sur la «barre d’outils de basculement de l’appareil» sur le côté gauche de la barre supérieure.
Dans Firefox, appuyez sur «Mode de conception réactive» sur le côté droit de la barre supérieure.
Vous disposez de plus d’options pour régler la taille, sélectionner une taille d’écran prédéfinie, régler le zoom, faire pivoter l’appareil, etc.
Le panneau « Elements »
Le panneau des éléments (« inspecteur » dans Firefox) est la fonctionnalité la plus couramment utilisée dans ces outils. C’est là que vous pouvez manipuler la page Web ou ses CSS.
Si vous souhaitez voir à quoi ressemble la page Web avec d’autres styles, contenus ou éléments, vous pouvez apporter ces modifications directement dans ce panneau. Les modifications seront appliquées instantanément à la page Web.
Code source HTML
Le code source est le code HTML qui rend la page Web.
Mettre en surbrillance et sélectionner un élément
Pour sélectionner un élément particulier, vous pouvez appuyer sur l’icône du sélecteur d’élément ou appuyer sur « Ctrl + Maj + C » (PC) ou « alt + cmd + c » (Mac) pour l’activer.
Lorsque ce sélecteur est activé, les éléments que vous survolez seront mis en surbrillance. Si vous cliquez sur cet élément, l’élément sera sélectionné dans le panneau Inspecteur / Éléments :
Modification des classes et des attributs
Si vous voulez voir à quoi ressemble ou fait un élément avec une classe ou un attribut différent, vous pouvez le faire dans le panneau éléments / inspecteur.
Dans Chrome, si vous cliquez avec le bouton droit sur un élément, vous verrez les options « Modifier en HTML » ou « Ajouter un attribut ».
Si vous appuyez sur « Add attribute », vous pourrez saisir un attribut comme un champ de texte.
Vous pouvez ensuite appuyer sur «Entrée» ou cliquer en dehors de l’élément pour ajouter ces modifications.
Si vous appuyez sur « Edit as HTML », l’élément sera converti en zone de texte où vous pourrez modifier le code comme dans un éditeur de texte.
Dans l’image ci-dessus, j’ai tapé de nouvelles classes dans l’attribut class et ajouté un autre attribut comme je pourrais dans un éditeur de texte.
Vous pouvez également cliquer avec le bouton droit directement sur un attribut et modifier l’attribut lui-même.
Cela ouvrira un champ de saisie uniquement sur l’attribut sélectionné.
Dans Firefox, cela fonctionne de la même manière, seules les options sont différentes lorsque vous cliquez avec le bouton droit sur un élément.
Modification du contenu du HTML
Si vous voulez voir à quoi ressemble la page Web avec un contenu différent comme un en-tête différent, vous pouvez aussi modifier le contenu directement dans le panneau éléments / inspecteur.
Dans Firefox et Chrome, il vous suffit de double-cliquer sur le texte de l’élément et cela ouvrira un champ de saisie avec le contenu de l’élément.
Vous pouvez ensuite saisir de nouvelles valeurs et appuyer sur «Entrée» ou cliquer en dehors de l’élément pour mettre à jour la valeur de contenu de l’élément.
Suppression et masquage d’éléments DOM
Si vous souhaitez supprimer ou masquer des éléments de la page, vous pouvez le faire également.
Dans Chrome, cliquez avec le bouton droit sur l’élément que vous souhaitez masquer ou supprimer et il y aura des options pour le faire.
Vous pouvez également appuyer sur la touche «Supprimer» de votre clavier pour supprimer l’élément sélectionné.
Un élément supprimé sera supprimé du DOM et la page restituera comme si elle n’était jamais là.
Un élément masqué sera uniquement masqué et la page sera toujours rendue de la même manière, sauf avec cet élément masqué.
Dans Firefox, l’option est appelée « Delete Node » (Supprimer le nœud) et il n’y a pas d’option pour masquer un élément.
Styles CSS
La partie styles du même panneau est l’endroit où tout le CSS est défini sur l’élément HTML.
Vous pouvez modifier les styles directement dans cette section qui mettra à jour les modifications sur la page Web mais ne mettra pas à jour les modifications dans le fichier d’origine.
Vous pouvez modifier les styles de l’élément sélectionné en écrivant du nouveau code CSS dans l’un des sélecteurs CSS.
Dans l’image ci-dessous, j’ai ajouté un nouveau style de taille de police à l’élément de paragraphe sélectionné qui met à jour l’apparence de la page Web.
Vous mettez à jour les styles de la même manière avec Chrome et Firefox.
En cliquant sur le + dans le panneau Styles, vous pouvez créer une nouvelle règle CSS pour la tester, puis la copier-coller dans votre éditeur de code.
Lorsque vous cliquez sur une valeur (17px par exemple), vous pouvez, au lieu de la changer manuellement, utiliser les flèches du clavier pour augmenter ou diminuer cette valeur.
Les couleurs, les ombres et bien d’autres choses sont modifiables facilement dans cet inspecteur.
La cascades des styles
Les outils de développement vous permettent de visualiser toute la cascade de vos styles et de savoir très précisément d’où vient telle ou telle règle.
Dans l’exemple ci-dessous, nous observons que la couleur a été codée « inline » dans la balise HTML, que les règles de Font viennent du fichier style.css à la ligne 1970, et que la règle line-height annule celle déjà décrite dans une autre CSS (bootstrap-min.css – ligne 549), qui elle-même annulait celle de div.boxwhite (style.css – ligne 1544) et ainsi de suite…
La possibilité d’activer ou désactiver toutes ces règles CSS en les cochant ou décochant vous permet de comprendre précisément le comportement de vos styles en cascade.
Affichage du modèle de boîte d’un élément
Le modèle de boîte est un concept essentiel dans le monde des mises en page de développement Web. Les outils de développement vous permettent de voir la largeur, la hauteur, la bordure, le padding et la marge de votre élément.
Il se trouve dans la section des styles du panneau.
Lorsque vous survolez une partie du modèle de boîte, cette partie de l’élément est mise en surbrillance sur la page Web. Cela aide à déterminer comment votre HTML s’affiche dans votre mise en page.
Recherche de styles à l’aide du filtre
Si vous souhaitez rechercher des styles particuliers dans votre code, vous pouvez le faire en tapant les styles souhaités dans la section filtre.
La zone de recherche du filtre est située dans la même zone que Chrome et Firefox.
Le filtre ne recherchera que dans la hiérarchie de l’élément sélectionné.
Simuler une pseudo-classe
Dans le panneau Styles, vous pouvez également simuler une pseudo-class, par exemple, le passage :hover d’une souris sur un élément. Cela vous permet de voir quelle règle CSS est appliquée.
Il suffit de cliquer sur :hov et vous aurez plusieurs possibilités de simulation :
Le panneau « Console »
Le panneau de la console a deux objectifs principaux: afficher les événements consignés et exécuter Javascript.
Ce panneau aide les développeurs à déboguer leurs applications car les journaux de leur code seront imprimés dans le panneau de la console.
Vous pouvez également exécuter Javascript directement dans le navigateur, ce qui vous permet de faire des choses comme manipuler le DOM dans le navigateur.
La journalisation des informations de votre code à lire dans la console est un moyen fiable de déboguer votre application.
Si j’ai un fichier HTML qui a une section de script qui ressemble à ceci:
<script>
const hello_world = "hello from index.html";
console.log(hello_world);
</script>Si j’ouvre ce fichier dans mon navigateur, la console ressemblera à ceci:
Pour une liste complète des méthodes de console disponibles, visitez ce lien .
Pour conclure…
Vous l’aurez compris, il y a énormément de choses à dire sur ces outils de développement, nous n’avons abordé qu’une petite partie du panneau Elements et à peine le panneau Console.
Ces bases suffiront pour vous aider dans votre code HTML et CSS mais les possibilités sont évidemment bien plus grandes, nous vous invitons à approfondir ce sujet si le développement de sites web vous intéresse.