Les Outils pour les développeurs fournissent un panneau d'assistance IA qui vous aide à comprendre votre site Web et à résoudre les problèmes en discutant avec un agent IA.
Grâce à l'assistance IA, vous pouvez déboguer le style, le réseau, les performances et les sources de votre site Web.
Pour discuter efficacement avec Gemini dans le panneau d'assistance IA, découvrez comment ouvrir le panneau, rédiger des prompts et contrôler le flux de la conversation.
Ouvrir le panneau d'assistance IA
Le panneau d'assistance IA s'ouvre dans le tiroir.
Pour ouvrir le panneau, cliquez sur le bouton AI assistance (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 Elements (Éléments), Network (Réseau), Sources ou Performance (Performances) de deux manières :
Cliquez sur le bouton
Debug with AI (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 de prompt courantes dans le menu contextuel Debug with AI (Déboguer avec l'IA).
Depuis le menu de commandes
Pour ouvrir l'assistance IA depuis le menu de commandes, saisissez AI, puis exécutez la commande Show AI assistance (Afficher l'assistance IA), qui comporte le badge Drawer (Tiroir) à côté.
Depuis le menu "Plus d'outils"
Vous pouvez également sélectionner les More options (Plus d'options) > More tools (Plus d'outils) > AI assistance (Assistance IA) en haut à droite.
Rédaction de prompts
Lorsque vous démarrez une conversation, l'assistance IA propose des exemples de prompts pour vous aider à vous lancer rapidement.
Cliquez sur l'un des prompts pour préremplir le champ de saisie du prompt en bas du panneau.
Vous pouvez également saisir votre propre prompt ou question dans le champ de saisie.
Pour envoyer un prompt, appuyez sur Enter ou cliquez sur la flèche à droite du champ de saisie.
Prompts ouverts sans contexte
Avec la zone de chat libre, vous pouvez poser des questions ouvertes de niveau supérieur sans contexte préalable. Exemple :
How to use DevTools to debug accessibility?L'assistance IA exécute d'abord un audit Lighthouse pour l'accessibilité afin de mieux répondre à votre prompt.
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 Network (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 à ce prompt.
Les prompts tels que
How do I use the Animation panel?(Comment utiliser le panneau "Animation" ?) ouWhere is the high contrast setting in DevTools?(Où se trouve le paramètre de contraste élevé dans les Outils pour les développeurs ?) fournissent une aide directe sur les Outils pour les développeurs eux-mêmes.
Une fois que vous avez démarré le chat, l'assistance IA met à jour intelligemment le contexte en fonction de vos actions lorsque le chat est vide, tout en respectant vos sélections manuelles lorsque vous les effectuez.
Prompts 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é.
Vous pouvez modifier le contexte à tout moment en sélectionnant un élément dans Elements (Éléments), une requête dans Network (Réseau), une entrée de trace dans Performance (Performances) ou un fichier dans Sources.
Vous pouvez également copier des parties d'un fichier à partir du panneau Sources (Sources), par exemple, et les coller dans le chat pour demander à quoi elles servent.
Ensuite, découvrez comment utiliser l'assistance IA avec différents panneaux.
Assistance IA pour le style
Utilisez le panneau d'assistance IA pour le style afin de comprendre la mise en page globale d'un site Web, les styles d'éléments spécifiques et d'obtenir des corrections générées par l'IA pour les bugs CSS.
Ouvrir l'assistance IA depuis le panneau "Elements"
Pour ouvrir l'assistance IA depuis le panneau Elements (Éléments) lorsque vous inspectez un nœud DOM, effectuez un clic droit sur le nœud et sélectionnez l'option Ask AI (Demander à l'IA).
Lorsque vous ouvrez l'assistance IA de cette manière, l'élément DOM inspecté est déjà présélectionné comme élément de contexte pour la conversation.
Vous pouvez également cliquer sur le bouton flottant associé à un nœud DOM sur lequel vous passez la souris.
Contexte de la conversation
Les chats avec l'assistance IA sont toujours liés à l'élément actuellement inspecté, qui est le dernier élément sélectionné dans l'arborescence DOM du panneau "Elements" (Éléments). Une référence à cet élément s'affiche en bas à gauche du panneau.
Modifiez le contexte à l'aide du sélecteur d'éléments à côté de l'élément actuel ou en sélectionnant un élément dans l'arborescence DOM du panneau "Elements" (Éléments).
Une fois le contexte sélectionné, vous pouvez capturer une capture d'écran de la fenêtre d'affichage et l'envoyer à votre chat. Cliquez sur le bouton Take screenshot (Prendre une capture d'écran) à côté du champ de saisie du chat.
Vous pouvez utiliser des captures d'écran pour fournir un contexte visuel supplémentaire à vos prompts, par exemple pour vérifier si tous les boutons visibles sont espacés de la même manière.
Bien que l'élément actuellement inspecté soit à la base de la conversation, l'assistance IA a accès à toutes les API Web pour collecter plus d'informations sur la page inspectée. Cela inclut l'interrogation d'autres éléments avec document.querySelector ou l'évaluation des styles calculés.
Assistance IA pour le réseau
Utilisez le panneau d'assistance IA pour le réseau afin de comprendre les requêtes envoyées par votre site Web.
Ouvrir l'assistance IA depuis le panneau Réseau
Pour ouvrir l'assistance IA depuis le panneau Network (Réseau), effectuez un clic droit sur une requête et sélectionnez l'option Ask AI (Demander à l'IA).
Lorsque vous ouvrez l'assistance IA de cette manière, la requête réseau sélectionnée est présélectionnée comme contexte pour la conversation.
Vous pouvez également cliquer sur le bouton flottant à côté de la requête réseau sur laquelle vous passez la souris.
Contexte de la conversation
Les chats avec l'assistance IA sont liés à la requête réseau actuellement sélectionnée dans la liste des requêtes du panneau Network (Réseau). Une référence à cette requête s'affiche en bas à gauche du panneau.
Modifiez le contexte en cliquant sur une autre requête dans le panneau Network (Réseau).
L'assistance IA utilise l'URL de la requête, les en-têtes, les délais et la chaîne d'initiateur de la requête pour répondre à vos questions.
Important : Les en-têtes susceptibles de contenir des informations sensibles sont automatiquement masqués.
Cliquez sur le bouton Expand
dans le chip Analyzing network data après avoir démarré une conversation pour afficher les données brutes
utilisées par l'assistance IA.
Assistance IA pour les performances
Utilisez le panneau d'assistance IA pour les performances afin de comprendre les profils de performances enregistrés dans le panneau "Performance " (Performances).
Ouvrir l'assistance IA depuis le panneau "Performance"
Pour ouvrir l'assistance IA depuis le panneau Performance (Performances), enregistrez d'abord un profil de performances.
Selon ce que vous souhaitez examiner, vous pouvez ouvrir le panneau d'**assistance IA** à partir d'insights sur les performances individuels ou pour des activités dans la vue de trace des performances.
Insights sur les performances
Dans l'onglet Insights, ouvrez un insight, par exemple **LCP by phase, puis cliquez sur le bouton Ask AI** (Demander à l'IA).
Les Outils pour les développeurs ouvrent le panneau d'assistance IA avec cet insight sur les performances présélectionné comme contexte pour la conversation.
Vue de trace des performances
Pour ouvrir l'assistance IA depuis la vue de trace, effectuez un clic droit sur une activité et sélectionnez l'option Ask AI (Demander à l'IA).
Dans ce cas, cette activité est présélectionnée comme contexte pour la conversation.
Contexte de la conversation
L'activité de performances sélectionnée est utilisée comme contexte pour votre conversation avec l'assistance IA. Une référence à cette activité s'affiche en bas à gauche du panneau.
Insights sur les performances
Si vous avez cliqué sur Ask AI (Demander à l'IA) pour un insight sur les performances spécifique, cet insight s'affiche comme contexte sélectionné. Vous pouvez cliquer sur Ask AI (Demander à l'IA) sous d'autres insights pour modifier votre sélection.
Après avoir démarré une conversation, développez la section Analyzing insight: ... (Analyse de l'insight : ...) pour afficher les données brutes utilisées par l'assistance IA.
Vue Trace
Vous pouvez sélectionner différents éléments dans la trace de performances, et le contexte change en conséquence.
L'assistance IA utilise les délais de l'arborescence des appels sélectionnée pour répondre à votre prompt.
Cliquez sur le
bouton dans le chip Analyzing call tree après avoir démarré une conversation pour voir
les données brutes utilisées par l'assistance IA.
Assistance IA pour les sources
Utilisez le panneau d'assistance IA pour les sources afin de comprendre les fichiers chargés et utilisés par votre site Web.
Ouvrir l'assistance IA depuis le panneau "Sources"
Pour ouvrir l'assistance IA depuis le panneau Sources, effectuez un clic droit sur un fichier et sélectionnez l'option Ask AI.
Lorsque vous ouvrez l'assistance IA de cette manière, le fichier sélectionné est présélectionné comme contexte pour la conversation.
Vous pouvez également cliquer sur le bouton flottant lorsque vous passez la souris sur un fichier.
Contexte de la conversation
Le fichier sélectionné est utilisé comme contexte pour votre conversation avec l'assistance IA. Une référence à ce fichier s'affiche en bas à gauche du panneau.
Modifiez le contexte en cliquant sur un autre fichier dans le panneau "Sources" (Sources).
L'assistance IA utilise le nom, l'URL, la carte source (si disponible) et le contenu du fichier sélectionné pour répondre à vos questions.
Cliquez sur le bouton
dans le chip Analyzing file après avoir démarré une conversation pour afficher les données brutes
utilisées par l'assistance IA.
Flux de la conversation
L'envoi d'un prompt démarre la conversation avec l'agent de style. Pour obtenir les informations nécessaires pour répondre au mieux à votre prompt, 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… (Recherche en cours…).
Le libellé de l'étape est mis à jour à mesure que l'agent exécute des actions plus spécifiques pour répondre à votre question.
Une fois que l'agent a trouvé une réponse finale, celle-ci s'affiche sous les étapes de l'enquête, y compris des suggestions de prompts de suivi.
Cliquez sur l'un des prompts suggérés pour poursuivre la conversation. Cliquez sur
d'une étape d'enquête pour mieux comprendre ce que l'assistance IA a fait en coulisses.
Lorsque vous développez un chip de progression, vous voyez le code que l'agent a exécuté, ainsi que sa valeur de retour. Copiez le code exécuté pour une utilisation ultérieure, par exemple pour l'exécuter avec le panneau "Console".
Conversations mises en pause
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 Continue (Continuer) pour continuer ou sur Cancel (Annuler) pour empêcher l'exécution.
Enregistrer les modifications dans 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 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émarrez un chat depuis le panneau "Elements" (Éléments).
Demandez à l'assistance IA de modifier votre CSS.
L'assistance IA peut générer du code et mettre l'exécution en pause. Examinez le code et cliquez sur Continue (Continuer) pour tester les modifications en direct.
Développez la section Unsaved changes (Modifications non enregistrées), puis cliquez sur Apply to workspace (Appliquer à l'espace de travail).
Examinez les modifications dans un
diff, puis cliquez sur Save all (Tout enregistrer).
Pour découvrir ce workflow, consultez les sections suivantes :
Aucune réponse
L'assistance IA peut ne pas fournir de réponses pour diverses raisons.
Si vous pensez que votre prompt est un sujet que l'assistance IA devrait pouvoir aborder, signalez un bug.
Historique de la conversation
Une fois que vous avez démarré 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 chats précédents même après avoir rechargé les Outils de développement ou Chrome.
Utilisez les commandes en haut à gauche du panneau pour contrôler l'historique de vos conversations.
Mesurer une distance
Pour démarrer une conversation avec le contexte de conversation actuellement sélectionné , cliquez sur le bouton .
Continuer
Pour poursuivre une conversation précédente, 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 envoyer des commentaires
L'assistance IA est une fonctionnalité expérimentale. Nous sommes donc activement à la recherche de vos commentaires pour savoir comment améliorer la qualité des réponses et l'expérience globale.
Voter pour les réponses
Évaluez une réponse à l'aide des boutons Thumbs up (J'aime) et Thumbs down (Je n'aime pas) situés sous la réponse.
Signaler les réponses
Pour signaler un contenu inapproprié, cliquez sur le bouton à côté des boutons de vote.