Les outils pour les développeurs Chrome sont un ensemble d'outils pour les développeurs Web intégrés directement dans le navigateur Google Chrome. Les outils de développement vous permettent de modifier des pages à la volée et de diagnostiquer les problèmes rapidement, ce qui vous aide à créer des sites Web de meilleure qualité, plus rapidement.
Regardez la vidéo pour voir des démonstrations en direct des principaux workflows des outils de développement, y compris le débogage CSS, le prototypage CSS, le débogage JavaScript et l'analyse des performances de chargement.
Ouvrir les outils de développement
Il existe de nombreuses façons d'ouvrir les outils de développement, car différents utilisateurs souhaitent accéder rapidement à différentes parties de l'UI des outils de développement.
- Pour utiliser le DOM ou CSS, effectuez un clic droit sur un élément de la page et sélectionnez Inspecter pour accéder au panneau Éléments. Vous pouvez également appuyer sur Commande+Option+C (Mac) ou sur Ctrl+Maj+C (Windows, Linux, ChromeOS).
- Pour afficher les messages enregistrés ou exécuter JavaScript, appuyez sur Cmd+Option+J (Mac) ou sur Ctrl+Maj+J (Windows, Linux, ChromeOS) pour accéder directement au panneau de la Console.
Pour en savoir plus et découvrir les procédures à suivre, consultez la page Ouvrir les outils pour les développeurs Chrome.
Premiers pas
Si vous êtes un développeur Web plus expérimenté, voici les points de départ recommandés pour découvrir comment les outils de développement peuvent améliorer votre productivité:
- Afficher et modifier le DOM
- Afficher et modifier le CSS
- Déboguer JavaScript
- Afficher les messages et exécuter JavaScript dans la console
- Optimiser la vitesse du site Web
- Inspecter l'activité réseau
Découvrir les outils de développement
L'interface des outils de développement peut être un peu envahissante... Il y a tellement d'onglets ! Toutefois, si vous prenez le temps de vous familiariser avec chaque onglet afin de comprendre ce qu'il est possible de faire, vous découvrirez peut-être que les outils de développement peuvent grandement améliorer votre productivité.
mode Appareil
Simulez des appareils mobiles.
Panneau "Elements"
Affichez et modifiez le DOM et le CSS.
- Afficher et modifier le DOM
- Premiers pas avec l'affichage et la modification du code CSS
- Modifier le CSS
- Modifier le DOM
- Rechercher un CSS non valide, remplacé, inactif ou un autre élément CSS
- Identifier les améliorations potentielles du CSS
- Émulez les thèmes clairs/sombres, le contraste et d'autres fonctionnalités multimédias CSS
- Trouver les ressources CSS inutilisées
- Inspecter les animations
Panneau de la console
Affichez les messages et exécutez JavaScript depuis la console.
- Premiers pas avec la console
- Documentation de référence de l'API Console Utilities
- Documentation de référence de l'API Console
Panneau des sources
Déboguer JavaScript, conserver les modifications apportées dans les outils de développement lors de l'actualisation des pages, enregistrer et exécuter des extraits de code JavaScript, et enregistrer dans des sources locales les modifications apportées dans les outils de développement.
- Premiers pas avec le débogage JavaScript
- Suspendre le code avec des points d'arrêt
- Modifier et enregistrer des fichiers dans un espace de travail
- Exécuter des extraits de code JavaScript
- Documentation de référence sur le débogage JavaScript
- Remplacer localement le contenu Web et les en-têtes de réponse HTTP
Panneau "Network"
afficher et déboguer l'activité réseau ;
- Inspecter l'activité réseau
- Documentation de référence sur les fonctionnalités réseau
- Afficher les ressources de la page
Panneau "Enregistreur"
Enregistrez, revoyez et mesurez les parcours utilisateur.
- Enregistrez, revoyez et mesurez les parcours utilisateur
- Personnaliser l'Enregistreur avec des extensions
- Documentation de référence sur les fonctionnalités de l'Enregistreur
Panneau "Performances"
Trouvez des moyens d'améliorer les performances de chargement et d'exécution.
- Optimiser la vitesse du site Web
- Analyser les performances de l'environnement d'exécution
- Documentation de référence sur les fonctionnalités de performances
Panneau de mémoire
Identifiez et corrigez les problèmes de mémoire qui affectent les performances des pages, tels que les fuites de mémoire.
Panneau "Application"
Inspectez toutes les ressources chargées, y compris les bases de données IndexedDB ou Web SQL, le stockage local et de session, les cookies, le cache d'application, les images, les polices et les feuilles de style.
- Déboguer les progressive web apps
- Afficher et modifier l'espace de stockage local
- Afficher, ajouter, modifier et supprimer des cookies
- Afficher les informations sur la phase d'évaluation
Panneau de sécurité
Déboguez les problèmes de contenu mixte, de certificat, etc.
Communauté
Envoyez des rapports de bugs et des demandes de fonctionnalités dans Crbug, l'outil de suivi des bugs de l'équipe d'ingénierie.
Si vous souhaitez nous signaler un bug ou demander une fonctionnalité, mais que vous manquez de temps, vous pouvez nous envoyer un tweet à @ChromeDevTools. Nous y répondons et envoyons des annonces régulièrement depuis le compte.
Pour obtenir de l'aide sur l'utilisation des outils de développement, Stack Overflow est le meilleur canal.
Pour signaler des bugs ou demander des fonctionnalités dans la documentation sur les outils de développement, ouvrez un problème GitHub.
Les outils de développement disposent également d'un canal Slack, mais l'équipe ne le surveille pas de manière cohérente.