Opublikowano: 23 września 2025 r.
Uruchamiamy dziś publiczną wersję podglądową nowego serwera protokołu kontekstu modelu narzędzi deweloperskich w Chrome (MCP), który udostępnia funkcje narzędzi deweloperskich w Chrome asystentom AI do kodowania.
Agenci kodowania mają zasadniczy problem: nie widzą, co generowany przez nich kod robi w przeglądarce. To tak, jakby programować z zasłoniętymi oczami.
Serwer MCP Narzędzi deweloperskich w Chrome to zmienia. Asystenci kodowania AI mogą debugować strony internetowe bezpośrednio w Chrome i korzystać z możliwości debugowania w Narzędziach deweloperskich oraz statystyk wydajności. Zwiększa to dokładność wykrywania i rozwiązywania problemów.
Sprawdź, jak to działa:
Co to jest protokół kontekstu modelu (MCP)?
Protokół kontekstu modelu (Model Context Protocol, MCP) to standard open source 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 model LLM ma zbadać wydajność Twojej witryny, może użyć tego narzędzia, aby uruchomić Chrome, otworzyć witrynę i użyć Narzędzi dla programistów w Chrome do zarejestrowania śladu wydajności. Model LLM może następnie przeanalizować ślad wydajności, aby zaproponować potencjalne ulepszenia. Serwer MCP w Narzędziach deweloperskich w Chrome może za pomocą protokołu MCP udostępniać nowe funkcje debugowania agentowi kodowania, aby ułatwić mu tworzenie stron internetowych.
Więcej informacji o działaniu MCP znajdziesz w dokumentacji MCP.
Do czego możesz go używać?
Poniżej znajdziesz 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, korzystając z Narzędzi deweloperskich w Chrome MCP.
Prompt do wypróbowania:
Verify in the browser that your change works as expected.
Diagnozowanie błędów sieci i konsoli
Umożliwiaj 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 zachowań użytkowników
Poruszaj się po stronie, wypełniaj formularze i klikaj przyciski, aby odtworzyć błędy i przetestować złożone ścieżki użytkownika – 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 ze stylami i układem na żywo
Poproś agenta AI o połączenie się z aktywną stroną, sprawdzenie DOM i CSS oraz uzyskanie konkretnych sugestii dotyczących rozwiązywania złożonych problemów z układem, takich jak elementy, które nie mieszczą się w kontenerze, 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.
Automatyzacja kontroli skuteczności
Poproś agenta AI o przeprowadzenie ś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 do klienta MCP ten wpis konfiguracji:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Aby sprawdzić, czy działa, uruchom w agencie do kodowania ten prompt:
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. Zaczynamy od wersji publicznej, którą udostępniamy dzisiaj. Aktywnie zbieramy opinie 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 rozwoju AI nowej generacji, Twoje spostrzeżenia będą nieocenione. Jeśli czegoś brakuje lub coś nie działa, zgłoś problem w GitHubie.