chrome_dev_tools MCP

Chrome Dev Tools – steruj i analizuj Google Chrome

Otwarte i darmowe

Add to Cart

Wtyczka MCP Chrome DevTools to narzędzie, które pozwala Twojemu asystentowi AI bezpośrednio sterować i analizować to, co dzieje się w przeglądarce Google Chrome. Dzięki temu rozszerzeniu sztuczna inteligencja zyskuje “oczy i ręce” w internecie. Nie musisz już ręcznie przeklikiwać stron ani robić zrzutów ekranu, gdy prosisz AI o pomoc. Asystent sam wejdzie na podaną stronę, sprawdzi jej szybkość, pobierze niezbędne dane, kliknie w przyciski, a nawet przetestuje działanie formularzy. To idealne rozwiązanie do automatyzacji nudnych zadań w przeglądarce.

Dostępne narzędzia (funkcje)

Ta wtyczka MCP oferuje bogaty zestaw możliwości, podzielony na kilka głównych kategorii:
  • Narzędzia nawigacji (6 funkcji): AI może otwierać nowe karty, ładować konkretne strony, zamykać je oraz czekać, aż element na stronie w pełni się załaduje (funkcje m.in. navigate_page, new_page, close_page).
  • Narzędzia klikania i wpisywania (9 funkcji): Asystent potrafi symulować zachowanie człowieka – klika w przyciski, wpisuje tekst, najeżdża kursorem na elementy, przeciąga je i wysyła pliki (funkcje m.in. click, type_text, fill_form, hover).
  • Narzędzia diagnostyczne i wizualne (6 funkcji): Pozwalają na zrobienie zrzutu ekranu z przeglądarki, czytanie błędów ze strony oraz przeprowadzanie zaawansowanych audytów, np. jakości SEO (funkcje m.in. take_screenshot, lighthouse_audit, get_console_message).
  • Narzędzia wydajności (4 funkcje): Asystent sprawdza, jak szybko ładuje się Twoja strona i co ją spowalnia (funkcje m.in. performance_analyze_insight, performance_start_trace).
  • Narzędzia sieciowe (2 funkcje): AI może podglądać, jakie dane strona pobiera z internetu w tle (funkcje m.in. list_network_requests).
  • Narzędzia symulacji (2 funkcje): Pozwalają na zmianę rozmiaru okna, by asystent mógł sprawdzić, jak strona wygląda np. na telefonie komórkowym (funkcje m.in. resize_page, emulate).
ℹ️ Info: Ta wtyczka nie posiada predefiniowanych szablonów zapytań (promptów) ani dodatkowych statycznych zasobów (resources). Opiera się w 100% na aktywnym sterowaniu przeglądarką.

Jak to działa w praktyce?

Zasada działania tej wtyczki MCP opiera się na prostym mechanizmie przekazywania poleceń:
  1. Ty prosisz asystenta AI o wykonanie zadania (np. “Wejdź na stronę mojego sklepu i sprawdź jej wydajność”).
  2. Asystent AI komunikuje się z serwerem MCP.
  3. Serwer MCP otwiera przeglądarkę Chrome na Twoim komputerze i wykonuje zlecone akcje (klika, przewija, zbiera dane).
  4. AI analizuje pobrane informacje i podaje Ci gotową, zrozumiałą odpowiedź.

Praktyczne przykłady użycia:

  • Szybki audyt strony: Możesz poprosić: “Wykonaj zrzut ekranu strony głównej wp.pl i powiedz mi, jakie widzisz tam główne nagłówki”. AI otworzy stronę, zrobi zdjęcie i je zinterpretuje.
  • Analiza problemów technicznych: Jeśli Twój e-sklep działa wolno, powiedz asystentowi: “Sprawdź wydajność mojej strony example.com”. AI wygeneruje raport o tym, co spowalnia ładowanie (np. zbyt duże zdjęcia).
  • Automatyzacja wprowadzania danych: Możesz zlecić AI przetestowanie formularza kontaktowego, aby upewnić się, że wiadomości poprawnie się wysyłają.
⚠️ Uwaga: Ponieważ wtyczka steruje przeglądarką na Twoim komputerze, unikaj używania jej do wchodzenia na strony z bardzo wrażliwymi danymi (np. bankowość online), których nie chcesz udostępniać sztucznej inteligencji.

Jak zainstalować serwer MCP Chrome DevTools?

Aby uruchomić tę wtyczkę lokalnie, musisz mieć zainstalowaną na komputerze przeglądarkę Google Chrome oraz darmowe środowisko Node.js (wersja 20.19 lub nowsza). Jeśli serwer dostępny jest jako kod JSON i modyfikacja plików, w pierwszej kolejności opisujemy instalację w Claude Desktop oraz innych programach.

Opcja 1: Instalacja w Claude Desktop

Jest to klasyczna metoda dla zaawansowanych programów, polegająca na ręcznej edycji pliku z ustawieniami.
  1. Otwórz plik ustawień programu na swoim komputerze. Nazywa się on claude_desktop_config.json. Edytujesz ten plik na swoim komputerze.
  2. W pliku musisz ręcznie zdefiniować komendę uruchamiającą serwer. Wklej w nim następujący kod: 
    {
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
  3. Zapisz plik i uruchom ponownie aplikację Claude Desktop.

Opcja 2: Instalacja w Alice (Aplikacja na Mac/Windows)

To metoda instalacji w przypadku serwerów dostępnych w otwartej bazie pakietów NPM. Wymaga odrobiny pracy z okienkiem poleceń, ale daje pełną kontrolę.
  1. Otwórz terminal (lub Wiersz polecenia na Windows) na swoim komputerze. Wpisz w terminalu polecenie which npx (na systemach macOS/Linux) lub where npx (na systemach Windows).
  2. Otrzymasz pełną ścieżkę do programu instalacyjnego, na przykład /opt/homebrew/bin/npx. Skopiuj ją.
  3. Wejdź w ustawienia aplikacji Alice, wybierz sekcję MCP Servers i kliknij Add New.
  4. Wklej dokładnie tę pełną ścieżkę w polu Command.
  5. W polu Args (Argumenty) powiedz Alice, co ma uruchomić za pomocą powyższej komendy. Zazwyczaj wpisujesz tu -y oraz nazwę pakietu serwera. Wpisz w kolejne pola argumentów:
    • Arg 1: -y
    • Arg 2: chrome-devtools-mcp@latest
  6. Zapisz ustawienia i rozpocznij rozmowę z Alice!

Rozwiązywanie problemów

  • Przeglądarka się nie otwiera: Upewnij się, że masz zainstalowaną na dysku przeglądarkę Google Chrome. Serwer MCP szuka jej na Twoim komputerze.
  • Błąd “npx is not recognized”: Oznacza to, że nie posiadasz na komputerze zainstalowanego programu Node.js. Pobierz go ze strony głównej projektu i zainstaluj, a następnie zrestartuj komputer.

Najczęściej zadawane pytania (FAQ)

Czy muszę znać się na programowaniu, by tego używać?

Nie. Programowanie ogranicza się wyłącznie do pierwszego, jednorazowego wklejenia ustawień konfiguracyjnych w Twojej aplikacji (np. Claude czy Alice). Później po prostu prosisz AI zwykłymi słowami o wykonanie zadania w internecie.

Czy asystent zobaczy moje prywatne dane w Google Chrome?

Domyślnie wtyczka otwiera osobną, “czystą” instancję przeglądarki Chrome, specjalnie na potrzeby pracy AI. Asystent nie ma dostępu do Twojej głównej historii, zakładek czy zapisanych haseł, chyba że celowo mu na to pozwolisz lub zalogujesz się w otwartym przez niego oknie.

Co oznacza użycie trybu “headless”?

Tryb “headless” oznacza, że asystent będzie korzystał z przeglądarki całkowicie w tle. Na Twoim ekranie nie otworzy się fizyczne okno Chrome, co pozwala pracować bez irytującego przeskakiwania okienek, podczas gdy asystent wciąż wykonuje swoje zlecenia.

Czy to rozwiązanie jest darmowe?

Tak. Sama wtyczka MCP Chrome DevTools jest bezpłatna i stanowi projekt otwarty (open-source). Musisz jednak posiadać aktywny dostęp do asystenta AI, z którym ją integrujesz (np. abonament Claude Pro lub dostęp przez API).

SZYBKA INSTALACJA

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