Assistance par IA
Améliorez votre workflow de développement grâce à Gemini intégré directement dans les outils pour les développeurs Chrome. Simplifiez le débogage grâce à l'assistance de l'IA pour le style, les performances, le réseau et les sources.
Correction des bugs de style
Les problèmes de style peuvent être difficiles à déboguer. Obtenez une explication détaillée des styles de votre élément et de l'aide pour corriger les bugs de mise en page et de style:
Can you center this element?
Analyser les requêtes réseau
Les en-têtes de requête et de réponse contiennent souvent des informations importantes qui ne sont pas évidentes au premier coup d'œil. Utilisez l'assistance de l'IA pour approfondir vos recherches:
Why does this request fail?
Comprendre les fichiers sources
Il est rare que vous ayez écrit tout le code de votre site Web. Vous ne savez pas à quoi sert un script particulier ? L'assistance optimisée par l'IA peut vous aider à:
What is this file used for?
Examiner les performances des pages
Mauvaises métriques Core Web Vitals ? Il peut être difficile de trouver la cause d'un site Web lent. L'assistance par IA peut examiner votre problème et vous proposer des solutions:
Help me optimize my LCP score
Obtenez l'aide de l'IA où que vous soyez
Recherchez le bouton Demander à l'IA pour obtenir l'aide de Gemini pour votre tâche en cours.
Démonstrations
Hangar
Dépassement
Vous ne savez pas par où commencer ?
Corriger le format d'une image
Make all teaser images always be 16:9
L'une des images n'est pas recadrée de la même manière que les autres ?
- Ouvrez la page chrome.dev/cinemai/devtools/ et ouvrez les outils pour les développeurs.
- Recherchez et sélectionnez la section En savoir plus en regardant.
- Cliquez sur l'icône Assistance IA.
- Requête:
Make all teaser images always be 16:9. - Cliquez sur
Apply the suggested change, puis continuez. - Le bouton doit être centré.
Résoudre un problème de débordement
How can I make this element visible?
L'élément n'est pas visible ?
- Ouvrez la page chrome.dev/cinemai/devtools/ et ouvrez les outils pour les développeurs.
- Recherchez un élément img plongeur.
- Cliquez sur l'icône Assistance IA.
- Requête:
How can I make this element visible without scrollbars?. - Cliquez sur
Apply the suggested change, puis continuez. - Le plongeur doit être visible à l'écran.
Démystifier les en-têtes
Are there any security headers present?
Pour en savoir plus sur les en-têtes de sécurité d'une ressource donnée...
- Ouvrez la page chrome.dev/cinemai/devtools/ et ouvrez les outils pour les développeurs.
- Dans le panneau "Network" (Réseau), sélectionnez les requêtes
v4-chrome.dev.js. - Cliquez sur l'icône Assistance IA.
- Invite :
Are there any security headers present? - Le LLM explique les en-têtes liés à la sécurité de la ressource.
Créer des rapports de bug
Write a detailed bug report for this network error, include title, summary, steps to reproduce and expected vs. actual results.
Un problème est survenu ? Créez rapidement un rapport de bug détaillé.
- Ouvrez les outils pour les développeurs pour une page Web présentant une erreur réseau.
- Dans le panneau "Network" (Réseau), sélectionnez la requête en échec.
- Cliquez sur l'icône d'assistance IA.
- Invite :
Write a detailed bug report for this network error, include title, summary, steps to reproduce and expected vs. actual results. - Le LLM génère un rapport de bug que vous pouvez copier directement dans votre outil de suivi des problèmes.
Découvertes en profondeur
Historique de chat persistant optimisé par l'IA dans Chrome 133 à 135
Nouveautés des versions DevTools 130 à 132
Premiers pas
Conditions requises
Activer
Données
Aidez-nous à nous améliorer.
Cette fonctionnalité est expérimentale et peut être modifiée à l'avenir. Il peut générer des informations inexactes ou choquantes qui ne représentent pas l'opinion de Google. Votez pour les réponses pour nous aider à les améliorer et n'hésitez pas à nous faire part de vos commentaires.