Les outils de développement fournissent un panneau d'assistance IA qui vous aide à comprendre votre site Web et à résoudre les problèmes en discutant avec un agent d'IA intégré.
Le panneau Assistance IA est optimisé par Gemini et permet d'effectuer les opérations suivantes :
- Spécialisé dans le développement Web.
- Peut répondre à des questions générales sur l'ensemble de la page Web et fournir des informations spécifiques sur divers sujets, y compris, mais sans s'y limiter, le style, la mise en réseau, les performances, etc.
- Réduit et sélectionne de manière autonome un contexte spécifique pour vous permettre de discuter, comme des éléments DOM, des requêtes réseau, des événements de trace de performances, etc.
- Peut effectuer des actions autonomes, comme exécuter des audits et enregistrer des traces de performances.
- Il fournit une présentation détaillée de ses actions et de son raisonnement, et des liens vers les sections pertinentes des outils de développement. Vous pouvez ainsi les inspecter en un clic.
- peut suggérer des modifications de code et générer une requête avec ses insights pour que votre agent de programmation l'exécute.
Grâce à l'assistance de l'IA, vous pouvez déboguer le style, le réseau, les performances, les sources de votre site Web et plus encore.
Pour discuter efficacement avec Gemini dans le panneau Assistance IA, découvrez comment ouvrir le panneau, créer des requêtes et contrôler le déroulement de la conversation.
Ouvrir le panneau d'assistance IA
Le panneau Assistance IA s'ouvre par défaut dans le tiroir.
Pour ouvrir le panneau, cliquez sur le bouton Assistance IA situé au point d'entrée global à droite de la barre d'outils principale en haut.
Depuis les panneaux
Vous pouvez ouvrir le panneau avec le contexte de la conversation sélectionné directement depuis les panneaux Éléments, Réseau, Sources ou Performances de deux manières :
Cliquez sur le bouton
Déboguer avec l'IA à côté d'un élément, d'une requête réseau, d'un fichier source ou d'un insight sur les performances développé.
Effectuez un clic droit sur un élément, une requête, un fichier ou une entrée de trace, puis sélectionnez l'une des options d'invite courantes dans le menu contextuel Déboguer avec l'IA.
Depuis le menu de commandes
Pour ouvrir l'assistance IA à partir du menu de commandes, saisissez AI, puis exécutez la commande Afficher l'assistance IA, qui comporte le badge Tiroir à côté.
Dans le menu "Plus d'outils"
Vous pouvez également sélectionner Plus d'options > Plus d'outils > Assistance IA en haut à droite.
Rédaction de prompts
Lorsque vous démarrez une conversation, l'assistance IA vous propose des exemples de requêtes pour vous aider à vous lancer rapidement.
Cliquez sur l'une des requêtes pour préremplir le champ de saisie des requêtes en bas du panneau.
Vous pouvez également saisir votre propre requête ou question dans le champ de saisie.
Pour envoyer une requête, appuyez sur Enter ou cliquez sur la flèche à droite du champ de saisie.
Requêtes ouvertes sans contexte
La zone de chat en format libre vous permet de poser des questions ouvertes de haut niveau sans contexte préalable. Exemple :
How to use DevTools to debug accessibility?L'assistance IA exécutera d'abord un audit Lighthouse sur l'accessibilité pour mieux répondre à votre requête.
What are the slowest network requests on this page?L'assistance IA fournit une liste des requêtes suspectes et des liens vers celles-ci dans le panneau Réseau. Vous pouvez ainsi sélectionner une requête comme contexte de conversation en un clic.
What performance issues exist on the page?L'assistance IA enregistre automatiquement une trace de performances avec les paramètres que vous avez sélectionnés pour répondre à cette requête.
Les requêtes telles que
How do I use the Animation panel?ouWhere is the high contrast setting in DevTools?vous aideront directement avec les outils de développement.
Une fois que vous avez démarré le chat, l'assistance IA met à jour le contexte de manière intelligente en fonction de vos actions lorsque le chat est vide, tout en respectant vos sélections manuelles lorsque vous en effectuez.
Requêtes avec contexte
Lorsque vous ouvrez l'assistance IA à partir d'un panneau, le contexte de conversation correspondant est sélectionné dans la zone de chat. Vous pouvez ainsi discuter spécifiquement de ce que vous avez sélectionné.
À tout moment, vous pouvez modifier manuellement le contexte en sélectionnant un élément dans Éléments, une requête dans Réseau, une entrée de trace dans Performances ou un fichier dans Sources.
Vous pouvez également copier des parties d'un fichier à partir du panneau Sources, par exemple, et les coller dans le chat pour demander ce qu'elles font.
Ensuite, découvrez le flux de conversation dans l'assistance IA.
Flux de conversation
L'envoi d'un prompt lance la conversation avec l'agent. Pour obtenir les informations nécessaires pour répondre au mieux à votre requête, l'agent génère et exécute du code JavaScript qui appelle des API Web.
La progression de l'agent est affichée par étapes. L'état initial de l'étape est Investigating….
Le libellé de l'étape initiale est mis à jour à mesure que l'agent exécute des actions plus spécifiques pour répondre à votre requête.
Selon ce que vous déboguez, l'agent peut également exécuter des actions dans les outils de développement, comme enregistrer une trace de performances ou exécuter des audits Lighthouse.
Tutoriel de l'agent
Une fois que l'agent a généré une réponse à votre requête, le libellé de l'étape initiale devient Afficher la procédure pas à pas de l'agent ou Afficher le raisonnement. Vous pouvez le développer pour afficher les étapes suivies par l'agent pour analyser les données dans un panneau latéral à droite.
Voici les étapes à suivre :
- Extraits de code développables exécutés par l'agent, ainsi que les données renvoyées. Vous pouvez copier le code et l'exécuter dans la console.
- Widgets qui présentent les résultats dans un format plus lisible.
Les widgets comportent un bouton Afficher en haut à droite qui vous redirige vers la partie correspondante des outils de développement.
Requêtes complémentaires
Une fois que l'agent a trouvé une réponse finale, il peut suggérer des requêtes de suivi. Cliquez sur l'une d'elles pour poursuivre la conversation.
Générer un prompt pour votre agent de codage
Pour générer une requête pour votre agent de codage, cliquez sur Copier dans l'agent de codage.
L'agent résume ses conclusions et ses insights, et fournit une invite exploitable, sous forme réduite ou au format Markdown lisible par un humain. Vous pouvez la copier dans le presse-papiers et continuer à coder avec l'agent d'IA de votre choix.
Conversations suspendues
L'assistance IA peut générer du code avec des effets secondaires. Dans ce cas, la conversation est mise en pause avant l'exécution du code.
Lorsque la conversation est mise en pause, examinez le code proposé par l'agent. Cliquez sur Continuer pour poursuivre ou sur Annuler pour empêcher l'exécution.
Vous pouvez inspecter les modifications de code suggérées dans le panneau "Modifications".
L'agent applique les modifications dans les outils de développement, mais vous pouvez configurer votre espace de travail pour que les outils de développement enregistrent les modifications apportées à vos sources.
Enregistrer les modifications apportées à votre espace de travail
Avec un dossier d'espace de travail connecté, vous pouvez enregistrer les modifications de style suggérées par l'assistance par IA dans les fichiers source CSS de votre ordinateur.
Pour ce faire :
Commencez par générer un fichier de métadonnées et connecter un dossier d'espace de travail.
Vous pouvez également ajouter un dossier manuellement.
Démarrer une discussion depuis le panneau "Éléments"
Demandez à l'assistance par IA de modifier votre CSS.
L'assistance IA peut générer du code et mettre en pause l'exécution. Examinez le code, puis cliquez sur Continuer pour tester les modifications en direct.
Développez la section Modifications non enregistrées, puis cliquez sur Appliquer à l'espace de travail.
Vérifiez les modifications dans un
diff, puis cliquez sur Tout enregistrer.
Pour découvrir ce workflow, consultez :
Aucune réponse fournie
L'assistance IA peut ne pas fournir de réponses pour diverses raisons.
Si vous pensez que votre requête est un sujet que l'assistance IA devrait pouvoir aborder, signalez un bug.
Historique de la conversation
Une fois que vous avez commencé une conversation, chaque réponse suivante est basée sur vos interactions précédentes avec l'IA.
L'assistance IA enregistre l'historique de vos conversations entre les sessions. Vous pouvez ainsi accéder à vos discussions précédentes même après le rechargement de DevTools ou de Chrome.
Utilisez les commandes en haut à gauche du panneau pour contrôler votre historique des conversations.
Mesurer une distance
Pour démarrer une nouvelle conversation avec le contexte de conversation actuellement sélectionné, cliquez sur le bouton .
Continuer
Pour poursuivre une conversation passée, cliquez sur le bouton et sélectionnez-la dans le menu contextuel.
Supprimer
Pour supprimer une conversation de l'historique, cliquez sur le bouton .
Évaluer les réponses et fournir des commentaires
L'assistance IA est une fonctionnalité expérimentale. C'est pourquoi nous cherchons activement à recueillir vos commentaires pour savoir comment améliorer la qualité des réponses et l'expérience globale.
Voter pour des réponses
Évaluez une réponse à l'aide des boutons J'aime et Je n'aime pas situés sous la réponse.
Signaler des réponses
Pour signaler du contenu inapproprié, cliquez sur le bouton à côté des boutons de vote.