Chrome DevTools est un ensemble d’outils pour développeurs web intégrés directement dans le navigateur GoogleChrome. DevTools peut vous aider à modifier des pages à la volée et à diagnostiquer rapidement les problèmes, ce qui, en fin de compte, vous aide à construire de meilleurs sites Web, plus rapidement.
Voyez la vidéo pour des démonstrations en direct des flux de travail de base de DevTools, notamment le débogage de CSS,le prototypage de CSS, le débogage de JavaScript et l’analyse des performances de chargement.
Ouvrir DevTools
Il existe plusieurs façons d’ouvrir DevTools, car différents utilisateurs veulent un accès rapide à différentes parties de l’interface utilisateur DevTools.
- Lorsque vous voulez travailler avec le DOM ou le CSS, faites un clic droit sur un élément de la page et sélectionnez Inspecterpour sauter dans le panneau Éléments. Ou appuyez sur Command+Option+C (Mac) ouControl+Shift+C (Windows, Linux, Chrome OS).
- Quand vous voulez voir les messages enregistrés ou exécuter JavaScript, appuyez sur Command+Option+J(Mac) ou Control+Shift+J (Windows, Linux, Chrome OS) pour sauter directement dans le panneau Console.
Voir Open Chrome DevTools pour plus de détails et de flux de travail.
Débuter
Si vous êtes un développeur web plus expérimenté, voici les points de départ recommandés pour apprendre commentDevTools peut améliorer votre productivité :
- Voir et modifier le DOM
- Voir et modifier les styles d’une page (CSS)
- Déboguer JavaScript
- Voir les messages et exécuter JavaScript dans la Console
- Optimiser la vitesse du site Web
- Inspecter l’activité du réseau
Découvrir DevTools
L’interface utilisateur de DevTools peut être un peu écrasante…. il y a tellement d’onglets ! Mais, si vous prenez un peu de temps pour vous familiariser avec chaque onglet afin de comprendre ce qui est possible, vous pourriez découvrir que DevTools peut sérieusement stimuler votre productivité.
Mode appareil
Simuler des appareils mobiles.
- Mode appareil
- Tester les fenêtres d’affichage responsives et spécifiques aux appareils
- Emuler des capteurs : Géolocalisation & Accéléromètre
Panneau Éléments
Voir et modifier le DOM et le CSS.
- Pour commencer à visualiser et à modifier le DOM
- Pour commencer à visualiser et à modifier le CSS
- Inspecter et modifier vos pages
- Modifier les styles
- Modifier le DOM
- Inspecter les animations
- Trouver les CSS inutilisées
.
Panneau Console
Voir les messages et exécuter JavaScript à partir de la Console.
- Démarrer avec la Console
- Utiliser la Console
- Interagir à partir de la ligne de commande
- L’API de la Console. Reference
Panneau des sources
Debug JavaScript, faites persister les modifications apportées dans DevTools à travers les rechargements de page,enregistrez et exécutez des extraits de JavaScript, et enregistrez sur le disque les modifications que vous apportez dans DevTools.
- Débutez avec le débogage de JavaScript
- Pause de votre code avec les points d’arrêt
- Enregistrez les modifications sur disque avec les espaces de travail
- Exécutez des extraits de code à partir de n’importe quelle page
- Référence sur le débogage de JavaScript
- Persistance des changements à travers les recharges de pages avec les surcharges locales
- Recherche du JavaScript inutilisé
.
Panneau Réseau
Visualiser et déboguer l’activité du réseau.
- Démarrer
- Guide des problèmes de réseau
- Référence au panneau réseau
Panneau Performances
Trouver des moyens d’améliorer les performances de chargement et d’exécution.
- Optimiser la vitesse des sites Web
- Débuter avec l’analyse des performances d’exécution
- Référence à l’analyse des performances
- Analyser les performances d’exécution
- Diagnostiquer les mises en page synchrones forcées
.
Panneau Mémoire
Profiler l’utilisation de la mémoire et traquer les fuites.
- Réparez les problèmes de mémoire
- JavaScript CPU Profiler
Panneau Application
Inspectez toutes les ressources qui sont chargées, notamment les bases de données IndexedDB ou Web SQL, le stockage local et en session, les cookies, le cache d’application, les images, les polices et les feuilles de style.
- Déboguer les applications Web progressives
- Inspecter et gérer le stockage, les bases de données, et les caches
- Inspecter et supprimer les cookies
- Inspecter les ressources
Panneau de sécurité
Déboguer les problèmes de contenu mixte, les problèmes de certificat, et plus encore.
- Comprenez les problèmes de sécurité
Communauté
Fournissez des rapports de bogues et des demandes de fonctionnalités dans Crbug, qui est le traqueur de bogues de l’équipe d’ingénierie.
Crbug
Si vous voulez nous alerter sur un bogue ou une demande de fonctionnalité mais que vous n’avez pas beaucoup de temps, vous pouvez envoyer un tweet à @ChromeDevTools. Nous répondons et envoyons régulièrement des annonces depuis ce compte.
Pour obtenir de l’aide sur l’utilisation de DevTools, Stack Overflow est le meilleur canal.
Stack Overflow
Pour déposer des bogues ou des demandes de fonctionnalités sur les docs DevTools, ouvrez un problème GitHub sur le dépôt Web Fundamentals.
Docs Issues
DevTools dispose également d’un canal Slack, mais l’équipe ne le surveille pas de manière constante.
Slack