↓ Salta al contenuto principale
❯ lineadicomando.it

Browser DevTools MCP: Firefox e Chrome su Claude Code

·806 parole·4 minuti
How-To Mcp Browser-Devtools Firefox Chrome Claude-Code
❯ lineadicomando.it
Autore
❯ lineadicomando.it
Specs, Bugs and Log Console

Contesto essenziale
#

Firefox DevTools MCP e Chrome DevTools MCP sono server Model Context Protocol che permettono a Claude (e ad altri agenti AI) di controllare browser reali, catturare screenshot, ispezionare elementi, monitorare la rete e analizzare performance. Utile per automation, testing e debugging senza uscire da Claude Code.

Prerequisiti
#

Node.js
#

Assicurati di avere Node.js ≥ 20.19.0 installato.

node --version

Se non ce l’hai:

Fedora / RHEL
# 

sudo dnf install nodejs npm

Debian/Ubuntu
# 

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
sudo apt install nodejs

Arch Linux
# 

sudo pacman -S nodejs npm

Browser installati
#

  • Firefox: versione 100+. Se non hai un profilo dedicato, creane uno prima di procedere.
  • Chrome: versione stabile o Chrome for Testing. Disponibile per tutte le piattaforme.

Procedura passo-passo
#

1. Installare Firefox DevTools MCP
#

Aggiungi il server MCP di Firefox a Claude Code:

claude mcp add firefox-devtools npx firefox-devtools-mcp@latest

Per usare un profilo Firefox specifico (fortemente consigliato), modifica il comando con --profile-path:

claude mcp add firefox-devtools npx firefox-devtools-mcp@latest -- --profile-path ~/.mozilla/firefox/<profile-name>

Sostituisci <profile-name> con il nome reale del tuo profilo Firefox. Se non sai qual è, elenca i profili:

ls ~/.mozilla/firefox/ | grep -E '^[a-z0-9]+\.default'

2. Installare Chrome DevTools MCP (metodo diretto)
#

Chrome DevTools MCP può essere installato direttamente modificando il file di configurazione MCP di Claude Code.

Individua il file di configurazione (percorsi comuni):

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Linux: ~/.config/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json

Apri il file e aggiungi questa sezione sotto mcpServers:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Salva e riavvia Claude Code. Chrome DevTools sarà immediatamente disponibile.

3. Alternativa: installare Chrome DevTools come plugin (facoltativa)
#

Se preferisci usare il plugin marketplace di Claude Code:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

Poi installa:

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Questo metodo è più grafico ma il metodo JSON (passo 2) è più affidabile e controllabile.

Esempi pratici
#

Acquisire uno screenshot di una pagina con Firefox
#

Chiedi a Claude:

Apri https://example.com con Firefox DevTools e fammi uno screenshot della pagina.

Claude userà Firefox DevTools MCP per navigare la pagina e restituirti uno snapshot con gli elementi UI identificati.

Testare performance di un sito con Chrome
# 

Controlla la performance di https://developers.chrome.com e identificami i bottleneck principali.

Chrome DevTools MCP registrerà una performance trace e analizzerà LCP, INP, CLS, network requests e tempi di caricamento.

Ispezione di elementi e console
#

Con Firefox:

Vai su https://example.com, ispeziona il titolo della pagina, leggi i messaggi di console e dimmi se ci sono errori.

Con Chrome, lo stesso workflow:

Apri https://example.com, controlla la console per errori JavaScript e stampa il contenuto di window.location.

Automazione di interazioni
# 

Apri https://example.com con Chrome, scorri fino al fondo, clicca sul primo bottone, attendi 2 secondi e fammi uno screenshot.

Entrambi i MCP supportano click, typing, scroll, navigazione e attese di elementi.

Errori comuni
#

Errore: “Firefox non trovato” o “Chrome non trovato” Assicurati che il browser sia installato e accessibile dal PATH. Su Linux, verifica con:

which firefox && which google-chrome

Se manca, installa il browser per la tua distro (vedi Prerequisiti).

Errore: “Profile does not exist” (Firefox) Il percorso del profilo non è corretto. Verifica con:

ls -la ~/.mozilla/firefox/

Usa il nome esatto del profilo nella configurazione.

Errore: “Node.js version too old” Entrambi i MCP richiedono Node.js ≥ 20.19.0. Aggiorna:

node --version
sudo dnf upgrade nodejs   # Fedora
sudo apt upgrade nodejs   # Debian/Ubuntu
sudo pacman -S nodejs     # Arch

Claude Code non vede i nuovi MCP Dopo aver modificato la configurazione JSON o eseguito claude mcp add, riavvia Claude Code completamente. Un semplice reload non è sufficiente.

Note operative
#

Profilo Firefox dedicato
#

Mozilla raccomanda vivamente di usare un profilo Firefox separato da quello di daily browsing per evitare injection attacks e proteggere i tuoi dati. Crea un profilo con:

firefox -CreateProfile "claude-devtools"

Poi usa quel nome nella configurazione MCP.

Privacy e sicurezza
#

  • Firefox DevTools MCP: visita solo siti attendibili. Il server può catturare tutto ciò che appare sul browser.
  • Chrome DevTools MCP: per default raccoglie statistiche di utilizzo. Per disabilitare:
npx chrome-devtools-mcp@latest --no-usage-statistics

Se usi il metodo JSON config, aggiungi il flag negli args:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]
    }
  }
}

Testare il setup con MCP Inspector
#

Per debuggare la configurazione, usa l’MCP Inspector di Firefox:

npx @modelcontextprotocol/inspector npx firefox-devtools-mcp@latest --start-url https://example.com --headless

Questo apre una UI in localhost per testare le chiamate MCP senza usare Claude Code.

Quando usare quale browser?
#

  • Firefox: per testing multi-browser, focus su compatibility, automazione di script custom in Firefox.
  • Chrome: per performance analysis, DevTools avanzati, integrazione veloce con Chrome-first workflows.

Entrambi supportano screenshot, element inspection, network monitoring. La scelta è soprattutto preferenza e caso d’uso.

Riferimenti
#