Opublikowano: 10 listopada 2026 r.
W nowej erze tworzenia stron internetowych z wykorzystaniem agentów deweloperzy oczekują, że ich agenci kodujący będą ekspertami w tworzeniu stron internetowych. Najnowsze modele kodowania są dość zaawansowane i zwykle potrafią wygenerować coś, co działa. Jeśli jednak poprosisz eksperta ds. tworzenia stron internetowych o sprawdzenie kodu wygenerowanego przez AI, prawie zawsze znajdzie on sposoby na przyspieszenie, zwiększenie dostępności lub bezpieczeństwa kodu.
Chrome intensywnie inwestuje w przyszłość tworzenia stron internetowych z wykorzystaniem agentów. Aby sprostać temu wyzwaniu, w maju podczas Google I/O wprowadziliśmy wczesną wersję przedpremierową Przewodnika po współczesnych technologiach internetowych. Przewodnik po współczesnych technologiach internetowych to zestaw umiejętności, które pozwalają agentom kodującym korzystać z wiedzy o platformie internetowej, sprawdzonych metod i danych o zgodności z przeglądarkami.
Z przyjemnością ogłaszamy stabilną wersję 1.0 przewodnika po współczesnych technologiach internetowych, która obejmuje:
- Nowy proces modernizacji, który skanuje istniejącą bazę kodu, aby pomóc agentowi znaleźć możliwości bezpiecznej modernizacji.
- Rozszerzona baza danych przewodników, która obejmuje setki zweryfikowanych luk w wiedzy na temat AI i zawiera sprawdzone przez ekspertów rozwiązania dla różnych przeglądarek.
- Bardziej szczegółowa weryfikacja przez ekspertów każdego przewodnika, w tym zatwierdzenie przez liderów technicznych w zakresie treści i specjalna weryfikacja pod kątem ułatwień dostępu w przypadku przewodników dla użytkowników.
- Pełna ocena wszystkich naszych przewodników z publicznym panelem oceny, który pokazuje wymierne ulepszenia w porównaniu z agentami bez Przewodnika po współczesnych technologiach internetowych.
Wraz z wersją 1.0 z przyjemnością informujemy, że Przewodnik po współczesnych technologiach internetowych staje się projektem obejmującym wiele przeglądarek, ponieważ do Chrome dołączają Firefox i Edge, aby wspierać i ulepszać zgodność między przeglądarkami oraz wnosić wkład w projekt. Opierając się na naszej wspólnej pracy nad Baseline, chcemy zapewnić, że każdy, kto koduje z agentem, może w pełni wykorzystać możliwości nowoczesnej platformy internetowej.
Niezależnie od tego, jakich modeli lub uprzęży agenta używasz, jeśli tworzysz aplikacje internetowe, Przewodnik po współczesnych technologiach internetowych powinien być częścią Twoich Agentic Workflows.
Aby zainstalować Przewodnik po współczesnych technologiach internetowych, uruchom to polecenie w katalogu projektu:
npx modern-web-guidance@latest install
Jeśli masz już zainstalowaną wcześniejszą wersję, możesz ją zaktualizować do wersji 1.0, uruchamiając polecenie:
npx modern-web-guidance@latest update
Dodatkowe instrukcje instalacji i więcej informacji znajdziesz w dokumentacji przewodnika po współczesnych technologiach internetowych. Możesz też obejrzeć ten film, aby zapoznać się z krótkim omówieniem:
Dlaczego deweloperzy i firmy powinni korzystać z Przewodnika po współczesnych technologiach internetowych
Nie ulega wątpliwości, że agenty do kodowania pomagają deweloperom pisać kod szybciej niż kiedykolwiek wcześniej. Jednak w świecie, w którym wszyscy korzystają z agentów kodujących, szybkość nie jest już przewagą konkurencyjną.
Obecnie ważniejsze niż kiedykolwiek jest wyróżnianie się na tle konkurencji pod względem podstawowych czynników, takich jak użyteczność i jakość obsługi. Oto kilka sposobów, w jakie może pomóc Przewodnik po współczesnych technologiach internetowych:
Stosuj sprawdzone metody, które modele często pomijają.
Chociaż najnowocześniejsze modele kodowania dobrze znają wiele sprawdzonych metod, nasze oceny pokazują, że wciąż jest wiele ważnych obszarów, w których nie radzą sobie najlepiej, takich jak:
- Ułatwienia dostępu: zaznaczanie klawiaturą i zarządzanie elementami nieaktywnymi, obsługa ograniczonego ruchu i dostępna walidacja formularzy.
- Wrażenia użytkownika: gesty przesuwania i dotykania, przejścia między oknami i okienkami oraz implementacje jasnego i ciemnego motywu.
- Wydajność: planowanie zadań w głównym wątku, izolacja renderowania poza ekranem i zapobieganie przesunięciom układu.
- Bezpieczeństwo: bezpieczne czyszczenie kodu HTML, rygorystyczne zasady bezpieczeństwa treści i zarządzanie danymi logowania za pomocą kluczy dostępu.
Sprawdzone metody dotyczące ułatwień dostępu są szczególnie ważne, ponieważ błędy takie jak nieprawidłowe atrybuty ARIA mogą sprawić, że strona będzie mniej dostępna niż bez atrybutów ARIA. W przypadku wersji 1.0 nasze przewodniki dla użytkowników zostały sprawdzone i przetestowane z użyciem rzeczywistych technologii wspomagających osoby z niepełnosprawnością przez ekspertów ds. ułatwień dostępu, którzy korzystają z nich na co dzień.
Używanie najlepszej funkcji internetowej do danego zadania
Modele AI bardzo dobrze radzą sobie z ustalaniem, jak coś zrobić za pomocą JavaScriptu, ale w wielu przypadkach istnieją funkcje HTML lub CSS, które mogą zrobić to samo przy użyciu znacznie mniejszej ilości kodu. Ponieważ są obsługiwane przez przeglądarkę, zwykle działają lepiej i zapewniają ułatwienia dostępu. Na przykład:
- Funkcje do animowania wyskakujących okienek i okien dialogowych
- Funkcje ulepszające interakcje oparte na przewijaniu i przesuwaniu
- Lepsze interfejsy API zapewniające płynne przejścia między stronami
Nowe funkcje mogą też poprawić działanie witryny w sposób, który ma znaczenie dla użytkowników. Na przykład:
- Klucze dostępu i WebAuthn: szybsze i bezpieczniejsze logowanie.
- Autouzupełnianie: aby usprawnić proces płatności (zwłaszcza na urządzeniach mobilnych), który często kończy się niepowodzeniem, gdy używane są niestandardowe elementy sterujące formularza oparte na języku JavaScript.
Przewodnik po współczesnych technologiach internetowych został zaprojektowany tak, aby polecać najlepsze funkcje do danego zadania na podstawie wymagań dotyczących obsługi przeglądarki. Przewodniki zawierają wbudowane dane o zgodności z Baseline i przeglądarkami, dzięki czemu mogą dostosowywać rekomendacje do potrzeb Twojego projektu.
Skanowanie bazy kodu i znajdowanie możliwości modernizacji
Większość prac nad stronami internetowymi nie odbywa się w nowych projektach. Dzieje się tak w przypadku istniejących baz kodu, w których przez lata nagromadziły się nieaktualne obejścia, niepotrzebne zależności i niepotrzebne już polyfille.
Wersja 1.0 dodaje nowy proces modernizacji, który może analizować istniejący kod HTML, CSS, JavaScript i package.json, aby znaleźć możliwości bezpiecznego uaktualnienia, a następnie przeprowadzić agenta przez zmiany.
/modern-web-guidance Modernize the code in this directory
W tej pierwszej wersji przepływ pracy modernizacji używa analizy statycznej do sprawdzania ograniczonego zestawu wzorców. Zdecydowaliśmy się zacząć od wąskiego zakresu, który daje przewidywalne wyniki, a następnie go rozszerzać. Z czasem planujemy rozszerzyć zakres o wiele innych obszarów, w tym audyty agentowe, w ramach których agent analizuje kod bezpośrednio, a nie tylko dopasowuje znane wzorce.
Bądź na bieżąco z rozwojem platformy internetowej
Platforma internetowa stale się zmienia. Nowe funkcje są wprowadzane w przeglądarkach w każdej wersji, a istniejące funkcje, których wcześniej nie można było używać, stają się częścią Baseline z każdą nową wersją przeglądarki.
Przewodnik po współczesnych technologiach internetowych jest oparty na danych dotyczących zgodności z Baseline, a rekomendacje są opracowywane przez inżynierów przeglądarek, ekspertów ds. standardów internetowych i specjalistów ds. ułatwień dostępu. Rekomendacje te ewoluują wraz z samą platformą, a teraz może to dotyczyć również Twojego projektu.
Poznaj nowe funkcje internetowe i sprawdzone metody
Chociaż Przewodnik po współczesnych technologiach internetowych jest przede wszystkim narzędziem dla agentów, wielu deweloperów twierdzi, że jest on bardzo przydatny sam w sobie jako materiał edukacyjny.
Nawet w erze kodowania opartego na agentach nadal warto rozwijać wiedzę specjalistyczną w danej dziedzinie. Przewodnik po współczesnych technologiach internetowych może Ci w tym pomóc – możesz przeczytać przewodniki lub użyć interfejsu wiersza poleceń, aby wyszukać przypadki użycia i odkryć nowe techniki, które mogą być przydatne w Twoim projekcie.
Łączenie Przewodnika po współczesnych technologiach internetowych z Narzędziami deweloperskimi w Chrome dla agentów
W przypadku tworzenia stron internetowych z wykorzystaniem agentów pisanie kodu to tylko część procesu. Musisz też uruchomić ten kod, aby upewnić się, że działa zgodnie z oczekiwaniami. Dlatego zalecamy deweloperom korzystanie z Przewodnika po współczesnych technologiach internetowych oraz Narzędzi deweloperskich w Chrome dla agentów.
- Przewodnik po współczesnych technologiach internetowych zapewnia agentowi wiedzę potrzebną do pisania kodu zgodnie z nowoczesnymi sprawdzonymi metodami.
- Narzędzia deweloperskie w Chrome dla agentów zapewniają Agent Runtime agenta widoczność, dzięki czemu może on weryfikować, debugować i optymalizować kod w różnych warunkach sieciowych, przy różnych możliwościach urządzeń i preferencjach użytkowników.
Dzięki temu agent może znaleźć lepsze rozwiązanie w mniejszej liczbie tur. Oto kilka przykładów, jak możesz używać tych narzędzi razem, aby zmaksymalizować skuteczność:
Optymalizuj, aż osiągniesz docelową skuteczność.
Przewodnik po współczesnych technologiach internetowych może nauczyć agenta, jak skutecznie dzielić długotrwałe zadania JavaScriptu, które blokują wątek główny, ale nie może przetestować kodu, aby sprawdzić, jak długo te zadania faktycznie blokują wątek główny.
Za pomocą Narzędzi deweloperskich w Chrome dla agentów możesz przeprowadzić śledzenie wydajności na symulowanym procesorze o niskiej wydajności, aby sprawdzić, czy występuje problem. Następnie możesz skorzystać z porad dotyczących wydajności z Przewodnika po współczesnych technologiach internetowych, aby iterować, aż kod nie będzie blokować głównego wątku na dłużej niż 50 milisekund (dzięki czemu nie będzie przyczyniać się do niskiego INP).
Testowanie i ulepszanie animacji
Przewodnik po współczesnych technologiach internetowych może pokazać agentowi, jak prawidłowo i wydajnie animować funkcje takie jak okna modalne, etykietki i menu wyskakujące, ale nawet z tymi wskazówkami musisz sprawdzić, czy animacje rzeczywiście działają i wyglądają dobrze w kontekście całej aplikacji.
Narzędzia deweloperskie w Chrome dla agentów mogą uruchamiać kod, wchodzić w interakcje ze stroną i nagrywać ekran animacji w trakcie działania. Następnie może przeanalizować nagranie, aby upewnić się, że animacja działa i pasuje do stylu oraz wyglądu reszty witryny.
Możesz też użyć Narzędzi deweloperskich w Chrome dla agentów, aby sprawdzić, czy po ustawieniu prefers-reduced-motion komponent uwzględnia preferencje użytkownika.
Widoki pamięci podręcznej bez wycieków pamięci
Przewodnik po współczesnych technologiach internetowych może nauczyć agenta, jak sprawić, aby przejścia w aplikacjach SPA były natychmiastowe, dzięki renderowaniu i buforowaniu widoków w pamięci, a także odpowiedniemu ukrywaniu ich w drzewie ułatwień dostępu.
Ważne jest jednak, aby prawidłowo usuwać nieużywane widoki, aby nie dopuścić do wycieku pamięci, jeśli użytkownik pozostanie na stronie przez dłuższy czas. Narzędzia deweloperskie w Chrome dla agentów zawierają narzędzia do debugowania pamięci, dzięki którym agent może upewnić się, że wykorzystanie pamięci nie rośnie bez ograniczeń.
Aby dowiedzieć się więcej o tym, jak korzystać z Przewodnika po współczesnych technologiach internetowych i Narzędzi deweloperskich w Chrome dla agentów, obejrzyj ten film:
Historie sukcesu
Zespoły inżynierów na całym świecie korzystają już z Przewodnika po współczesnych technologiach internetowych i Narzędzi deweloperskich w Chrome dla agentów, aby poprawić jakość kodu, przyspieszyć dostarczanie i wyeliminować wąskie gardła związane z ręcznym debugowaniem:
Pensionbazaar i Policybazaar
Pensionbazaar, nowa platforma do planowania emerytury uruchomiona przez indyjską firmę Paisabazaar z branży fintech, połączyła Przewodnik po współczesnych technologiach internetowych z Narzędziami deweloperskimi w Chrome dla agentów, aby tworzyć i weryfikować nowe strony. Pozwoliło to skrócić czas realizacji o ponad 90% (z około 4 dni do kilku godzin) i zmniejszyć liczbę błędów interfejsu na nowych ekranach o ponad 90%. Siostrzana platforma Policybazaar, jedna z najpopularniejszych platform ubezpieczeniowych w Indiach, która ma ponad 97 milionów zarejestrowanych klientów, użyła Narzędzi deweloperskich w Chrome dla agentów do zautomatyzowania kontroli wydajności na około 30 stronach docelowych o dużym natężeniu ruchu, co pozwoliło skrócić czas ręcznej kontroli o 92%:
„W przypadku Pensionbazaar naszym priorytetem od samego początku było tworzenie wysokiej jakości kodu, aby uniknąć długu technicznego w przyszłości. Przewodnik po współczesnych technologiach internetowych pomógł naszemu agentowi kodującemu przyjąć nowoczesne standardy internetowe i sprawdzone metody dotyczące wydajności, jednocześnie uwzględniając nasze konkretne cele związane ze zgodnością z przeglądarkami. Dzięki temu inspekcje kodu frontendu stały się znacznie łatwiejsze i szybsze, co ostatecznie skróciło czas tworzenia oprogramowania”.
– Aman Soni, Engineering Manager, Policybazaar
WeTV
WeTV, międzynarodowa platforma do strumieniowego przesyłania filmów firmy Tencent, dodała do swojego potoku CI/CD agenta kodowania AI, który używa Narzędzi deweloperskich w Chrome dla agentów do diagnozowania spadków wydajności oraz Przewodnika po współczesnych technologiach internetowych do ich naprawiania za pomocą nowoczesnych funkcji platformy internetowej. Agent automatycznie diagnozuje i rozwiązuje 90% nieudanych testów wydajności, co skraca czas debugowania i rozwiązywania problemów o 87% (z 4 godzin do 30 minut, w tym ręczną ocenę):
„Wyniki są bardzo dobre zarówno pod względem szybkości, jak i jakości. Statystyki diagnostyczne dostarczane przez Narzędzia deweloperskie w Chrome dla agentów i Przewodnik po współczesnych technologiach internetowych dostarczyły nam wiarygodnych informacji, które pomogły nam rozwiązać złożone problemy z układem. Po każdej poprawce przeprowadzamy rygorystyczną weryfikację, a obecny wskaźnik sukcesu i stabilność znacznie zwiększyły nasze zaufanie do wersji”.
– Yangjie Zheng, dyrektor ds. inżynierii, WeTV (Tencent)
note inc.
note inc., jedna z największych japońskich platform dla twórców i mediów, która ma ponad 90 milionów aktywnych użytkowników miesięcznie, wykorzystała Przewodnik po współczesnych technologiach internetowych wraz z własnym systemem projektowania w ramach trwających prac nad modernizacją interfejsu Next.js. W ramach 180 testów produkcyjnej bazy kodu Przewodnik po współczesnych technologiach internetowych zwiększył odsetek pozytywnych wyników testów nowoczesnych technologii internetowych z 61% do 94%, kierując agentów do korzystania z natywnych funkcji HTML i CSS zamiast niestandardowego kodu JavaScript w przypadku animacji przewijania, etykietek i akordeonów. Zwiększyło też prawidłowe priorytetyzowanie obrazów LCP o 28% w 431 scalonych PR:
„Naszą misją w note jest zachęcanie do tworzenia i kontynuowania tej działalności, dlatego nasza platforma musi być szybka i dostępna dla każdego twórcy i czytelnika. Ponieważ coraz więcej kodu jest pisane przez agentów kodowania AI, Przewodnik po współczesnych technologiach internetowych pomaga im sięgać po nowoczesne, oparte na standardach rozwiązania, zamiast polegać na starszych wzorcach JavaScriptu. Wskazuje też szczegóły, które łatwo przeoczyć, takie jak priorytet wczytywania obrazu i dostępność formularza. W połączeniu z naszym systemem projektowania pozwala nam to stale ulepszać aplikację, zachowując spójność interfejsu”.
Takehiko Itabashi, wiceprezes ds. technologii, note inc.
MetaMask
MetaMask, samodzielna platforma finansowa z ponad 100 milionami pobrań w około 190 krajach, uruchamia Przewodnik po współczesnych technologiach internetowych jako automatycznego bota do sprawdzania automatycznego przy każdym żądaniu pull do rozszerzenia przeglądarki typu open source, skonfigurowanego za pomocą zaledwie 3-wierszowego prompta. W ciągu pierwszych 5 tygodni bot sprawdził około 480 żądań pull i skomentował 64 z nich, co doprowadziło do naprawienia przez inżynierów 43 problemów (głównie związanych z dostępnością, semantyką HTML i formularzami, których nie wykrywają lintery). Mediana czasu od komentarza do naprawy wyniosła 15 minut:
„Opinie są bardzo pomocne. Pomogły nam one zapoznać naszych inżynierów z nowoczesnymi interfejsami API, takimi jak wywołania zainteresowań i interfejs Popover API. Nie wydłużyło to czasu sprawdzania PR, a być może nawet go skróciło. Problemy wykryte przez MWG wymagałyby w przeciwnym razie interwencji weryfikatora znającego te nowoczesne techniki internetowe”.
– Francis Nepomuceno, inżynier UX, MetaMask
Ekosystem i pomoc od społeczności
Przewodnik po współczesnych technologiach internetowych powstał jako inicjatywa w ramach Chrome, ale osiągnięcie wersji 1.0 było możliwe dzięki współpracy z wieloma ekspertami ze społeczności internetowej.
Dziękujemy liderom technicznym obszarów treści, którzy nadzorują każdy obszar platformy internetowej, naszym partnerom ds. przeglądarek w firmach Firefox i Edge, niezależnym ekspertom ds. standardów internetowych i ułatwień dostępu, którzy opracowali i przetestowali przewodniki, oraz wszystkim twórcom oprogramowania open source na GitHubie, którzy pomogli w przygotowaniu tej wersji.
Jeśli zauważysz, że agenci kodujący nie wiedzą czegoś o internecie, lub chcesz pomóc w ulepszeniu istniejącego przewodnika, zapoznaj się z przewodnikiem dla współtwórców.
Pierwsze kroki z Przewodnikiem po współczesnych technologiach internetowych
Aby dodać Przewodnik po współczesnych technologiach internetowych do projektu, uruchom instalator interfejsu wiersza poleceń z katalogu projektu:
npx modern-web-guidance@latest install
Jeśli masz już zainstalowaną wcześniejszą wersję, możesz ją zaktualizować do wersji 1.0, uruchamiając polecenie:
npx modern-web-guidance@latest update
Oprócz interfejsu wiersza poleceń możesz zainstalować i zaktualizować Przewodnik po współczesnych technologiach internetowych bezpośrednio na najpopularniejszych platformach z wtyczkami agentów kodowania, takich jak Claude Code, Codex, Cursor, Antigravity, Copilot, WebStorm, Kimi Code i Grok Build.
Więcej informacji znajdziesz w tych materiałach: