Chrome DevTools MCP server

W dzisiejszym odcinku porozmawiamy o brakującym ogniwie vibecodingu, czyli najnowszym MCP DevToolsów od Chroma. Nazywam się Jakub Pawlak. Ja jestem Aleksander Lubych. A to Subiektywny Frontend. Ten odcinek możecie posłuchać na Spotify albo na Apple Podcast. Zaczynając. Chrome we wrześniu wypuścił super fajną rzecz, która przeszła moim zdaniem totalnie bez echa, czyli MCP do DevTools. Możecie teraz podpiąć swój ulubiony AI do tego, żeby kontrolała waszego Chroma. A co to znaczy? No to znaczy super fajne rzeczy, bo możecie z LLM-a Mieć dostęp do całego Chroma, czyli do logów, do networku, do performance'u.

Właśnie, będzie mógł sprawdzić. Poza tym mamy dostęp do konsoli, mamy dostęp do networku. Możemy w ogóle zapytać o Web Core Vitals. Możemy zapytać o performance naszej strony. On nawet może zrobić już performance analizę z optymalizacją. Ty możesz tylko powiedzieć, że twoja aplikacja jest jakaś wolna, weź mi to napraw. Wow. Idziesz po kawę, a tam wiesz, już po prostu... Czyli on ci zrobi ten test run dla performance'u, a potem ci wskaże miejsca w kodzie w twojej aplikacji, które powinieneś, a nawet więcej, nie że wskaże, on ci je poprawi od razu. No właśnie. To jest super rzecz. Oczywiście ja do tego podchodzę tak lekko, może nie sceptycznie, ale niech udziana Józia, bo jak ze wszystkimi AI ogłoszeniami, MCP i w ogóle już jesteśmy bezużyteczni, już w ogóle nic nie musisz robić, a później jak jest, każdy widzi.

Oczywiście tutaj mamy też, zapinamy się do debugera, czyli możemy też breakpointów używać, możemy sobie sprawdzać jakieś tam stan aplikacji, zmienne, wszystko fajne. Tylko, że to nie jest kompatybilne z naszym Compilotem, czy jakimkolwiek innym narzędziem. Po prostu nie ma do tego procesu dostępu. No i ten MCP odpowiada na właśnie tą potrzebę. No i dobra, jak to MCP skonfigurować? Konfiguracja jest superprosta. Czyli nie jest prosta. Nie, jest, jest, jest, jest. Jest prosta, naprawdę. Wchodzimy sobie, możemy wejść tutaj w artykulik i tutaj jest nawet get started to try this out. Dodajesz config entry do swojego MCP klienta.

No i dobra, okej, spoko. Czyli wchodzimy w ustawienia, w preferences w JetBrainsie. I pod githubem, pod toolsami będzie coś takiego jak Model Context Protocols, czyli nasze MCP. Wystarczy kliknąć Configure i naszym oczom ukaże się po prostu plik konfiguracyjny z JSON-em, gdzie należy wkleić Chrome DevTools. Koniec. Czy tutaj mówimy o tym, do jakiego serwera on ma dostęp? Tak, tak, tak. Tutaj mamy tą konfigurację dla naszego MCP i w ten sposób Chrome DevTools MCP latest, on będzie sobie korzystał zawsze z tego latest, latest wersji.

No dobra. No to w takim razie sprawdźmy, czy to działa. Możemy w takim razie, skoro mamy już na local hostie odpalonym, tutaj ważna informacja, jeśli chcecie korzystać z MCP, to wchodzicie w tryb agenta, nie w tryb ask, bo wtedy on nie ma dostępu do tych rzeczy. I w trybie agenta co? Możemy zapytać, jakie warningi są na naszej stronie, bo mamy tutaj taki prosty warning, console.warn app.component.constructor.code. Oczywiście zapytamy po polsku. W Polsce jesteśmy. Dokładnie. Dobra. Spróbujmy, czy działa. Tu tu tu tu. I teraz musimy pozwolić na parę rzeczy. Okej. I powiedział, aktualnie w aplikacji uruchomionej na localhost nie pojawiły się żadne logi w konsoli przeglądarki.

Otwórz www.paintit.pl i sprawdź. Jakie mamy Web Core Vitals? Pozwalamy, pozwalamy. Czuję, że to będzie dobre. No i patrz. LCP, CLS, time to first byte, dodatkowe spostrzeżenia nie wykryto. Prawdziwych użytkowników wskazówki optymalizacyjne dotyczą render blocking resources. No więc to otwiera naprawdę super fajne możliwości. Kurczę, dobrze to wygląda, powiem ci. Bardzo mi się podoba. Szczególnie z tymi waitlacami, bo to często chcesz sobie coś sprawdzić albo sprawdzić ilość plików.

Z radaru. Ja też o tym nie słyszałem. Nigdzie mi to nie mignęło, bo to, że AI w Chromie coraz bardziej jest, to nie wiem czy wiesz, ale na pewno zauważyłeś, bo oni po prostu ci to wrzucają wszędzie. Znaczy widziałem nową zakładkę, tak? No właśnie, właśnie. Jak sobie odpalisz Chrome DevTools'y, to on ci cały czas podpowiada jakiś tam ten, a tu AI jakiś tam, wiesz, what's new? I tu jakiś AI Assistant, nie? Jakby on ci cały czas tam wrzuca, ale ten MCP gdzieś przeszedł, no bo nie jest częścią Chroma tak bezpośrednio. Ale swoją drogą, nie wiem, czy też używałeś tego AI Assistanta, że to też jest ciekawa rzecz, nie? Że możesz sobie z poziomu konsoli, czy z poziomu gdzieś tam jakichś rzeczy DevTools'owych

Zrozumieć błąd. I on Ci teraz wylistuje wytłumaczenie tego błędu. Już nawet nie musisz tego w Google wrzucać. Temat jest naprawdę bardzo ciekawy. Cieszmy się póki możemy. No właśnie. Zaraz będziemy na to trochę psioczyć. Ale no zobacz, jakby dał ci, ciach, całe wytłumaczenie, jakby niepotrzebny był do tego MCP, bo normalnie w Chromie wystarczyło się zalogować do swojego konta Google'a i on przez Gemini przetrawił ten problem, sprawdził co tam jest, sprawdził mi content i powiedział, no dobra, weź usuwaj to, bo to nie ma sensu ten console.worn, nie? I to tu już masz. Więc MCP super fajna rzecz.

To też może się przydać. Więc jeśli też z tego nie korzystaliście, to też zachęcam. Fajna, fajna sprawa. Jakubie, dziękuję serdecznie za pokazanie tego. Ja też o tym nie wiedziałem. Wiem, że się dowiedziałeś niedawno o tym. No problemo. Tak, i tutaj z tego miejsca myślę, że trzeba pozdrowić Michała bardzo serdecznie z BCA, z którym w zasadzie, no dosłownie dzisiaj o tym rozmawialiśmy, że wow, wow, wow, ale super fajna rzecz, więc na szybko research, na szybko sprawdzanie, co to może, więc to jest dopiero początek zabawy z MCP, no ale tutaj też bądźcie ostrożni, no bo MCP to dalej jest jakby, no AI, dajemy mu dostęp do serwerów, nie? Tak. Więc jeśli wpadniecie na pomysł, żeby, no dobra, no ale ja mam tutaj jakiegoś czata w przeglądarce i to może w takim razie wystawię instancję z Chroma publicznie do networku i żeby on mi to tam pytał, to ostrożnie, ostrożnie z takimi rzeczami, no bo dalej MCP, on może otworzyć stronę, nie?