Chrome Dev Tools - steruj swoją przeglądarką

Q: Czym jest tryb slim?

Tryb --slim udostępnia mniejszy zestaw narzędzi. Jest przeznaczony do podstawowych zadań w przeglądarce, takich jak nawigacja, uruchamianie skryptów i robienie zrzutów ekranu.

Opis
Działanie
Instalacja
FAQ

Chrome DevTools MCP – opis serwera

Chrome DevTools MCP to serwer MCP, który pozwala Twojemu asystentowi AI kontrolować i analizować działającą przeglądarkę Chrome. Dzięki temu AI może otwierać strony, klikać elementy, wypełniać formularze, sprawdzać błędy i analizować wydajność strony. Serwer działa jak most między Twoim agentem AI a narzędziami Chrome DevTools. To rozwiązanie jest szczególnie przydatne, gdy chcesz testować stronę, sprawdzać błędy w konsoli, analizować ruch sieciowy lub wykonywać powtarzalne akcje w przeglądarce.

ℹ️ Info: Serwer oficjalnie wspiera Google Chrome oraz Chrome for Testing. Inne przeglądarki oparte na Chromium mogą działać, ale nie jest to gwarantowane.

⚠️ Uwaga: Ten serwer może udostępniać klientowi MCP zawartość przeglądarki. Nie otwieraj w niej poufnych danych, których nie chcesz przekazywać AI.

Najważniejsze możliwości

Analiza wydajności: możesz nagrywać ślady działania strony i otrzymywać praktyczne wskazówki dotyczące szybkości.
Debugowanie przeglądarki: możesz sprawdzać błędy z konsoli, zrzuty ekranu i żądania sieciowe.
Automatyzacja działań: AI może klikać, wpisywać tekst i poruszać się po stronie w Chrome.
Praca z rozszerzeniami: serwer zawiera narzędzia do instalowania, listowania i obsługi rozszerzeń Chrome.
Tryb podstawowy: tryb --slim ogranicza zestaw narzędzi do nawigacji, skryptów i zrzutów ekranu.

Narzędzia dostępne w serwerze

Automatyzacja wprowadzania danych

click: pozwala AI kliknąć wybrany element na stronie.
drag: pozwala AI przeciągnąć element w przeglądarce.
fill: pozwala AI wypełnić pojedyncze pole formularza.
fill_form: pozwala AI wypełnić cały formularz na stronie.
handle_dialog: pozwala AI obsłużyć okno dialogowe w przeglądarce.
hover: pozwala AI najechać kursorem na wskazany element.
press_key: pozwala AI nacisnąć wybrany klawisz.
type_text: pozwala AI wpisać tekst w aktywnym miejscu na stronie.
upload_file: pozwala AI dodać plik przez pole przesyłania plików.
click_at: pozwala AI kliknąć konkretne miejsce na ekranie według współrzędnych.

Nawigacja po stronach

close_page: pozwala AI zamknąć aktualną kartę lub stronę.
list_pages: pozwala AI sprawdzić listę otwartych stron.
navigate_page: pozwala AI przejść pod wskazany adres strony.
new_page: pozwala AI otworzyć nową stronę w Chrome.
select_page: pozwala AI wybrać jedną z otwartych stron.
wait_for: pozwala AI poczekać na konkretny efekt lub element na stronie.

Emulacja widoku

emulate: pozwala AI symulować wybrane warunki działania strony.
resize_page: pozwala AI zmienić rozmiar okna lub widoku strony.

Wydajność strony

performance_start_trace: pozwala AI rozpocząć nagrywanie śladu wydajności strony.
performance_stop_trace: pozwala AI zakończyć nagrywanie śladu wydajności.
performance_analyze_insight: pozwala AI przeanalizować zebrane dane i wskazać problemy wydajnościowe.

Sieć i żądania

list_network_requests: pozwala AI wyświetlić listę żądań sieciowych strony.
get_network_request: pozwala AI sprawdzić szczegóły konkretnego żądania sieciowego.

Debugowanie

evaluate_script: pozwala AI uruchomić skrypt JavaScript w kontekście strony.
get_console_message: pozwala AI pobrać szczegóły konkretnego komunikatu z konsoli.
lighthouse_audit: pozwala AI uruchomić audyt Lighthouse dla strony.
list_console_messages: pozwala AI zobaczyć listę komunikatów z konsoli przeglądarki.
take_screenshot: pozwala AI wykonać zrzut ekranu strony.
take_snapshot: pozwala AI pobrać migawkę struktury strony.
screencast_start: pozwala AI rozpocząć nagrywanie obrazu z przeglądarki.
screencast_stop: pozwala AI zatrzymać nagrywanie obrazu z przeglądarki.

Pamięć

take_memory_snapshot: pozwala AI wykonać migawkę pamięci strony.
get_memory_snapshot_details: pozwala AI sprawdzić szczegóły wykonanej migawki pamięci.
get_nodes_by_class: pozwala AI znaleźć elementy strony według klasy.
load_memory_snapshot: pozwala AI wczytać wcześniej zapisaną migawkę pamięci.

Rozszerzenia Chrome

install_extension: pozwala AI zainstalować rozszerzenie Chrome.
list_extensions: pozwala AI wyświetlić listę dostępnych rozszerzeń.
reload_extension: pozwala AI ponownie załadować rozszerzenie.
trigger_extension_action: pozwala AI uruchomić akcję rozszerzenia.
uninstall_extension: pozwala AI odinstalować rozszerzenie Chrome.

Narzędzia zewnętrzne

list_3p_developer_tools: pozwala AI sprawdzić zewnętrzne narzędzia deweloperskie dostępne na stronie.
execute_3p_developer_tool: pozwala AI uruchomić wybrane zewnętrzne narzędzie deweloperskie.

WebMCP

list_webmcp_tools: pozwala AI wyświetlić narzędzia WebMCP dostępne dla strony.
execute_webmcp_tool: pozwala AI uruchomić wybrane narzędzie WebMCP.

Wymagania

Node.js: wymagana jest wersja 20.19 lub nowsza wersja LTS.
Chrome: wymagana jest aktualna stabilna wersja Chrome lub nowsza.
npm: potrzebujesz npm do uruchomienia pakietu przez npx.

Jak działa Chrome DevTools MCP w praktyce?

Chrome DevTools MCP łączy Twojego asystenta AI z przeglądarką Chrome i narzędziami Chrome DevTools. Przepływ pracy wygląda prosto: Ty → AI → serwer MCP → Chrome. Ty opisujesz, co chcesz sprawdzić lub wykonać. AI przekazuje zadanie do serwera MCP. Serwer MCP steruje Chrome, analizuje stronę i zwraca wyniki do rozmowy z AI.

ℹ️ Info: Samo połączenie z serwerem MCP nie uruchamia Chrome. Przeglądarka startuje dopiero wtedy, gdy AI użyje narzędzia wymagającego działania przeglądarki.

Typowy przebieg działania

Prosisz AI o wykonanie zadania w przeglądarce.
AI wybiera odpowiednie narzędzie serwera MCP.
Serwer MCP otwiera lub kontroluje stronę w Chrome.
Chrome DevTools zbiera dane, na przykład błędy, zrzuty ekranu lub ślady wydajności.
AI podsumowuje wynik i pokazuje Ci, co warto poprawić.

Przykład 1: sprawdzenie wydajności strony

Możesz poprosić AI o sprawdzenie wydajności wybranej strony.

Sprawdź wydajność strony https://developers.chrome.com

Serwer MCP otworzy stronę w Chrome i nagra ślad wydajności. Następnie AI może wskazać problemy, które wpływają na szybkość działania strony.

💡 Wskazówka: To dobry sposób, gdy chcesz szybko znaleźć elementy spowalniające stronę.

Przykład 2: analiza błędów w przeglądarce

Możesz poprosić AI o sprawdzenie komunikatów z konsoli Chrome.

Otwórz moją stronę i sprawdź błędy w konsoli przeglądarki

Serwer MCP pobierze komunikaty z konsoli. AI może potem wyjaśnić, które błędy są ważne i gdzie mogą występować.

Przykład 3: testowanie działań na stronie

Możesz zlecić AI wykonanie prostych akcji w przeglądarce.

Otwórz stronę, wypełnij formularz testowy i zrób zrzut ekranu wyniku

Serwer MCP może kliknąć element, wpisać tekst, wypełnić formularz i zrobić zrzut ekranu. Dzięki temu sprawdzisz działanie strony bez ręcznego powtarzania tych samych kroków.

Praktyczne porady

Opisuj zadanie jasno: podaj adres strony i konkretny cel testu.
Używaj trybu headless, gdy nie potrzebujesz okna Chrome: przeglądarka może działać bez widocznego interfejsu.
Użyj trybu slim do prostych zadań: wtedy dostępne są tylko podstawowe narzędzia.
Nie otwieraj poufnych danych: serwer MCP może udostępnić zawartość przeglądarki klientowi MCP.
Możesz wyłączyć dane CrUX: użyj flagi --no-performance-crux, jeśli nie chcesz wysyłać adresów śladów do Google CrUX API.
Możesz wyłączyć statystyki użycia: użyj flagi --no-usage-statistics przy uruchamianiu serwera.

⚠️ Uwaga: Jeśli używasz zdalnego debugowania Chrome, nie przeglądaj w tej sesji wrażliwych stron.

Podstawowa konfiguracja

Najprostsza konfiguracja uruchamia serwer przez npx.

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

Po dodaniu konfiguracji możesz poprosić AI o pierwsze sprawdzenie strony.

Check the performance of https://developers.chrome.com

Instalacja Chrome DevTools MCP

Chrome DevTools MCP uruchomisz jako lokalny serwer MCP przez npx. Najpierw upewnij się, że masz zainstalowane wymagane narzędzia. Potem dodaj konfigurację serwera do swojego klienta MCP, na przykład Claude, Cursor, Codex, Gemini lub VS Code.

Wymagania przed instalacją

Node.js: potrzebujesz wersji 20.19 lub nowszej wersji LTS.
Chrome: potrzebujesz aktualnej stabilnej wersji Google Chrome lub nowszej.
npm: potrzebujesz go do uruchomienia pakietu przez npx.

ℹ️ Info: Serwer oficjalnie wspiera Google Chrome oraz Chrome for Testing. Inne przeglądarki Chromium mogą działać, ale nie masz gwarancji pełnej zgodności.

Podstawowa konfiguracja MCP

Dodaj poniższą konfigurację do swojego klienta MCP.

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

Użycie chrome-devtools-mcp@latest sprawia, że Twój klient MCP korzysta z najnowszej wersji serwera.

Test po instalacji

Po dodaniu konfiguracji wpisz w swoim kliencie MCP przykładowe polecenie:

Check the performance of https://developers.chrome.com

Twój klient MCP powinien otworzyć Chrome i nagrać ślad wydajności strony.

💡 Wskazówka: Samo połączenie z serwerem nie uruchamia przeglądarki. Chrome startuje dopiero wtedy, gdy AI użyje narzędzia wymagającego działania przeglądarki.

Tryb podstawowy slim

Jeśli potrzebujesz tylko prostych działań w przeglądarce, możesz użyć trybu --slim.

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

Ten tryb udostępnia mniejszy zestaw narzędzi. Obejmuje nawigację, uruchamianie skryptów i zrzuty ekranu.

Instalacja przez CLI w wybranych klientach

Niektóre klienty MCP pozwalają dodać serwer prostą komendą.

Claude Code

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Codex

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Gemini CLI

gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

Qoder CLI

qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Połączenie z już uruchomionym Chrome

Domyślnie serwer może uruchomić nową instancję Chrome z osobnym profilem. Możesz też połączyć go z przeglądarką, która już działa. Użyj tej opcji, gdy chcesz zachować stan aplikacji między ręcznym testowaniem a testowaniem przez AI.

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

⚠️ Uwaga: Zdalne debugowanie Chrome może dawać dostęp do zawartości przeglądarki. Nie używaj wtedy stron z poufnymi danymi.

Przydatne opcje konfiguracji

–headless: uruchamia Chrome bez widocznego okna.
–isolated: tworzy tymczasowy profil Chrome i usuwa go po zamknięciu przeglądarki.
–browser-url: łączy serwer z już działającą instancją Chrome.
–viewport: ustawia początkowy rozmiar widoku strony.
–no-performance-crux: wyłącza wysyłanie adresów śladów wydajności do Google CrUX API.
–no-usage-statistics: wyłącza zbieranie statystyk użycia serwera.

Najprostsza ścieżka startu

Zainstaluj Node.js, Chrome i npm.
Dodaj konfigurację chrome-devtools do klienta MCP.
Uruchom klienta MCP ponownie, jeśli jest to wymagane.
Wpisz testowy prompt sprawdzający wydajność strony.
Sprawdź, czy Chrome otwiera stronę i zwraca raport do AI.

FAQ – Chrome DevTools MCP

Do czego służy Chrome DevTools MCP?

Chrome DevTools MCP pozwala Twojemu asystentowi AI kontrolować i analizować przeglądarkę Chrome. Możesz dzięki temu sprawdzać strony, błędy, wydajność, żądania sieciowe i zrzuty ekranu bez ręcznego klikania wszystkiego.

Czy Chrome uruchamia się od razu po połączeniu z serwerem?

Nie. Samo połączenie z serwerem MCP nie uruchamia przeglądarki. Chrome startuje dopiero wtedy, gdy AI użyje narzędzia, które wymaga działania przeglądarki.

Jakie przeglądarki są oficjalnie wspierane?

Serwer oficjalnie wspiera Google Chrome oraz Chrome for Testing. Inne przeglądarki oparte na Chromium mogą działać, ale dokumentacja nie daje takiej gwarancji.

Czy mogę używać tego serwera do sprawdzania wydajności strony?

Tak. Serwer może nagrywać ślady wydajności i analizować je przez Chrome DevTools. Dzięki temu AI może wskazać problemy, które wpływają na szybkość działania strony.

Czy Chrome DevTools MCP może sprawdzać błędy na stronie?

Tak. Serwer ma narzędzia do odczytywania komunikatów z konsoli przeglądarki. Może też analizować żądania sieciowe, zrzuty ekranu i strukturę strony.

Czy korzystanie z tego serwera jest bezpieczne dla poufnych danych?

Musisz zachować ostrożność. Serwer może udostępniać klientowi MCP zawartość przeglądarki, dane strony i informacje z DevTools. Nie otwieraj w tej sesji stron z poufnymi danymi, których nie chcesz przekazywać AI.

Czy mogę wyłączyć zbieranie statystyk użycia?

Tak. Statystyki użycia są domyślnie włączone. Możesz je wyłączyć flagą --no-usage-statistics albo przez zmienną środowiskową CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS.

Czym jest tryb slim?

Tryb --slim udostępnia mniejszy zestaw narzędzi. Jest przeznaczony do podstawowych zadań w przeglądarce, takich jak nawigacja, uruchamianie skryptów i robienie zrzutów ekranu.

Kompatybilne między innmi z:

SZYBKA INSTALACJA

Code

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

Chrome Dev Tools – steruj i analizuj Google Chrome

Produ