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.
Premiers pas S'informer des nouveautés
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
L'assistance de l'IA, les insights de la console, les suggestions de code, les annotations automatiques et d'autres fonctionnalités vous aident à déboguer plus efficacement.
Obtenez une vue complète et exploitable des performances de votre page.
Découvrez comment inspecter les ressources chargées par votre page et les modifier depuis votre navigateur.
Analysez et remplacez les requêtes et les réponses réseau à la volée.

Déboguer avec l'IA

Découvrez comment les innovations en IA dans DevTools vous permettent de faire plus, plus vite.
Laissez Gemini vous aider à analyser et à améliorer le style, le réseau, les sources et les performances de votre site Web.
Utilisez Gemini pour obtenir des suggestions de code lorsque vous écrivez du code dans les panneaux "Console" et "Sources".
Comprendre les messages et les erreurs de la console dans DevTools, et apprendre à les corriger, sans copier-coller
Offrez à vos agents de codage les mêmes outils fiables que vous utilisez pour inspecter l'activité réseau, enregistrer des traces et résoudre les problèmes liés aux applications Web, dans votre workflow d'IA.

 Connectez le serveur MCP des outils pour les développeurs Chrome (Model Context Protocol) à l'outil de votre choix : CLI Gemini, Claude Code, Cline, Copilot, etc.

En savoir plus sur GitHub

Conseils sur les outils pour les développeurs

Découvrez notre série de vidéos mensuelles qui vous présente de manière ludique des scénarios de débogage courants dans les outils de développement.
Découvrez le panneau "Performances" mis à jour. Vous apprendrez à mesurer les métriques Core Web Vitals (LCP, CLS, INP) et à obtenir des conseils personnalisés de Gemini.
Embarquez avec les outils de développement et devenez un pirate du débogage ! Découvrez des techniques pour émuler des styles de focus, tester des formulaires avec la saisie automatique et résoudre des erreurs de backend avec les remplacements de réseau.
Découvrez la puissance du débogage assisté par l'IA avec Chrome DevTools. Découvrez comment les insights de la console, l'assistance IA pour le style, les performances, le réseau et les sources peuvent booster votre workflow.
Découvrez des techniques avancées du panneau "Réseau", y compris comment trouver les goulots d'étranglement des performances, déboguer les pop-ups, configurer les conditions réseau, utiliser des raccourcis pour déterminer les initiateurs de requêtes réseau et plus encore.

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.
Découvrez toutes les fonctionnalités du panneau "Performances" : comment enregistrer une trace de performances, comment l'afficher et l'analyser, et plus encore.
Découvrez les nouvelles fonctionnalités de DevTools, comme le calibrage du débit du processeur, qui vous aideront à baser vos décisions de débogage des performances sur des données réelles.
Découvrez les nouveaux insights sur les performances et la puissance de Lighthouse directement dans le panneau "Performances" des Outils de développement.

Actualités et nouveautés

Inspecter et modifier des ressources

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.
Premiers pas
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.
Consulter le tutoriel

Analyser l'activité du réseau

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.
Premiers pas
Tutoriel pratique pour vous guider dans les tâches courantes du panneau "Network" (Réseau).
Consulter le tutoriel

Autres outils

Découvrez toutes les autres fonctionnalités d'outils de développement.
Découvrez comment afficher et modifier le DOM d'une page.
Découvrez comment afficher et modifier le CSS d'une page.
Suivez les modifications apportées au code HTML, CSS et JavaScript.
Consignez les messages et exécutez JavaScript.
Évaluez les performances de votre site Web.
Identifiez les problèmes de mémoire qui affectent les performances des pages, y compris les fuites de mémoire.
Inspectez, modifiez et déboguez des applications Web, testez le cache, affichez l'espace de stockage, etc.
Inspectez et modifiez les animations.
Enregistrez, revoyez, mesurez les parcours utilisateur et modifiez leurs pas.
Découvrez un ensemble d'options qui affectent l'affichage du contenu Web.
Inspectez et déboguez les adresses enregistrées.
Identifiez et corrigez les problèmes liés à votre site Web.
Assurez-vous qu'une page est entièrement protégée par HTTPS.
Affichez les informations et déboguez des lecteurs multimédias par onglet du navigateur.
Émuler les capteurs de l'appareil.
Émuler les authentificateurs.