Opublikowano: 23 września 2025 r.
Uruchamiamy dziś publiczną wersję testową nowego serwera Chrome DevTools Model Context Protocol (MCP) , który udostępnia możliwości Narzędzi deweloperskich w Chrome asystentom kodowania AI.
Agenci kodowania mają zasadniczy problem: nie widzą, co generowany przez nich kod robi po uruchomieniu w przeglądarce. W efekcie programują z zawiązanymi oczami.
Serwer MCP Narzędzi deweloperskich w Chrome to zmienia. Asystenci kodowania AI mogą debugować strony internetowe bezpośrednio w Chrome i korzystać z funkcji debugowania Narzędzi deweloperskich oraz informacji o wydajności. Dzięki temu dokładniej identyfikują i rozwiązują problemy.
Zobacz, jak to działa:
Czym jest Model Context Protocol (MCP)?
Model Context Protocol (MCP) to standard open source służący do łączenia dużych modeli językowych (LLM) z zewnętrznymi narzędziami i źródłami danych. Serwer MCP Narzędzi deweloperskich w Chrome dodaje do agenta AI funkcje debugowania.
Na przykład serwer MCP Narzędzi deweloperskich w Chrome udostępnia narzędzie o nazwie performance_start_trace. Gdy LLM ma zbadać wydajność Twojej witryny, może użyć tego narzędzia, aby uruchomić Chrome, otworzyć Twoją witrynę i użyć Narzędzi deweloperskich w Chrome do zarejestrowania śladu wydajności. LLM może następnie przeanalizować ślad wydajności, aby zaproponować potencjalne ulepszenia. Dzięki protokołowi MCP serwer MCP Narzędzi deweloperskich w Chrome może udostępnić agentowi kodowania nowe funkcje debugowania, aby ułatwić mu tworzenie witryn.
Jeśli chcesz dowiedzieć się więcej o tym, jak działa MCP, zapoznaj się z dokumentacją MCP.
Do czego można go używać?
Oto kilka przykładowych promptów, które możesz wypróbować w wybranym asystencie AI, np. w interfejsie wiersza poleceń Gemini.
Weryfikowanie zmian w kodzie w czasie rzeczywistym
Wygeneruj poprawkę za pomocą agenta AI, a następnie automatycznie sprawdź, czy rozwiązanie działa zgodnie z oczekiwaniami, za pomocą serwera MCP Narzędzi deweloperskich w Chrome.
Prompt do wypróbowania:
Verify in the browser that your change works as expected.
Diagnozowanie błędów sieci i konsoli
Umożliw agentowi analizowanie żądań sieciowych w celu wykrywania problemów z CORS lub sprawdzanie logów konsoli, aby dowiedzieć się, dlaczego dana funkcja nie działa zgodnie z oczekiwaniami.
Prompt do wypróbowania:
A few images on localhost:8080 are not loading. What's happening?
Symulowanie zachowania użytkowników
Nawiguj, wypełniaj formularze i klikaj przyciski, aby odtworzyć błędy i przetestować złożone ścieżki użytkowników – a wszystko to podczas sprawdzania środowiska wykonawczego.
Prompt do wypróbowania:
Why does submitting the form fail after entering an email address?
Debugowanie problemów z układem i stylem na żywo
Poproś agenta AI o połączenie się ze stroną na żywo, sprawdzenie DOM i CSS oraz uzyskanie konkretnych sugestii dotyczących rozwiązywania złożonych problemów z układem, takich jak przepełnienie elementów, na podstawie danych na żywo z przeglądarki.
Prompt do wypróbowania:
The page on localhost:8080 looks strange and off. Check what's happening there.
Automatyzowanie audytów wydajności
Poproś agenta AI o uruchomienie śledzenia wydajności, przeanalizowanie wyników i zbadanie konkretnych problemów z wydajnością, takich jak wysokie wartości LCP.
Prompt do wypróbowania:
Localhost:8080 is loading slowly. Make it load faster.
Listę wszystkich dostępnych narzędzi znajdziesz w dokumentacji narzędzi.
Rozpocznij
Aby to wypróbować, dodaj ten wpis konfiguracji do klienta MCP:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Aby sprawdzić, czy działa, uruchom ten prompt w agencie kodowania:
Please check the LCP of web.dev.
Więcej informacji znajdziesz w dokumentacji MCP Narzędzi deweloperskich w Chrome na GitHubie.
Zaangażuj się
Narzędzia deweloperskie w Chrome MCP tworzymy stopniowo, zaczynając od publicznej wersji testowej, którą udostępniamy dzisiaj. Aktywnie szukamy opinii od Ciebie i społeczności na temat tego, jakie funkcje powinniśmy dodać w następnej kolejności. Niezależnie od tego, czy jesteś deweloperem korzystającym z asystentów kodowania AI, czy dostawcą tworzącym narzędzia do programowania AI nowej generacji, Twoje spostrzeżenia będą nieocenione. Jeśli czegoś brakuje lub coś nie działa, zgłoś problem na GitHubie.