Narzędzia deweloperskie udostępniają panel pomocy AI, który pomaga zrozumieć witrynę i rozwiązywać problemy poprzez czatowanie z agentem AI.
Dzięki pomocy AI możesz debugować style, sieć, wydajność i źródła swojej witryny.
Aby skutecznie korzystać z czatu z Gemini w panelu Pomoc AI, dowiedz się, jak otwierać panel, wydawać polecenia i kontrolować przebieg rozmowy.
Otwórz panel pomocy AI
Otworzy się panel Pomoc AI w szufladzie.
Aby otworzyć panel, kliknij przycisk Pomoc AI znajdujący się w globalnym punkcie wejścia po prawej stronie głównego paska narzędzi u góry.
Możesz też otworzyć panel bezpośrednio z paneli Elementy, Sieć, Źródła lub Skuteczność, klikając prawym przyciskiem myszy element lub żądanie i wybierając Zapytaj AI.
W menu poleceń
Aby otworzyć pomoc AI z menu poleceń, wpisz AI, a następnie uruchom polecenie Pokaż pomoc AI, obok którego znajduje się plakietka Panel.
W menu „Więcej narzędzi”
Możesz też w prawym górnym rogu kliknąć Więcej opcji > Więcej narzędzi > Pomoc AI.
Tworzenie promptów
Podczas rozpoczynania nowej rozmowy asystent AI oferuje przykładowe prompty, które pomogą Ci szybko zacząć.
Kliknij dowolny prompt, aby wstępnie wypełnić pole do wprowadzania danych promptu u dołu panelu.
Możesz też wpisać własny prompt lub pytanie w polu do wprowadzania danych.
Aby wysłać prompt, naciśnij Enter lub kliknij strzałkę po prawej stronie pola do wprowadzania danych.
W bezpłatnym oknie czatu możesz zadawać bardziej zaawansowane pytania, np. „jak używać narzędzi deweloperskich do debugowania dostępności?” lub „które żądania sieciowe są powolne?”, a także kopiować fragmenty plików, np. z panelu Źródła, i wklejać je na czacie, aby zapytać, co robią.
Pomoc AI w stylizacji
Użyj panelu Pomoc AI, aby zrozumieć ogólny układ witryny, style poszczególnych elementów i uzyskać wygenerowane przez AI poprawki błędów CSS.
Otwieranie pomocy AI w panelu Elementy
Aby otworzyć pomoc AI w panelu Elementy podczas sprawdzania węzła DOM, kliknij węzeł prawym przyciskiem myszy i wybierz opcję Zapytaj AI.
Gdy otworzysz pomoc AI w ten sposób, sprawdzony element DOM będzie już wstępnie wybrany jako element kontekstowy rozmowy.
Możesz też kliknąć pływający przycisk dołączony do węzła DOM, nad którym zatrzymano wskaźnik myszy.
Kontekst rozmowy
Czaty z pomocą AI zawsze dotyczą aktualnie sprawdzanego elementu, czyli ostatniego elementu wybranego w drzewie DOM w panelu Elementy. Odwołanie do tego elementu jest widoczne w lewym dolnym rogu panelu.
Zmień kontekst, używając selektora elementów obok bieżącego elementu lub wybierając element z drzewa DOM w panelu Elementy.
Po wybraniu kontekstu możesz zrobić zrzut ekranu widocznego obszaru i przesłać go na czat. Kliknij przycisk Zrób zrzut ekranu obok pola do wprowadzania danych czatu.
Zrzuty ekranu mogą dostarczać dodatkowego kontekstu wizualnego do promptów, np. możesz sprawdzić, czy wszystkie widoczne przyciski mają takie same odstępy.
Chociaż obecnie sprawdzany element jest podstawą rozmowy, pomoc AI ma dostęp do wszystkich interfejsów API, aby zbierać więcej informacji ze sprawdzanej strony. Obejmuje to wysyłanie zapytań do innych elementów za pomocą funkcji
document.querySelector lub ocenianie obliczonych stylów.
Pomoc AI w zakresie sieci
Użyj panelu Pomoc AI w sekcji Sieć, aby sprawdzić żądania wysyłane przez Twoją witrynę.
Otwieranie pomocy AI w panelu Sieć
Aby otworzyć pomoc AI w panelu Sieć, kliknij prawym przyciskiem myszy żądanie i wybierz opcję Zapytaj AI.
Gdy otworzysz pomoc AI w ten sposób, wybrane żądanie sieciowe zostanie wstępnie wybrane jako kontekst rozmowy.
Możesz też kliknąć pływający przycisk obok żądania sieci, nad którym umieścisz wskaźnik myszy.
Kontekst rozmowy
Czaty z pomocą AI są powiązane z żądaniem sieciowym wybranym obecnie na liście żądań w panelu Sieć. Odwołanie do tej prośby jest widoczne w lewym dolnym rogu panelu.
Zmień kontekst, klikając inne żądanie w panelu Sieć.
Asystent AI używa adresu URL żądania, nagłówków, czasów i łańcucha inicjatora żądania, aby odpowiadać na Twoje pytania.
Ważne: nagłówki, które mogą zawierać informacje poufne, są automatycznie redagowane.
Po rozpoczęciu rozmowy kliknij przycisk Rozwiń w karcie Analyzing network data, aby wyświetlić nieprzetworzone dane używane przez pomoc AI.
Wsparcie AI w zakresie wydajności
Użyj panelu Asystent AI w sekcji Wydajność, aby poznać profile wydajności zarejestrowane w panelu Wydajność.
Otwieranie pomocy AI z poziomu panelu Wydajność
Aby otworzyć pomoc AI w panelu Wydajność, najpierw zarejestruj profil wydajności.
W zależności od tego, co chcesz zbadać, możesz otworzyć panel **pomoc AI** w przypadku poszczególnych statystyk skuteczności lub aktywności w widoku śledzenia skuteczności.
Statystyki wydajności
Na karcie Statystyki otwórz statystykę, np. **LCP według fazy, a potem kliknij przycisk Zapytaj AI**.
Narzędzia deweloperskie otworzą panel Pomoc AI z tym wybranym z wyprzedzeniem wnioskiem dotyczącym wydajności jako kontekstem rozmowy.
Widok logu czasu skuteczności
Aby otworzyć pomoc AI w widoku śledzenia, kliknij prawym przyciskiem myszy aktywność i wybierz opcję Zapytaj AI.
W tym przypadku ta aktywność jest wstępnie wybierana jako kontekst rozmowy.
Kontekst rozmowy
Wybrana aktywność związana z wydajnością jest używana jako kontekst rozmowy z pomocą AI. Odwołanie do tej aktywności jest widoczne w lewym dolnym rogu panelu.
Statystyki wydajności
Jeśli klikniesz Zapytaj AI w przypadku konkretnych statystyk skuteczności, zobaczysz te statystyki jako wybrany kontekst. Aby zmienić wybór, kliknij Zapytaj AI w sekcji innych statystyk.
Po rozpoczęciu rozmowy rozwiń sekcję Analyzing insight: ..., aby zobaczyć dane pierwotne używane przez asystenta AI.
Widok logu czasu
Możesz wybrać różne elementy śladu wydajności, a kontekst odpowiednio się zmieni.
Asystent AI używa czasów z wybranego drzewa połączeń, aby odpowiadać na Twoje prompty.
Kliknij przycisk na karcie Analyzing call tree po rozpoczęciu rozmowy, aby wyświetlić nieprzetworzone dane używane przez pomoc AI.
Pomoc AI dotycząca źródeł
W panelu Pomoc AI znajdziesz źródła, które pomogą Ci zrozumieć, jakie pliki są wczytywane i używane przez Twoją witrynę.
Otwieranie pomocy AI w panelu Źródła
Aby otworzyć pomoc AI w panelu Źródła, kliknij plik prawym przyciskiem myszy i wybierz opcję Zapytaj AI.
Gdy otworzysz pomoc AI w ten sposób, wybrany plik zostanie wstępnie wybrany jako kontekst rozmowy.
Możesz też kliknąć pływający przycisk, który pojawi się po najechaniu kursorem na plik.
Kontekst rozmowy
Wybrany plik jest używany jako kontekst rozmowy z asystentem AI. Odwołanie do tego pliku jest widoczne w lewym dolnym rogu panelu.
Zmień kontekst, klikając inny plik w panelu Źródła.
Asystent AI używa nazwy, adresu URL, mapy źródłowej (jeśli jest dostępna) i zawartości wybranego pliku, aby odpowiadać na Twoje pytania.
Po rozpoczęciu rozmowy kliknij przycisk na karcie Analyzing file, aby wyświetlić nieprzetworzone dane używane przez pomoc AI.
Przebieg rozmowy
Wysłanie promptu rozpoczyna rozmowę z agentem ds. stylizacji. Aby uzyskać informacje potrzebne do jak najlepszego udzielenia odpowiedzi na prompt, agent generuje i wykonuje kod JavaScript, który wywołuje interfejsy API sieci. Postęp agenta jest wyświetlany w krokach. Początkowy stan kroku to Investigating….
Etykieta kroku aktualizuje się, gdy agent wykonuje bardziej szczegółowe działania, aby rozwiązać Twój problem.
Gdy agent znajdzie ostateczną odpowiedź, wyświetli się ona pod krokami dochodzenia, wraz z sugestiami dotyczącymi dalszych promptów.
Aby kontynuować rozmowę, kliknij dowolny z sugerowanych promptów. Kliknij .
kroku analizy zagrożeń, aby lepiej zrozumieć, co zrobiła pomoc AI za kulisami.
Po rozwinięciu elementu postępu zobaczysz kod wykonany przez agenta wraz z wartością zwracaną. Skopiuj wykonany kod, aby użyć go później, np. wykonać go w panelu Konsola.
Wstrzymane rozmowy
Pomoc AI może generować kod z efektami ubocznymi. W takim przypadku rozmowa jest wstrzymywana przed wykonaniem kodu.
Gdy rozmowa zostanie wstrzymana, sprawdź kod zaproponowany przez agenta. Kliknij Kontynuuj, aby przejść dalej, lub Anuluj, aby zapobiec wykonaniu.
Zapisywanie zmian w obszarze roboczym
Dzięki połączonemu folderowi obszaru roboczego możesz zapisywać zmiany stylu sugerowane przez pomoc AI z powrotem w źródłowych plikach CSS na komputerze.
Aby to zrobić:
Najpierw wygeneruj plik metadanych i połącz folder obszaru roboczego.
Możesz też dodać folder ręcznie.
Rozpocznij czat w panelu Elementy.
Poproś asystenta AI o zmodyfikowanie CSS.
Pomoc AI może generować kod i wstrzymywać wykonywanie. Sprawdź kod i kliknij Dalej, aby przetestować zmiany na żywo.
Rozwiń sekcję Niezapisane zmiany i kliknij Zastosuj w obszarze roboczym.
Sprawdź zmiany w
diffi kliknij Zapisz wszystko.
Aby poznać ten przepływ pracy, zobacz:
Brak odpowiedzi
Asystent AI może nie udzielać odpowiedzi z różnych powodów.
Jeśli uważasz, że Twój prompt jest czymś, o czym asystent AI powinien być w stanie porozmawiać, zgłoś błąd.
Historia rozmowy
Gdy rozpoczniesz rozmowę, każda kolejna odpowiedź będzie oparta na Twoich poprzednich interakcjach z AI.
Pomoc AI zapisuje historię rozmów między sesjami, dzięki czemu możesz uzyskać dostęp do poprzednich czatów nawet po ponownym załadowaniu narzędzi deweloperskich lub Chrome.
Użyj elementów sterujących w lewym górnym rogu panelu, aby zarządzać historią rozmów.
Rozpocznij nowy
Aby rozpocząć nową rozmowę z aktualnie wybranym kontekstem rozmowy, kliknij przycisk .
Dalej
Aby kontynuować poprzednią rozmowę, kliknij przycisk i wybierz ją z menu kontekstowego.
Usuń
Aby usunąć rozmowę z historii, kliknij przycisk .
Ocenianie odpowiedzi i przekazywanie opinii
Pomoc AI to funkcja eksperymentalna. Dlatego aktywnie zbieramy opinie, aby dowiedzieć się, jak możemy poprawić jakość odpowiedzi i ogólne wrażenia.
Głosowanie na odpowiedzi
Oceń odpowiedź za pomocą przycisków Lubię i Nie lubię pod odpowiedzią.
Zgłaszanie odpowiedzi
Aby zgłosić nieodpowiednie treści, kliknij przycisk obok przycisków głosowania.