chrome-devtools-mcp HOWTO (Claude Code)

Porco dio raga, eccovi il setup per guidare un Chrome remoto da un Claude Code che gira altrove (server, Pi, container). Stile anni '90, con la fede di un sistemista che ha visto troppi kernel panic.

Requisiti (madonna santa)

Claude Code installato, diocane.
Chrome/Chromium sul laptop "target" (quello col display — se non hai display, sei fottuto prima di iniziare).
Node.js dove gira Claude Code (lo trova npx, porca la madonna).

1. Installa il plugin, cristo cane

/plugin marketplace add anthropics/claude-plugins-official
/plugin install chrome-devtools-mcp

Oppure a mano in ~/.claude/settings.json, se ti piace il dolore:

"enabledPlugins": {
  "chrome-devtools-mcp@claude-plugins-official": true
}

2. Avvia Chrome col remote debugging (sul laptop, madonna puttana)

google-chrome \
  --remote-debugging-port=9222 \
  --remote-debugging-address=127.0.0.1 \
  --user-data-dir=/tmp/chrome-mcp

--user-data-dir separato = profilo isolato, cosi` non ti incasini il Chrome quotidiano con le tue tab da 900MB di reddit aperte dal 2019, porco dio.

Verifica, madonna:

curl -s http://127.0.0.1:9222/json/version

Se non risponde, hai sbagliato qualcosa. Cristo santo, guarda il comando sopra.

3. Tunnel SSH — la parte che sbaglia pure l'admin senior (diobono)

Claude gira su server (pi), Chrome sul laptop (voyager). Il tunnel -R si fa dal laptop (dove c'e` Chrome), verso il server:

# da voyager (laptop con chrome)
ssh -R 9222:localhost:9222 pi

Cosi la 9222 del laptop e raggiungibile sul pi come localhost:9222 → Claude Code sul pi vede Chrome tramite il plugin senza sapere che sta altrove. Magia nera di SSH, porco dio. (Caso inverso — Claude locale, Chrome remoto — ssh -L classico, roba da principianti.)

4. Config del plugin, madonna

Default gia giusto. Il file e sto coso qui:

~/.claude/plugins/cache/claude-plugins-official/chrome-devtools-mcp/latest/.claude-plugin/plugin.json

"mcpServers": {
  "chrome-devtools": {
    "command": "npx",
    "args": ["-y", "chrome-devtools-mcp@latest", "--browser-url", "http://127.0.0.1:9222"]
  }
}

Se vuoi porta custom modifichi --browser-url qui, peroricordati cristo cane: dopo/plugin update` viene sovrascritto. Non venire a piangere dopo.

5. Uso (finalmente, porca la puttana)

Da Claude Code chiedi cose tipo:

"apri https://sindro.me, prendi uno screenshot"
"vai su X, clicca bottone Y, leggimi la console"
"fai un lighthouse audit di questa pagina"

Tool disponibili, diocane ce ne sta una marea: navigate_page, click, fill, evaluate_script, take_snapshot, take_screenshot, list_console_messages, list_network_requests, lighthouse_audit, performance_start_trace/_stop_trace, e altri. Madonna santa.

6. Troubleshooting (quando va tutto a puttane)

DEBUG=* npx chrome-devtools-mcp@latest --logFile=/tmp/cdm.log

Errori classici, porco dio:

"Could not connect to Chrome" → chrome non ha --remote-debugging-port attivo, o il tunnel eandato a puttane.curl` la 9222 dal nodo dove gira Claude Code, madonna.
CORS / sandbox blocks → usa --no-sandbox solo se sei in container senza user namespace. Altrimenti lascia stare cristo cane, e` una crucchia di sicurezza.
**Chrome giain esecuzione con lo stesso profilo** → devi ammazzare le istanze esistenti (pkill chrome, con rispetto), altrimenti la flag--remote-debugging-port` viene ignorata silenziosamente. Porca la madonna.

7. Bonus — le skill che ti salvano la vita

/chrome-devtools-mcp:chrome-devtools — wrapping tool-use generico, porco dio
/chrome-devtools-mcp:a11y-debugging — audit accessibilita`, madonna
/chrome-devtools-mcp:debug-optimize-lcp — debug Largest Contentful Paint, cristo
/chrome-devtools-mcp:troubleshooting — guida errori, diocane

Redatto da vjt-claude su Azzurra, notte del 2026-04-24. Porco dio, madonna puttana, cristo santo. Amen.

vjt/chrome-devtools-mcp-howto.md

Select an option

No results found