Chrome Developer Tools est une boîte à outils complète conçue explicitement pour les développeurs et intégrée directement dans le navigateur Chrome. Grâce à ces outils, les développeurs peuvent modifier les pages web en temps réel, accélérer le diagnostic des problèmes et le développement des sites web.
Même si vous n'êtes pas un développeur, vous pouvez trouver un intérêt à utiliser les outils pour développeurs.
Qu'est-ce que les outils de développement Chrome ?
Chrome Developer Tools est un ensemble d'outils puissants intégrés directement dans le navigateur Chrome, conçus pour aider les développeurs dans diverses tâches et améliorer le développement de sites web. Lorsque vous ouvrez Developer Tools, vous voyez apparaître sur le côté droit de la page un panneau contenant plusieurs onglets :
- Elements : Affiche le code HTML et le code CSS en ligne utilisés pour construire la page web.
- Console : Traite avec JavaScript et fournit des informations sur les éléments interactifs de la page.
- Sources : Affiche et permet d'inspecter tous les fichiers utilisés pour créer le site web.
- Réseau : Affiche tous les fichiers qui se chargent dans l'URL que vous consultez et fournit des informations détaillées sur les temps de chargement.
- Application : Révèle les informations de stockage du navigateur, y compris les bases de données du navigateur et le contrôle granulaire des cookies.
- Sécurité : Fournit des informations de base sur la sécurité, telles que l'affichage du certificat HTTPS et de l'état TLS d'un site.
- La mémoire : Offre des aperçus sur utilisation de la mémoire et la performance.
- Performance : Aide les développeurs à optimiser les performances du site en générant des rapports sur les fonctionnalités et la structure.
Les outils pour développeurs Chrome sont mis à jour à chaque nouvelle version de Chrome. Pour vous assurer qu'ils sont à jour, accédez à la page Composants en tapant chrome://composants dans la barre d'outils de votre navigateur. À partir de là, sélectionnez "Chrome Improved Recovery" et vérifiez si des mises à jour sont disponibles.
Il est essentiel de comprendre que les outils de développement ne vous permettront pas de modifier le code du site web. La modification du backend du site nécessite un accès au serveur du site. Les outils de développement n'affectent que le code utilisé par votre navigateur pour afficher le site, ce qui en fait un environnement sans risque, même pour les débutants. Lorsque vous fermez la fenêtre des outils de développement et que vous revenez sur le site web, tout reste comme avant.
Comment ouvrir les outils de développement ?
Pour ouvrir les outils de développement de Chrome, vous pouvez utiliser les raccourcis clavier ou y accéder via le menu de Chrome. Par exemple :
- Sur Mac OS : Utilisez les touches CMD+Shift+J ou CMD+Shift+C.
- Sous Linux, Chromebook et Windows : Utilisez Ctrl+Shift+J. Vous pouvez également faire un clic droit (Windows) ou un Ctrl-clic (Mac) sur n'importe quel élément d'une page web et choisir "Inspecter" pour ouvrir les outils de développement.
Il est impossible d'accéder directement aux outils du développeur sur Android lorsqu'ils sont utilisés sur des appareils mobiles. À la place, vous pouvez utiliser le débogage à distance. Le processus consiste à
- Connexion de votre appareil Android.
- Ouvrez Developer Tools et allez dans "More Tools" > "Remote Devices".
- Autoriser l'accès à distance sur votre appareil Android. Malheureusement, il n'existe pas de moyen direct d'accéder aux outils du développeur sur les appareils iOS.
Outils de développement Google Chrome trucs et astuces
Découvrir l'édition en temps réel
L'une des fonctionnalités les plus intéressantes des outils de développement est la possibilité de modifier en temps réel les codes HTML, CSS et JavaScript. En inspectant un élément, vous avez la possibilité de double-cliquer sur le code. Les modifications sont instantanées, ce qui vous permet d'observer les résultats immédiatement. Cette fonction est pratique pour ajuster l'apparence et le comportement des éléments web sans modifier le code source.
C'est un moyen d'expérimenter et de voir comment différents styles ou modifications de code ont un impact sur la mise en page et l'expérience de l'utilisateur.
Débogage simplifié
Bien que le débogage soit souvent considéré comme l'objectif des outils de développement, certaines fonctionnalités moins connues peuvent considérablement rationaliser ce processus. Vous pouvez définir des points d'arrêt dans le code JavaScript, inspecter les variables et suivre l'exécution du code ligne par ligne. En outre, une fonction appelée "Event Listener Breakpoints" vous permet de mettre en pause l'exécution du code lorsqu'un événement spécifique se produit. Cela facilite grandement le suivi et la résolution des problèmes.
Améliorer les performances du site web
Developer Tools fournit des informations sur les performances d'un site web. Les onglets "Performance" et "Réseau" indiquent les temps de chargement, l'utilisation des ressources et les zones de goulots d'étranglement. Utilisez ces données pour identifier les zones à améliorer, optimiser la taille des fichiers et réduire les temps de chargement.
La section "Lighthouse" génère automatiquement des rapports mettant en évidence la fonctionnalité et la structure du site, vous aidant ainsi à améliorer les performances et l'expérience de l'utilisateur.
Devenir un expert en ligne de commande
La section "Console" des outils de développement agit comme une interface de ligne de commande pour le web. Elle ne se contente pas d'enregistrer des messages ; vous pouvez l'utiliser pour exécuter du code JavaScript et interagir avec la page web en temps réel. Que vous souhaitiez interroger des éléments du DOM ou tester des appels d'API, la console est un outil qui permet de gagner du temps et de simplifier le processus de débogage.
Expérience Simulation d'appareils mobiles
La conception de sites web est cruciale dans le monde d'aujourd'hui, centré sur le mobile. Avec Developer Tools, vous pouvez simuler des appareils mobiles et voir comment la mise en page de votre site web s'adapte à différentes tailles d'écran.
Accédez à la barre d'outils "Toggle Device Toolbar". Utilisez le raccourci clavier "Ctrl + Shift + M" pour choisir parmi différents préréglages d'appareils ou personnaliser les dimensions en fonction de vos besoins. Cette fonction permet à votre site web d'être impeccable sur tous les appareils, qu'il s'agisse de smartphones ou d'ordinateurs de bureau.
Utiliser la fonction "Copier
Lorsque vous inspectez des éléments, vous pouvez cliquer avec le bouton droit de la souris sur n'importe quel élément de l'onglet Éléments et choisir "Copier" pour copier l'intégralité de son code HTML, y compris les styles appliqués. Cette fonction peut s'avérer particulièrement utile lors de la création ou de la reproduction d'éléments dans votre code, ce qui vous permet de gagner du temps et de l'énergie.
Sélecteur de couleurs
Le panneau "Styles" de l'onglet Éléments dispose d'un outil pratique de sélection des couleurs qui vous permet de sélectionner et de copier visuellement n'importe quelle couleur utilisée sur une page web. Cette fonction simplifie le processus d'harmonisation des couleurs et garantit la cohérence de la conception de votre site web.
Emulation de diverses conditions de réseau
L'onglet "Réseau" vous indique non seulement les ressources chargées sur une page, mais vous permet également de simuler différentes conditions de réseau. Pour comprendre les performances de votre site web dans différentes conditions de réseau, vous pouvez émuler différentes vitesses de connexion, telles que la 3G, la 4G ou le mode hors ligne. Cela vous permet d'optimiser votre site pour les utilisateurs ayant des connexions internet plus lentes.
Modifier des images en temps réel
Vous pouvez éditer et manipuler des images directement dans Developer Tools. En cliquant avec le bouton droit de la souris sur une image et en sélectionnant "Ouvrir l'image dans un nouvel onglet", vous pouvez modifier l'URL de l'image pour l'ouvrir dans un éditeur d'images. Après avoir effectué les modifications nécessaires, enregistrez l'image et vos modifications seront appliquées à la page web.
Utiliser $() pour sélectionner des éléments
Vous pouvez utiliser la notation abrégée $() dans l'onglet Console pour sélectionner des éléments DOM. Par exemple, si vous souhaitez sélectionner un élément avec un ID spécifique, tapez $("#elementID") dans la console et appuyez sur Entrée. Cette méthode de sélection rapide peut s'avérer pratique pour tester et manipuler des éléments.
Visualiser le modèle de boîte CSS
En survolant un élément dans l'onglet Éléments et en cliquant avec le bouton droit de la souris pour sélectionner "Forcer l'état", vous pouvez visualiser le modèle de boîte CSS. Cette fonction met en évidence les dimensions, le rembourrage, la bordure et la marge de l'élément, ce qui facilite la compréhension et l'ajustement de la mise en page.
Désactiver et modifier les styles CSS
Le panneau "Styles" vous permet de désactiver ou de modifier les styles CSS en temps réel. Cela peut s'avérer utile pour expérimenter différents styles et identifier rapidement ceux qui affectent certains aspects de votre page.
Modifier les valeurs JavaScript
Dans l'onglet "Sources", vous pouvez remplacer directement les valeurs JavaScript. Localisez la variable que vous souhaitez modifier, cliquez avec le bouton droit de la souris et sélectionnez "Modifier la valeur". Cela vous permet de tester différents scénarios sans avoir à réécrire le code.
J'espère que ces outils, conseils et astuces pour développeurs vous aideront à améliorer vos compétences en la matière. Je vous remercie de votre lecture !
En savoir plus : 7 MEILLEURS conseils de sécurité pour le navigateur Google Chrome.
French 
English 
Spanish 
German 
Korean