Gå til indholdet

Chrome DevTools MCP Server – Googles ultimative web-MCP

Chrome DevTools MCP Server er en officiel MCP-server (Model-Context-Protocol) fra Google, der fungerer som bindeled mellem en Chrome-browser og en kodningsagent, såsom VS Code, Cursor, Gemini, Claude eller Copilot. Serveren giver din AI-assistent direkte adgang til hele spektret af Chrome DevTools, hvilket muliggør pålidelig automatisering, dybdegående debugging og præstationsanalyse.

MCP-serveren er blevet beskrevet som en næsten komplet drag-and-drop-erstatning for Playright MCP-serveren. Den har 26 funktioner og er designet til at fungere bedre end konkurrenterne ved at bruge færre tokens og have mindre overhead i MCP-kontekstvinduet.

For ikke-udviklere: AI, der styrer din browser

Selvom Chrome DevTools MCP Server primært er udviklet til AI-kodningsagenter som Gemini, Cursor eller Copilot, giver dens kernefunktion – evnen til at lade AI-agenten styre og inspicere en live Chrome-browser – store fordele for almindelige brugere, der ønsker at automatisere deres webopgaver. Serveren giver din AI direkte adgang til avancerede Input automation-værktøjer, hvilket betyder, at den kan interagere med hjemmesider præcis som et menneske: den kan klikke, trække, udfylde tekstfelter og håndtere dialogbokse. Denne funktionalitet gør det muligt at udføre simple, men pålidelige, automatiseringer på enhver hjemmeside.

Du kan for eksempel bede din agent om at finde specifikke nyheder eller onlinekurser. Agenten vil navigere til websteder, søge efter det ønskede emne og klikke sig igennem til det relevante indhold, hvilket sikrer, at den automatisk tilgår informationen. Du kan også instruere agenten om at udfylde komplekse onlineformularer eller foretage indstillingsændringer, som f.eks. at ændre værdien i en dropdown-menu fra 'aktiv' til 'deaktiveret'. Sammenlignet med ældre automatiseringsmetoder bruger denne tilgang færre tokens og har mindre overhead, hvilket gør den til en meget effektiv måde at få AI til at håndtere webopgaver på.

Hvad kan det bruges til?

Dette værktøj løser et stort og årtier gammelt problem for webudviklere og åbner op for nye automatiseringsmuligheder:

  1. Vedvarende CSS-ændringer (Persistence): Et af de største problemer, som serveren løser, er, at de CSS-ændringer, du foretager i Chrome DevTools' inspektør, normalt forsvinder, når du opdaterer siden. Ved at bruge DevTools MCP-serveren kan du foretage ændringer i DevTools og derefter instruere din agent om at "integrere de ændringer til vores kode". Serveren vil derefter analysere forskellene mellem den eksisterende kodebase (f.eks. index.html) og de ændringer, der er foretaget i DevTools, og gemme dem permanent i koden. Dette giver udviklere mulighed for virkelig at designe i browseren uden at miste midlertidige kodetilpasninger. Dette har været et problem, der har eksisteret i årtier.
  2. UI-interaktion og test: Serveren tillader agenter at interagere med brugerfladen (UI). Du kan bede agenten om at klikke på elementer, trække, udfylde tekstfelter, håndtere dialogbokse eller ændre indstillinger i dropdown-menuer (f.eks. fra "aktiv" til "deaktiveret"). Dette er nyttigt til at emulere brugertests og hurtigt identificere eventuelle fejl, der dukker op i konsollen.
  3. Debugging og analyse: Serveren giver adgang til avancerede debugging-funktioner, såsom at analysere netværksforespørgsler, se konsolbeskeder, evaluere scripts og tage snapshots eller screenshots.
  4. Præstationsindsigt: Værktøjet kan optage traces og udtrække brugbare præstationsindsigter. Blandt de 26 værktøjer er der specifikke funktioner til ydeevne, såsom performance_start_trace, performance_stop_trace og performance_analyze_insight.
  5. Audit af websteder: Den er meget nyttig til at udføre audits på websteder, herunder dem der kører på localhost, for at finde flaskehalse og foreslå strukturelle forbedringer.

Hvordan installeres det og hvor virker det?

For at køre Chrome DevTools MCP-serveren kræves:

  • Node.js version 22.12.0 eller nyere (Bemærk: På Windows 11 kan det i nogle tilfælde være nødvendigt at bruge version 23 eller nyere).
  • Chrome nuværende stabile version eller nyere.
  • npm.

Installation

Installation og opsætning er relativt enkel. Da Google selv har lavet serveren, skal du ikke konfigurere meget for at få det til at virke, og det kræver ikke en separat browserudvidelse (i modsætning til Playright MCP). Du tilføjer typisk en JSON-konfiguration til din MCP-klient:

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

Brug af chrome-devtools-mcp@latest sikrer, at din klient altid bruger den nyeste version af serveren.

Se mere her: https://github.com/ChromeDevTools/chrome-devtools-mcp

Klienter

Chrome DevTools MCP-serveren er kompatibel med en lang række MCP-klienter:

  • Claude Code
  • Cline
  • Codex
  • Copilot / VS Code
  • Cursor
  • Gemini CLI & Gemini Code Assist
  • JetBrains AI Assistant & Junie

Valgfri konfiguration

Du kan specificere argumenter som f.eks. at køre i headless tilstand (uden UI) ved at tilføje argumenter til konfigurationen, f.eks. "--headless=true".

Sikkerhedsovervejelser

Bare til orientering - og uden at have læst dybt i specs eller lignende - så må Chrome DevTools MCP-serveren potentielt udgøre en sikkerhedsrisiko, hvis den ikke bruges korrekt. Den giver vel AI-agenter direkte adgang til alle åbne browser-tabs, DOM-indhold, netværksforespørgsler og cookies. Dette kan potentielt eksponere følsomme data fra andre websteder eller aktive sessions.