Chrome DevTools MCP permet à un agent d’inspecter une page, la console, les requêtes et une trace de performance. Suivez un symptôme jusqu’à la requête ou au code responsable. Dans cet exercice, un bouton ne charge pas les données. Nous reproduisons l’erreur, modifions un chemin et vérifions le résultat.
Choisir la connexion au navigateur
Utilisez une instance isolée pour un site inconnu ou de test. L’outil prend en charge browserUrl ou wsEndpoint pour un navigateur débogable, et autoConnect avec une configuration Chrome compatible. Une session existante peut exposer des pages authentifiées et le stockage. Limitez l’accès au profil et à l’origine autorisés. Nous avons utilisé l’exécutable explicite de Tabbit Browser Dev avec un profil isolé, sans généraliser à d’autres versions.
Enregistrer le MCP et lancer l’exercice
Utilisez une configuration stdio locale. Nous avons testé chrome-devtools-mcp 1.12.0 avec l’exécutable indiqué. Adaptez le chemin. Les statistiques et les requêtes CrUX ont été désactivées. Téléchargez les deux fichiers dans un dossier, lancez le serveur Python et ouvrez l’adresse locale affichée.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@1.12.0",
"--executablePath",
"/Applications/Tabbit Browser Dev.app/Contents/MacOS/Tabbit Browser Dev",
"--isolated",
"--headless",
"--viewport=1000x565",
"--usageStatistics=false",
"--performanceCrux=false"
]
}
}
}python3 fixture.py --port 8765Reproduire et recueillir deux preuves
Ouvrez la page, prenez un instantané et cliquez une fois sur Load records. Utilisez pageId et uid de vos résultats. La page affiche Could not load records. list_console_messages renvoie F02 load failed: HTTP 404. list_network_requests filtré sur fetch montre GET /api/record [404]. get_network_request confirme la requête. Une autre 404 de favicon était indépendante.
| Étape | Outil | Résultat attendu |
|---|---|---|
| 1 | take_snapshot + click | Could not load records |
| 2 | list_console_messages | F02 load failed: HTTP 404 |
| 3 | list_network_requests + get_network_request | GET /api/record [404] |
Chrome DevTools MCP · Tool reference
Modifier un chemin et répéter l’action
Le serveur fournit /api/records mais le script demande /api/record. Modifiez le chemin fetch dans fixture.html et enregistrez. Rechargez, prenez un nouvel instantané et cliquez sur le même bouton. La requête répond 200 et la page indique Loaded: F02-FIXED. L’erreur applicative ne revient pas. Conservez les deux résultats.
- const response = await fetch("/api/record");
+ const response = await fetch("/api/records");
Poser une autre question avec la trace
Après le test fonctionnel, nous avons exécuté performance_start_trace avec reload et autoStop. La mesure locale donne LCP 386 ms, TTFB 2 ms et CLS 0,00, sans limitation CPU ou réseau et sans données terrain. Cette recharge confirme la capture. Elle ne démontre pas un gain. Pour étudier la lenteur, répétez à charge et environnement constants.
| Outil | Résultat attendu |
|---|---|
| LCP | 386 ms |
| TTFB | 2 ms |
| CLS | 0.00 |
Ce qu’ajoutent deux témoignages
Sur r/ClaudeAI, une personne a distingué une ressource manquante et une autre exception grâce à la console et au réseau. Sur r/mcp, une autre a décrit un navigateur MCP plus lent que son navigateur habituel. Ces cas motivent la conservation du résultat exact et du mode, avec une mesure de performance séparée.
Peut-on connecter un navigateur déjà lancé ?
Oui, s’il dispose d’un point de débogage autorisé et compatible. Commencez en mode isolé sauf si la tâche requiert une session existante.
Questions fréquentes
Peut-on connecter un navigateur déjà lancé ?
Oui, s’il dispose d’un point de débogage autorisé et compatible. Commencez en mode isolé sauf si la tâche requiert une session existante.
Que peut inspecter Chrome DevTools MCP ?
Chrome DevTools MCP permet à un agent d’inspecter une page, la console, les requêtes et une trace de performance. Suivez un symptôme jusqu’à la requête ou au code responsable. Dans cet exercice, un bouton ne charge pas les données. Nous reproduisons l’erreur, modifions un chemin et vérifions le résultat.
Comment enregistrer le serveur ?
Utilisez une configuration stdio locale. Nous avons testé chrome-devtools-mcp 1.12.0 avec l’exécutable indiqué. Adaptez le chemin. Les statistiques et les requêtes CrUX ont été désactivées. Téléchargez les deux fichiers dans un dossier, lancez le serveur Python et ouvrez l’adresse locale affichée.
Comment vérifier la correction ?
Le serveur fournit /api/records mais le script demande /api/record. Modifiez le chemin fetch dans fixture.html et enregistrez. Rechargez, prenez un nouvel instantané et cliquez sur le même bouton. La requête répond 200 et la page indique Loaded: F02-FIXED. L’erreur applicative ne revient pas. Conservez les deux résultats.
Que montre une trace locale ?
Après le test fonctionnel, nous avons exécuté performance_start_trace avec reload et autoStop. La mesure locale donne LCP 386 ms, TTFB 2 ms et CLS 0,00, sans limitation CPU ou réseau et sans données terrain. Cette recharge confirme la capture. Elle ne démontre pas un gain. Pour étudier la lenteur, répétez à charge et environnement constants.