Aide à la mise en forme basée sur l'IA

Matthias Rohmer
Matthias Rohmer

Utilisez le panneau Assistance par 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 correctifs générés par IA pour les bugs CSS.

Ouvrir le panneau "Assistance IA"

Le panneau Assistance par IA s'ouvre dans le volet.

Le panneau d'assistance par IA s'est ouvert dans son état par défaut.

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, puis sélectionnez l'option Demander à l'IA.

Menu contextuel de l'élément avec "Demander à l'IA" mis en évidence.

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 pointez.

Bouton flottant associé à un nœud DOM.

Depuis le menu de commande

Pour ouvrir l'assistance IA à partir du menu de commande, saisissez AI, puis exécutez la commande Afficher l'assistance IA, qui est associée au badge Réglages.

Menu des commandes ouvert avec "Afficher l'assistance AI" mis en évidence.

Dans le menu "Plus d'outils"

Vous pouvez également sélectionner Plus d'options > Plus d'outils > Assistance par IA en haut à droite.

Menu "Plus d'outils" ouvert.

Contexte de la conversation

Les discussions avec l'assistance par IA concernent toujours 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 s'affiche en bas à gauche du panneau.

Panneau d'assistance par IA avec l'élément de contexte mis en évidence.

Modifiez le contexte à l'aide du bouton de 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".

Bien que l'élément actuellement inspecté constitue la base de la conversation, l'assistance par IA a accès à toutes les API Web pour recueillir 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.

Invites

Lorsque vous démarrez une nouvelle conversation, l'assistance par IA pour le style propose des exemples d'invites pour vous aider à vous lancer rapidement.

Panneau d'assistance par IA avec les exemples d'invites en surbrillance.

Cliquez sur l'une des requêtes pour préremplir le champ de saisie de la requête en bas du panneau.

Vous pouvez également saisir votre propre requête ou question dans le champ de saisie.

Pour envoyer une invite, appuyez sur Enter ou cliquez sur la flèche située à droite du champ de saisie.

Flux de conversation

L'envoi d'une requête lance la conversation avec l'agent de stylisation. 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 de l'étape initiale est Investigating….

Panneau d'assistance de l'IA après le début d'une conversation.

Le libellé de l'étape est mis à jour à mesure que l'agent exécute des actions plus spécifiques pour résoudre votre question.

Une fois que l'agent a trouvé une réponse définitive, celle-ci s'affiche sous les étapes d'investigation, avec des suggestions d'invites de suivi.

Panneau d'assistance par IA avec une réponse donnée par l'IA.

Cliquez sur l'une des requêtes suggérées pour continuer la conversation. Cliquez sur .

d'une étape d'investigation pour mieux comprendre ce que l'assistance IA a fait en coulisses.

Panneau d'assistance de l'IA avec une étape de conversation développée.

Lorsque vous développez un chip de progression, le code exécuté par l'agent s'affiche, ainsi que sa valeur de retour. Copiez le code exécuté pour une utilisation ultérieure, par exemple en l'exécutant avec le panneau de console.

Conversations suspendues

L'aide de l'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.

Panneau d'assistance de l'IA avec une conversation mise en pause.

Lorsque la conversation est suspendue, examinez le code proposé par l'agent. Cliquez sur Continue (Continuer) pour continuer.

Aucune réponse donnée

L'assistance par IA peut ne pas fournir de réponse pour diverses raisons.

Panneau de l'assistance de l'IA avec une conversation refusée.

Si vous pensez que votre requête est un sujet que l'assistance par IA devrait pouvoir traiter, 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.

Utilisez les commandes en haut à gauche du panneau pour contrôler l'historique de vos conversations.

Panneau d'assistance par IA avec les commandes d'historique mises en évidence.

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 , puis sélectionnez la conversation dans le menu contextuel.

Supprimer

Pour supprimer une conversation de l'historique, cliquez sur le bouton .

Noter les réponses et envoyer des commentaires

L'assistance IA est une fonctionnalité expérimentale. Nous attendons donc vos commentaires pour savoir comment améliorer la qualité des réponses et l'expérience globale.

Panneau d'assistance par IA avec les commandes de classification mises en évidence.

Réponses aux votes

Évaluez une réponse à l'aide des boutons J'aime et Je n'aime pas sous la réponse.

Signaler des réponses

Pour signaler un contenu inapproprié, cliquez sur le bouton à côté des boutons de vote.