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.

Nie zaczynajmy tej dyskusji. Dobrze, dobrze. Nie powiem, że rozumiem, ale szanuję. No więc, zespół od Chroma wypuścił we wrześniu taki artykulik o tym, jak to zesetupować i do czego to można użyć. No a właśnie, do czego to można użyć? No do wszystkich rzeczy. No dobra, może wszystkich. Jeszcze nie wszystkich, ale do wielu różnych elementów, które normalnie mamy dostęp. Subiektywny Frontend. Nawet AI nie będzie wiedzieć. Nawet AI tego nie będzie wiedział. Ale będzie mógł udawać, że rozumie.

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, czyli wszystko. W zasadzie, więc teraz już nie trzeba nawet otwierać Chroma, no bo po co? No, jak wszystko jest, nie? Więc... Ale to jest ciekawe, co powiedziałeś, że nie trzeba otwierać Chroma. Czyli wyobraź sobie, piszesz kod, na bieżąco masz informacje, czy są jakieś błędy, czy się kompiluje, to od razu widzisz, ale jakby czy nie ma runtime błędów jakichś i tak dalej, nie musisz rzeczywiście zmieniać i patrzeć. To jest przeważnie tak, masz na drugiej przeglądarce, na drugim ekranie, ale no to ma potencjał ogromny. No dobra, już nie będę tutaj testował, bo już chciałem wpisać jakie kolory używa, żeby sprawdzić czy te CSSy działają, no ale to ja tutaj was zachęcę, bo temat jest naprawdę super fajny i na przykład mi osobiście w ogóle uciekł.

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

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?

Może dowolną stronę otworzyć, to oczywiście jest tam jakaś instancja Chroma, ale z tym ostrożnie, jeśli wasza firma, wasz projekt mówi, że tego... Nie robić, to tego nie robić. Więc nie wciskajcie czasami na siłę. To na spokojnie, na spokojnie. To co, polecajki? Tak, polecajki. Moją polecajką jest też nowinka z przed dosłownie paru, no teraz to już parunastu dni. Jakiś czas temu polecałem myszkę. Skoro mówimy już o optymalizacjach, tutaj o workflow'u, żeby wszystko szybciej działało, to wyszła ostatnio myszka MX Master 4 od Logitecha.