Zestaw narzędzi dla deweloperów, dzięki któremu Twoja witryna będzie gotowa do obsługi agentów

Kasper Kulikowski

Michael Hablich

Data publikacji: 22 czerwca 2026 r.

W miarę jak agenci AI będą ewoluować od generowania tekstu do przeglądania, interakcji i wykonywania złożonych zadań w Twojej witrynie, deweloperzy będą potrzebować specjalnych narzędzi, aby zapewnić wysoką jakość obsługi tym niebędącym ludźmi użytkownikom. Nowa kategoria Lighthouse – przeglądanie przez agenta – w połączeniu z ulepszeniami Narzędzi deweloperskich w Chrome zapewnia deterministyczne audyty i platformę testową, które pomagają tworzyć witryny gotowe do obsługi agentów.

Przejście na sieć opartą na agentach obejmuje 2 główne etapy: wyszukiwanie informacji w internecie przez agentów i korzystanie z internetu przez agentów.

Gdy agenci tylko wyszukują witryny, zasady optymalizacji pod kątem wyszukiwarek (SEO) nadal obowiązują. W tym poście na blogu skupimy się na działaniach, które programiści mogą podjąć, gdy agent wchodzi w bezpośrednią interakcję z witryną.

Sprawdzanie, ulepszanie i debugowanie witryny gotowej do obsługi agentów

Aby agent AI mógł niezawodnie wykonać w Twojej witrynie określony proces, np. umówić się na spotkanie lub złożyć zamówienie, potrzebuje przewidywalnych sygnałów, które może odczytać. Oto narzędzia, które pomogą Ci ocenić i zwiększyć gotowość.

Sprawdź, czy Twoja witryna jest gotowa na działanie agentów

Nowa kategoria przeglądania przez agenta w Lighthouse jest dostępna od wersji M150 i zapewnia deweloperom zestaw deterministycznych audytów, które pozwalają ocenić, jak przyjazne dla agentów są ich witryny, co zachęca do przyjęcia nowych standardów branżowych.

• Co sprawdzają audyty: audyty koncentrują się na 3 kluczowych obszarach, które mają kluczowe znaczenie dla interakcji z maszyną:

  • Ułatwienia dostępu: ułatwienia dostępu są przeznaczone przede wszystkim dla ludzi. Agenci korzystają z drzewa dostępności, które jest tworzone na podstawie DOM na potrzeby technologii wspomagających osoby z niepełnosprawnością, jako głównego modelu danych. Audyt przeglądania przez agenta weryfikuje podzbiór kategorii z audytu dostępności, które mają kluczowe znaczenie dla interakcji z maszyną. Na przykład oba audyty sprawdzają, czy każdy element interaktywny ma nazwę programową. Prawidłowe drzewo ułatwień dostępu to podstawowy sposób, w jaki agenci AI rozumieją Twoją stronę.
  • Stabilność: mierzy stabilność wizualną za pomocą skumulowanego przesunięcia układu (CLS), aby zapewnić, że elementy nie przesuwają się nieoczekiwanie, co zapobiega przypadkowym kliknięciom przez agenta.
  • Integracja WebMCP: sprawdza dostępność zarejestrowanych narzędzi WebMCP, formularze, w których brakuje deklaratywnego WebMCP, oraz poprawność schematu. Wdrożenie WebMCP pomaga agentom w jawny sposób udostępniać logikę i formularze witryny, co zwiększa niezawodność interakcji.

• Wynik: w odróżnieniu od innych kategorii Lighthouse w momencie publikacji kategoria Agentic Browsing ma charakter informacyjny i nie jest porównywana z innymi. Skupiamy się na dostarczaniu sygnałów, na podstawie których można podjąć działania (stan powodzenia lub niepowodzenia oraz ostrzeżenia), a nie na ostatecznym rankingu.

Więcej informacji o konkretnych kontrolach i sposobach poprawy wyników znajdziesz w dokumentacji kontroli przeglądania przez agenta w Lighthouse.

Przyspieszenie i zwiększenie niezawodności interakcji między agentem a witryną

WebMCP to proponowany standard, który ma na celu udostępnianie narzędzi strukturalnych agentom AI w istniejących witrynach, co przyspiesza i upraszcza interakcje z agentami. Więcej informacji o wdrażaniu znajdziesz w artykule o WebMCP.

Wdrażaj najnowsze funkcje za pomocą wybranego agenta do kodowania

Przewodnik po nowoczesnych stronach internetowych zawiera zbiór sprawdzonych metod i umiejętności, które pomagają programistom tworzyć witryny gotowe do obsługi przez agentów. Zawiera webmcpumiejętność, która umożliwia przekazanie wdrożenia narzędzi WebMCP agentowi kodującemu. Dzięki zintegrowaniu Przewodnika po współczesnych technologiach internetowych z procesem tworzenia aplikacji możesz mieć pewność, że jest ona od podstaw budowana zgodnie z nowoczesnymi standardami przyjaznymi dla agentów. Więcej informacji znajdziesz w dokumentacji Przewodnik po współczesnych technologiach internetowych.

Testowanie i debugowanie witryny za pomocą Narzędzi deweloperskich w Chrome dla agentów

Do szczegółowego debugowania i iteracyjnego tworzenia Narzędzia deweloperskie w Chrome dla agentów oferują unikalną postać testową. Umożliwia przekształcenie środowiska IDE lub agenta kodowania opartego na AI w agenta przeglądania, co daje Ci dużą kontrolę.

Narzędzia deweloperskie dla agentów umożliwiają:

• Symulowanie interakcji z agentem: możesz symulować dokładne kroki, jakie wykonałby agent, skutecznie „stając się użytkownikiem” (lub agentem), aby odtworzyć błędy i sprawdzić, czy procesy w Twojej witrynie są deterministyczne.
• Bezpośrednie wywołanie Lighthouse: środowisko testowe może bezpośrednio wywołać narzędzie lighthouse_audit na aktywnej karcie. Zapewnia to natychmiastowe sprawdzenie stanu strony w wielu kategoriach na podstawie jej bieżącego stanu, co pozwala weryfikować poprawki iteracyjnie zgodnie ze standardami przeglądania przez agenta.
• Screencast i debugowanie: narzędzie oferuje szczegółowe rejestrowanie i możliwości screencastu, dzięki czemu możesz dokładnie zobaczyć, jak agent postrzega stronę i jak z nią wchodzi w interakcję. Udostępnia to niektóre sygnały odczytywane przez maszyny, takie jak drzewo ułatwień dostępu, które mogą wprowadzać agenta w błąd.

Dzięki temu możesz zapewnić wysoką jakość obsługi użytkowników niebędących ludźmi jeszcze przed wdrożeniem.

Więcej informacji o możliwościach i konfiguracji Narzędzi deweloperskich w Chrome dla agentów znajdziesz w naszym repozytorium GitHub.

Poniższy przykład konfiguracji Narzędzi deweloperskich w Chrome dla agentów (~/.gemini/config/mcp_config.json w przypadku AntigravityCLI lub skonfigurowany w Antigravity) łączy się z Chrome Canary.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--categoryExperimentalWebmcp",
        "--channel=canary"
      ]
    }
  }
}

Użyj przykładowego zapytania: "Using Narzędzia deweloperskie w Chrome MCP, go to https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/ and create me a pizza with 10 mushrooms and 2 bell peppers; make sure to give me a summary of what you did and what tools you called."

Za pomocą Narzędzi deweloperskich dla agentów możesz też przeprowadzić audyt Lighthouse pod kątem gotowości do działania jako agent:

„Chcę przeprowadzić audyt Lighthouse z użyciem agenta na stronie https://googlechromelabs.github.io/webmcp-tools/demos/french-bistro/?notoolname za pomocą narzędzia Chrome DevTools MCP. Podaj mi pełne podsumowanie.”

Co dalej?

Aby wziąć udział w dyskusji, zapoznaj się z oficjalnym repozytorium Lighthouse.

Więcej informacji o WebMCP znajdziesz w dokumentacji WebMCP. Więcej informacji o przewodniku po współczesnych technologiach internetowych znajdziesz w dokumentacji przewodnika po współczesnych technologiach internetowych. Więcej informacji o optymalizacji witryny pod kątem generatywnej AI znajdziesz w artykule Optymalizacja witryny pod kątem funkcji opartych na generatywnej AI w wyszukiwarce Google.