Outils pour les développeurs Chrome (MCP) pour votre agent d'IA
Vous pouvez désormais prévisualiser le nouveau serveur MCP (Model Context Protocol) des outils pour les développeurs Chrome. Il apporte la puissance des outils pour les développeurs Chrome aux assistants de codage IA.
Auparavant, les agents de codage n'étaient pas en mesure de voir ce que faisait réellement le code qu'ils généraient lorsqu'il s'exécutait dans le navigateur. Le serveur MCP des outils pour les développeurs Chrome change la donne. Les assistants de programmation basés sur l'IA sont capables de déboguer des pages Web directement dans Chrome et de bénéficier des fonctionnalités de débogage et des insights sur les performances des outils de développement. Cela leur permet d'identifier et de résoudre les problèmes plus précisément.
Découvrez comment cela fonctionne :
Pour en savoir plus, consultez Outils pour les développeurs Chrome (MCP) pour votre agent d'IA.
Déboguer l'arborescence des dépendances réseau avec Gemini
L'insight Performances > Insights > Arborescence des dépendances réseau comporte désormais le bouton Déboguer avec l'IA, qui vous redirige vers le panneau Assistance IA. Vous pouvez ainsi discuter de cette arborescence et la déboguer avec l'aide de Gemini.
Exporter vos discussions avec Gemini
Vous pouvez désormais exporter votre discussion actuelle avec Gemini ou copier sa réponse dans le presse-papiers en cliquant sur le bouton Exporter la conversation dans la barre d'action supérieure ou sur Copier la réponse sous le message de Gemini dans la discussion.
Configuration des pistes persistantes dans le panneau "Performances"
Lorsque vous configurez une piste enregistrée dans le panneau Performances, les outils de développement enregistrent désormais votre configuration et l'appliquent lorsque vous l'importez ou que vous en enregistrez une nouvelle.
Filtrer les requêtes réseau protégées par IP
Dans le panneau Réseau, vous pouvez désormais filtrer les requêtes envoyées aux proxys IP Protection.
"Mise en page" ajoute la prise en charge de la mise en page en maçonnerie" id="masonry" tabindex="-1">Éléments > L'onglet "Mise en page" ajoute la prise en charge de la mise en page en maçonnerie
Vous pouvez désormais inspecter la mise en page en maçonnerie dans l'onglet Éléments > Styles.
La mise en page en maçonnerie est une méthode de mise en page dans laquelle un axe utilise une mise en page en grille stricte typique (le plus souvent des colonnes) et l'autre une mise en page en maçonnerie.
Lighthouse 12.8.2
Le panneau Lighthouse exécute désormais Lighthouse 12.8.2.
Dans cette version, Lighthouse sépare les problèmes détectés avec les propriétés personnalisées CSS dans leurs propres messages d'erreur.
Consultez également la liste complète des modifications.
Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils pour les développeurs, consultez Lighthouse : optimiser la vitesse d'un site Web.
Problème Chromium : 40543651.
Autres points importants
Voici quelques-unes des nombreuses corrections et améliorations importantes apportées à cette version :
- Performances : les événements de rappel de demande d'inactivité incluent désormais la propriété
timeout(crbug.com/441679219). - Accessibilité. Les lecteurs d'écran liront désormais les informations suivantes :
- "Il s'agit d'une nouvelle fonctionnalité" pour les éléments de menu de commande mis en avant (crbug.com/441485154).
- Barre d'outils récapitulative de la complétion de code (crbug.com/433952045).
- Réseau : un clic droit sur un élément du journal réseau le sélectionne (crbug.com/368510578).
Télécharger les canaux de prévisualisation
Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.
Contacter l'équipe Chrome DevTools
Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.
- Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
- Signalez un problème dans les outils de développement en cliquant sur Plus d'options > Aide > Signaler un problème dans les outils de développement.
- Envoyez un tweet à @ChromeDevTools.
- Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les outils pour les développeurs".
Nouveautés des outils pour les développeurs
Liste de tous les sujets abordés dans la série Nouveautés de DevTools.
- Mises à jour du serveur MCP des outils pour les développeurs
- Partage amélioré des traces
- Prise en charge de @starting-style
- Widget d'éditeur pour l'affichage : masonry
- Lighthouse 13
- Suggestions de code de Gemini
- Améliorations apportées au serveur MCP des outils pour les développeurs
- Accès plus rapide à l'assistance de l'IA
- Déboguer la trace de performances complète avec Gemini
- Activer/Désactiver l'orientation du panneau
- Programme Google Developer
- Autres points à retenir
- Outils pour les développeurs Chrome (MCP) pour votre agent d'IA
- Déboguer l'arborescence des dépendances réseau avec Gemini
- Exporter vos discussions avec Gemini
- Configuration des pistes persistantes dans le panneau "Performances"
- Filtrer les requêtes réseau protégées par IP
- Éléments > L'onglet "Mise en page" ajoute la prise en charge de la mise en page en maçonnerie
- Lighthouse 12.8.2
- Autres points à retenir
- Déboguer plus d'insights avec Gemini
- Émuler l'en-tête "Save-Data" dans "Conditions du réseau"
- Afficher l'état de référence dans l'info-bulle d'une propriété CSS
- Remplacer les facteurs de forme dans les indicateurs client User-Agent
- Lighthouse 12.8.0
- Autres points à retenir
- Des outils pour les développeurs Chrome plus fiables et plus productifs
- Importer des images dans l'assistance IA pour le style
- Ajouter des en-têtes de requête au tableau dans "Réseau"
- Découvrez les temps forts de Google I/O 2025
- Autres points à retenir
- Améliorations apportées au panneau "Performances"
- Origines préconnectées dans l'insight "Arborescence des dépendances réseau"
- Temps de réponse et de redirection du serveur dans l'insight "Latence des requêtes de document"
- Redirections dans le récapitulatif des requêtes réseau
- Réduction du bruit dans la trace des performances
- Obsolète : "Désactiver les échantillons JavaScript"
- Paramètre de précision de la géolocalisation dans les capteurs
- Améliorations apportées au panneau "Éléments"
- Déboguer plus facilement les valeurs CSS complexes
- Prise en charge de@function dans Éléments > Styles
- Améliorations du panneau "Réseau"
- Filtre has-request-header
- Direct Sockets dans les applications Web isolées
- Autres points à retenir
- Accessibilité
- Édition Google I/O 2025
- Modifier et enregistrer les modifications CSS dans votre espace de travail avec Gemini
- Associer un dossier d'espace de travail et enregistrer les modifications dans vos fichiers sources
- Poser des questions à Gemini sur les insights sur les performances
- Annoter les résultats sur les performances avec Gemini
- Ajouter des captures d'écran à vos discussions avec Gemini
- Nouveaux insights dans le panneau "Performances"
- JavaScript en double
- Ancien JavaScript
- Les spéculations sont désormais compatibles avec les tags de règles
- Lighthouse 12.6.0
- Autres points à retenir
- Accessibilité
- Améliorations apportées au panneau "Performances"
- Nouveaux insights sur les performances
- Cliquer pour mettre en surbrillance
- Temps de réponse du serveur dans le récapitulatif des requêtes réseau
- Filtrer les cookies dans "Confidentialité et sécurité"
- Tailles en unités de Ko dans les tableaux de tous les panneaux
- La saisie semi-automatique est compatible avec corner-shape et corner-*-shape dans Éléments > Styles
- Expérimental : mise en évidence des problèmes liés aux éléments et aux attributs dans le DOM
- Lighthouse 12.5.0
- Autres points à retenir
- Améliorations apportées au panneau "Performances"
- Liens vers l'origine et le script pour les appels de profil et de fonction dans "Performances"
- Compatibilité avec les données de champ LCP par phase
- Insight sur l'arborescence des dépendances réseau
- Durée au lieu de la durée totale et de la durée personnelle dans le récapitulatif
- Mise en surbrillance de la pile la plus lourde
- Amélioration des états vides pour différents panneaux
- Vue en arborescence de l'accessibilité dans "Éléments"
- Lighthouse 12.4.0
- Autres points à retenir
- Panneau "Confidentialité et sécurité"
- Améliorations apportées au panneau "Performances"
- Préréglages calibrés de limitation du processeur
- Sélectionner différents événements de performances dans le même chat IA
- Mise en évidence des données propriétaires et tierces dans "Performances"
- Données de champ dans les info-bulles et les insights des repères
- Insight sur l'ajustement forcé de la mise en page
- Insight "Optimiser la taille du DOM"
- Étendre la trace de performances avec console.timeStamp
- Améliorations apportées au panneau "Éléments"
- Valeurs en temps réel des styles animés
- Compatibilité avec la pseudo-classe :open et divers pseudo-éléments
- Copier tous les messages de la console