Agent Chrome DevTools

Aperçu

Une skill spécialisée pour contrôler et inspecter un navigateur Chrome actif. Cette skill exploite le serveur MCP chrome-devtools pour effectuer un large éventail de tâches liées au navigateur, allant de la simple navigation au profilage de performance complexe.

Quand l'utiliser

Utilisez cette skill quand :

• Automatisation de navigateur : Naviguer sur des pages, cliquer sur des éléments, remplir des formulaires et gérer les boîtes de dialogue.
• Inspection visuelle : Prendre des captures d'écran ou des snapshots textuels de pages web.
• Débogage : Inspecter les messages de console, évaluer du JavaScript dans le contexte de la page et analyser les requêtes réseau.
• Analyse de performance : Enregistrer et analyser les traces de performance pour identifier les goulots d'étranglement et les problèmes de Core Web Vitals.
• Émulation : Redimensionner la fenêtre d'affichage ou émuler des conditions réseau/CPU.

Catégories d'outils

1. Navigation et gestion de pages

• new_page : Ouvrir un nouvel onglet/page.
• navigate_page : Accéder à une URL spécifique, recharger ou naviguer dans l'historique.
• select_page : Basculer le contexte entre les pages ouvertes.
• list_pages : Voir toutes les pages ouvertes et leurs IDs.
• close_page : Fermer une page spécifique.
• wait_for : Attendre qu'un texte spécifique apparaisse sur la page.

2. Saisie et interaction

• click : Cliquer sur un élément (utiliser uid du snapshot).
• fill / fill_form : Taper du texte dans des champs ou remplir plusieurs champs à la fois.
• hover : Passer la souris sur un élément.
• press_key : Envoyer des raccourcis clavier ou des touches spéciales (ex. "Enter", "Control+C").
• drag : Faire glisser et déposer des éléments.
• handle_dialog : Accepter ou rejeter les alertes/prompts du navigateur.
• upload_file : Télécharger un fichier via un champ de saisie de fichier.

3. Débogage et inspection

• take_snapshot : Obtenir un arbre d'accessibilité basé sur le texte (idéal pour identifier les éléments).
• take_screenshot : Capturer une représentation visuelle de la page ou d'un élément spécifique.
• list_console_messages / get_console_message : Inspecter la sortie de console de la page.
• evaluate_script : Exécuter du JavaScript personnalisé dans le contexte de la page.
• list_network_requests / get_network_request : Analyser le trafic réseau et les détails des requêtes.

4. Émulation et performance

• resize_page : Modifier les dimensions de la fenêtre d'affichage.
• emulate : Ralentissement CPU/Réseau ou émulation de géolocalisation.
• performance_start_trace : Commencer à enregistrer un profil de performance.
• performance_stop_trace : Arrêter l'enregistrement et sauvegarder la trace.
• performance_analyze_insight : Obtenir une analyse détaillée à partir des données de performance enregistrées.

Modèles de flux de travail

Modèle A : Identification d'éléments (Snapshot en priorité)

Préférez toujours take_snapshot à take_screenshot pour trouver des éléments. Le snapshot fournit des valeurs uid qui sont requises par les outils d'interaction.

1. `take_snapshot` pour obtenir la structure actuelle de la page.
2. Trouver le `uid` de l'élément cible.
3. Utiliser `click(uid=...)` ou `fill(uid=..., value=...)`.

Modèle B : Dépannage d'erreurs

Quand une page est défaillante, vérifiez à la fois les logs de console et les requêtes réseau.

1. `list_console_messages` pour vérifier les erreurs JavaScript.
2. `list_network_requests` pour identifier les ressources défaillantes (4xx/5xx).
3. `evaluate_script` pour vérifier la valeur d'éléments DOM spécifiques ou de variables globales.

Modèle C : Profilage de performance

Identifier pourquoi une page est lente.

1. `performance_start_trace(reload=true, autoStop=true)`
2. Attendre le chargement de la page/fin de la trace.
3. `performance_analyze_insight` pour trouver des problèmes de LCP ou des décalages de mise en page.

Bonnes pratiques

• Conscience du contexte : Toujours exécuter list_pages et select_page si vous n'êtes pas sûr de l'onglet actuellement actif.
• Snapshots : Prendre un nouveau snapshot après toute navigation majeure ou changement du DOM, car les valeurs uid peuvent changer.
• Timeouts : Utiliser des timeouts raisonnables pour wait_for pour éviter de rester bloqué sur des éléments à chargement lent.
• Screenshots : Utiliser take_screenshot avec parcimonie pour la vérification visuelle, mais s'appuyer sur take_snapshot pour la logique.