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 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 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 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.
Vous pouvez également ouvrir le panneau directement depuis les panneaux Éléments, Réseau, Sources ou Performances en effectuant un clic droit sur un élément ou une requête, puis en sélectionnant Demander à 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.
La zone de chat sans frais vous permet de poser des questions de niveau supérieur, comme "comment utiliser les outils de développement pour déboguer l'accessibilité ?" ou "quelles requêtes réseau sont lentes ?". 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.
Assistance IA pour la mise en forme
Utilisez le panneau Assistance par IA pour comprendre la mise en page globale d'un site Web et les styles d'éléments spécifiques, et 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 à partir du panneau Éléments, lorsque vous inspectez un nœud DOM, effectuez un clic droit sur le nœud et sélectionnez l'option 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 avez pointé.
Contexte de la conversation
Les discussions avec l'assistance IA sont toujours liées à l'élément actuellement inspecté, qui est le dernier élément sélectionné dans l'arborescence DOM du panneau "Éléments". Une référence à cet élément est affichée 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 "Éléments".
Une fois le contexte sélectionné, vous pouvez faire une capture d'écran de la fenêtre d'affichage et l'envoyer dans votre chat. Cliquez sur le bouton 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 requêtes, par exemple pour vérifier si tous les boutons visibles ont le même espacement.
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 à partir de 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 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 "Network"
Pour ouvrir l'assistance IA à partir du panneau "Réseau", effectuez un clic droit sur une requête et sélectionnez l'option Demander à l'IA.
Lorsque vous ouvrez l'assistance IA comme ceci, 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 pointez.
Contexte de la conversation
Les discussions avec l'assistance IA sont liées à la requête réseau actuellement sélectionnée dans la liste des requêtes du panneau 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 Réseau.
L'assistance IA utilise l'URL de la requête, les en-têtes, les timings et la chaîne de l'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 Développer 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 Assistance IA pour les performances afin de comprendre les profils de performances enregistrés dans le panneau "Performances".
Ouvrir l'assistance IA depuis le panneau "Performances"
Pour ouvrir l'assistance IA à partir du panneau Performances, commencez par enregistrer un profil de performances.
Selon ce que vous souhaitez examiner, vous pouvez ouvrir le panneau **Assistance IA** à partir des insights sur les performances individuelles ou pour les activités dans la vue du tracé des performances.
Insights sur les performances
Dans l'onglet Insights, ouvrez un insight (par exemple, **LCP par phase), puis cliquez sur le bouton Demander à l'IA**.
Les outils de développement ouvrent le panneau Assistance IA avec cet insight sur les performances présélectionné comme contexte pour la conversation.
Vue "Tracé des performances"
Pour ouvrir l'assistance IA à partir de la vue Trace, effectuez un clic droit sur une activité et sélectionnez l'option 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é est affichée en bas à gauche du panneau.
Insights sur les performances
Si vous avez cliqué sur Demander à l'IA pour obtenir un insight spécifique sur les performances, cet insight s'affiche comme contexte sélectionné. Vous pouvez cliquer sur Demander à l'IA sous "Autres insights" pour modifier votre sélection.
Après avoir commencé une conversation, développez la section Analyzing 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. Le contexte changera en conséquence.
L'assistance IA utilise les timings de l'arborescence d'appels sélectionnée pour répondre à votre requête.
Cliquez sur le bouton dans le chip Analyzing call tree après avoir démarré une conversation pour afficher les données brutes utilisées par l'assistance IA.
Assistance IA pour les sources
Utilisez le panneau 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, puis sélectionnez l'option Demander à l'IA.
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 pointez 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 est indiquée en bas à gauche du panneau.
Modifiez le contexte en cliquant sur un autre fichier dans le panneau "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 conversation
L'envoi d'un prompt lance la conversation avec l'agent de style. 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 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 définitive, celle-ci s'affiche sous les étapes de l'enquête, y compris des suggestions d'invites de suivi.
Cliquez sur l'une des requêtes suggérées 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 exécuté par l'agent, ainsi que sa valeur de retour. Copiez le code exécuté pour l'utiliser ultérieurement, par exemple en l'exécutant avec le panneau de la console.
Conversations suspendues
L'assistance IA peut générer du code avec des effets secondaires. Dans ce cas, la conversation est suspendue 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.
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 des outils de développement 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.