DevTools
Les outils pour les développeurs Chrome sont un ensemble d'outils pour les développeurs Web intégrés directement au 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.
DevTools est compatible avec un large éventail de tâches de développement Web courantes. Avancez sur cette page et explorez certaines des principales fonctionnalités de DevTools. Vous ne savez pas par où commencer ou vous utilisez DevTools pour la première fois ? Regarder une présentation des outils de développement
Obtenir une assistance par IA
Les insights de la console et l'assistance de l'IA vous aident à déboguer et à corriger plus efficacement les erreurs JavaScript, les performances et le style.
Comprendre les performances
Obtenez une vue complète et exploitable des performances de votre page.
Inspecter les ressources
Découvrez comment inspecter les ressources chargées par votre page et les modifier depuis votre navigateur.
Analyser le réseau
Analysez et remplacez les requêtes et les réponses réseau à la volée.
Assistance par IA et insights de la console
Découvrez comment les innovations en IA dans DevTools vous permettent de faire plus, plus vite.
Premiers pas
Laissez Gemini vous aider à analyser et à améliorer le style, le réseau, les sources et les performances de votre site Web.
Trouvez l'inspiration
Découvrez les cas d'utilisation de l'assistance IA dans les outils pour les développeurs Chrome et découvrez comment elle peut vous aider dans votre workflow de débogage pour le style, les performances, etc.
Comprendre les messages de la console
Comprendre les messages et les erreurs de la console dans DevTools, et apprendre à les corriger, sans copier-coller
Astuces pour les outils de développement
Découvrez notre série de vidéos mensuelles expliquant comment utiliser les outils pour les développeurs afin de résoudre les problèmes courants de développement Web.
Enregistrer et analyser une trace de performances
Découvrez comment enregistrer une trace de performances dans DevTools et l'analyser pour identifier et résoudre les problèmes de performances.
Surveiller les Core Web Vitals en temps réel
Déboguer les problèmes de LCP et utiliser les données CrUX pour voir si vous déboguez une expérience similaire à celle de vos utilisateurs
Démystifier la mise en cache
Découvrez les différents types de cache de navigateur, et comment les inspecter et les gérer dans Chrome DevTools.
Geler l'écran et inspecter les éléments qui disparaissent
Vous essayez d'inspecter un élément, et il disparaît ? C'est comme si votre code jouait à cache-cache avec vous !
Obtenir des insights sur les performances
Un large éventail d'outils pour vous aider à mesurer et optimiser différents aspects de vos performances d'exécution: le panneau "Performances", Lighthouse, etc.
Présentation de l'outil de performances
Découvrez toutes les fonctionnalités du panneau "Performances" : comment enregistrer une trace de performances, comment l'afficher et l'analyser, et plus encore.
L'avenir des outils d'analyse des performances
Depuis près de 15 ans, le panneau "Performances" aide les développeurs à mesurer et optimiser leurs performances d'exécution. Découvrez comment elle évolue.
Annoter les traces de performances
Annotez les traces en place et enregistrez-les directement dans le fichier de trace pour un partage simple.
Actualités et nouveautés
Inspecter et modifier les ressources
Référence de fonctionnalité
Découvrez toutes les fonctionnalités du panneau "Sources" : afficher et modifier des fichiers, déboguer du code JavaScript et configurer un espace de travail.
Configurer un espace de travail
Workspace vous permet d'enregistrer les modifications que vous apportez dans DevTools dans le code source stocké sur votre ordinateur. Découvrez comment configurer un espace de travail dans vos propres projets.
Analyser l'activité réseau
Panneau "Network"
Découvrez toutes les fonctionnalités du panneau "Réseau" : inspectez les corps de réponse et de requête, écrasez des en-têtes, et plus encore.
Inspecter l'activité réseau
Tutoriel pratique pour vous guider dans les tâches courantes du panneau "Network" (Réseau).
Autres outils
Découvrez toutes les autres fonctionnalités d'outils de développement.
Éléments
Découvrez comment afficher et modifier le DOM d'une page.
Styles
Découvrez comment afficher et modifier le CSS d'une page.
Modifications
Suivez les modifications apportées au code HTML, CSS et JavaScript.
Console
Consignez les messages et exécutez JavaScript.
Performance
Évaluez les performances de votre site Web.
Mémoire
Identifiez les problèmes de mémoire qui affectent les performances des pages, y compris les fuites de mémoire.
Application
Inspectez, modifiez et déboguez des applications Web, testez le cache, affichez l'espace de stockage, etc.
Animations
Inspectez et modifiez les animations.
Enregistreur
Enregistrez, revoyez, mesurez les parcours utilisateur et modifiez leurs pas.
Affichage
Découvrez un ensemble d'options qui affectent l'affichage du contenu Web.
Saisie automatique
Inspectez et déboguez les adresses enregistrées.
Problèmes
Identifiez et corrigez les problèmes liés à votre site Web.
Confidentialité et sécurité
Assurez-vous qu'une page est entièrement protégée par HTTPS.
Contenus multimédias
Affichez les informations et déboguez des lecteurs multimédias par onglet du navigateur.
Capteurs
Émuler les capteurs de l'appareil.
WebAuthn
Émuler les authentificateurs.