Narzędzia deweloperskie udostępniają panel Pomoc AI , który pomaga zrozumieć witrynę i rozwiązywać problemy dzięki czatowi 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 otworzyć panel, tworzyć prompty i kontrolować przebieg rozmowy.
Otwieranie panelu Pomoc AI
Panel Pomoc AI otwiera się 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.
Z poziomu paneli
Panel możesz otworzyć z wybranym kontekstem rozmowy bezpośrednio z paneli Elementy, Sieć, Źródła lub Wydajność na 2 sposoby:
Obok elementu, żądania sieciowego, pliku źródłowego lub rozwiniętych statystyk wydajności kliknij przycisk
Debuguj za pomocą AI.
Kliknij prawym przyciskiem myszy element, żądanie, plik lub wpis śledzenia i wybierz jedną z typowych opcji prompta z menu kontekstowego Debuguj za pomocą AI.
Z 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 Szuflada.
Z menu „Więcej narzędzi”
Możesz też w prawym górnym rogu kliknąć kolejno Więcej opcji > Więcej narzędzi > Pomoc AI.
Tworzenie promptów
Podczas rozpoczynania nowej rozmowy Pomoc AI oferuje przykładowe prompty, które pomogą Ci szybko zacząć.
Kliknij dowolny prompt, aby wstępnie wypełnić pole do wprowadzania danych prompta u dołu panelu.
Możesz też wpisać własny prompt lub pytanie w polu do wprowadzania danych.
Aby wysłać prompta, naciśnij Enter lub kliknij strzałkę po prawej stronie pola do wprowadzania danych.
Prompty otwarte bez kontekstu
W polu czatu swobodnego możesz zadawać pytania otwarte wyższego poziomu bez wcześniejszego kontekstu. Na przykład:
How to use DevTools to debug accessibility?Aby lepiej odpowiedzieć na prompta, Pomoc AI najpierw przeprowadzi audyt dostępności za pomocą Lighthouse.
What are the slowest network requests on this page?Pomoc AI wyświetli listę podejrzanych żądań i linki do nich w panelu Sieć, dzięki czemu możesz wybrać żądanie jako kontekst rozmowy jednym kliknięciem.
What performance issues exist on the page?Aby odpowiedzieć na tego prompta, Pomoc AI automatycznie zarejestruje ślad wydajności z wybranymi ustawieniami.
Prompty takie jak
How do I use the Animation panel?lubWhere is the high contrast setting in DevTools?zapewnią bezpośrednią pomoc w korzystaniu z narzędzi deweloperskich.
Gdy rozpoczniesz czat, Pomoc AI będzie inteligentnie aktualizować kontekst na podstawie Twoich działań, gdy czat jest pusty, przy jednoczesnym uwzględnianiu Twoich ręcznych wyborów.
Prompty z kontekstem
Gdy otworzysz Pomoc AI z panelu, w polu czatu zostanie wybrany odpowiedni kontekst rozmowy, dzięki czemu możesz czatować na temat tego, co zostało wybrane.
W każdej chwili możesz zmienić kontekst, wybierając element w panelu Elementy, żądanie w panelu Sieć, wpis śledzenia w panelu Wydajność lub plik w panelu Źródła.
Możesz też skopiować części pliku np. z panelu Źródła i wkleić je do czatu, aby zapytać, co robią.
Następnie dowiedz się więcej o korzystaniu z Pomocy AI w różnych panelach.
Pomoc AI dotycząca stylów
Użyj panelu Pomoc AI dotyczącego stylów, aby zrozumieć ogólny układ witryny, style poszczególnych elementów i uzyskać poprawki błędów CSS wygenerowane przez AI.
Otwieranie Pomocy AI z panelu Elementy
Aby otworzyć Pomoc AI z panelu Elementy, podczas sprawdzania węzła DOM, kliknij go prawym przyciskiem myszy i wybierz opcję Zapytaj AI.
Gdy otworzysz Pomoc AI w ten sposób, sprawdzany element DOM zostanie wstępnie wybrany jako element kontekstu rozmowy.
Możesz też kliknąć pływający przycisk dołączony do węzła DOM, nad którym znajduje się kursor.
Kontekst rozmowy
Rozmowy z Pomocą AI zawsze dotyczą aktualnie sprawdzanego elementu, czyli ostatniego elementu wybranego w drzewie DOM panelu Elementy. Odwołanie do tego elementu jest widoczne w lewym dolnym rogu panelu.
Zmień kontekst za pomocą selektora elementów obok bieżącego elementu lub wybierając element z drzewa DOM panelu Elementy.
Po wybraniu kontekstu możesz zrobić zrzut ekranu widocznego obszaru i przesłać go na czat. Obok pola do wprowadzania danych czatu kliknij przycisk Zrób zrzut ekranu.
Zrzuty ekranu możesz wykorzystać do dodania kontekstu wizualnego do promptów, np. aby sprawdzić, czy wszystkie widoczne przyciski mają takie same odstępy.
Chociaż aktualnie 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ą document.querySelector lub ocenianie obliczonych stylów.
Pomoc AI dotycząca sieci
Użyj panelu Pomoc AI dotyczącego sieci, aby zrozumieć żądania wysyłane przez Twoją witrynę.
Otwieranie Pomocy AI z panelu Sieć
Aby otworzyć Pomoc AI z panelu Sieć, kliknij żądanie prawym przyciskiem myszy 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 sieciowego, nad którym znajduje się kursor.
Kontekst rozmowy
Rozmowy z Pomocą AI dotyczą żądania sieciowego aktualnie wybranego na liście żądań w panelu Sieć. Odwołanie do tego żądania jest widoczne w lewym dolnym rogu panelu.
Zmień kontekst, klikając inne żądanie w panelu Sieć.
Aby odpowiadać na Twoje pytania, Pomoc AI używa adresu URL żądania, nagłówków, czasu i łańcucha inicjatora żądania.
Ważne: nagłówki, które mogą zawierać informacje poufne, są automatycznie redagowane.
Po rozpoczęciu rozmowy kliknij przycisk Rozwiń
w elemencie Analyzing network data, aby zobaczyć nieprzetworzone
dane używane przez Pomoc AI.
Pomoc AI dotycząca wydajności
Użyj panelu Pomoc AI dotyczącego wydajności, aby zrozumieć profile wydajności zarejestrowane w panelu Wydajność.
Otwieranie Pomocy AI z panelu Wydajność
Aby otworzyć Pomoc AI z panelu Wydajność, najpierw zarejestruj profil wydajności.
W zależności od tego, co chcesz zbadać, możesz otworzyć panel **Pomoc AI** z poszczególnych statystyk wydajności lub z działań w widoku śladu wydajności.
Statystyki wydajności
Na karcie Statystyki otwórz statystyki, np. **LCP według fazy, a następnie kliknij przycisk Zapytaj AI**.
Narzędzia deweloperskie otworzą panel Pomoc AI z tymi statystykami wydajności wstępnie wybranymi jako kontekst rozmowy.
Widok śladu wydajności
Aby otworzyć Pomoc AI z widoku śladu, kliknij działanie prawym przyciskiem myszy i wybierz opcję Zapytaj AI.
W tym przypadku to działanie jest wstępnie wybrane jako kontekst rozmowy.
Kontekst rozmowy
Wybrane działanie związane z wydajnością jest używane jako kontekst rozmowy z Pomocą AI. Odwołanie do tego działania jest widoczne w lewym dolnym rogu panelu.
Statystyki wydajności
Jeśli klikniesz Zapytaj AI w przypadku konkretnych statystyk wydajności, zobaczysz te statystyki jako wybrany kontekst. Aby zmienić wybór, możesz kliknąć Zapytaj AI w innych statystykach.
Po rozpoczęciu rozmowy rozwiń sekcję Analyzing insight: ..., aby zobaczyć nieprzetworzone dane używane przez Pomoc AI.
Widok śladu
Możesz wybrać różne elementy w śladzie wydajności, a kontekst odpowiednio się zmieni.
Aby odpowiadać na Twoje prompty, Pomoc AI używa czasu z wybranego drzewa wywołań.
Po rozpoczęciu rozmowy kliknij przycisk
w elemencie Analyzing call tree po rozpoczęciu rozmowy, aby zobaczyć
nieprzetworzone dane używane przez Pomoc AI.
Pomoc AI dotycząca źródeł
Użyj panelu Pomoc AI dotyczącego źródeł, aby zrozumieć pliki wczytywane i używane przez Twoją witrynę.
Otwieranie Pomocy AI z panelu Źródła
Aby otworzyć Pomoc AI z 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, gdy kursor znajduje się nad plikiem.
Kontekst rozmowy
Wybrany plik jest używany jako kontekst rozmowy z Pomocą AI. Odwołanie do tego pliku jest widoczne w lewym dolnym rogu panelu.
Zmień kontekst, klikając inny plik w panelu Źródła.
Aby odpowiadać na Twoje pytania, Pomoc AI używa nazwy wybranego pliku, adresu URL, mapy źródłowej (jeśli jest dostępna) i treści.
Kliknij przycisk
w elemencie Analyzing file po rozpoczęciu rozmowy, aby zobaczyć nieprzetworzone
dane używane przez Pomoc AI.
Przebieg rozmowy
Wysłanie prompta rozpoczyna rozmowę z agentem stylów. Aby uzyskać informacje potrzebne do jak najlepszego udzielenia odpowiedzi na prompta, agent generuje i wykonuje kod JavaScript, który wywołuje interfejsy API. Postęp agenta jest wyświetlany w postaci kroków. Początkowy stan kroku to Investigating….
Etykieta kroku jest aktualizowana, gdy agent wykonuje bardziej szczegółowe działania, aby rozwiązać Twój problem.
Gdy agent znajdzie ostateczną odpowiedź, zostanie ona wyświetlona poniżej kroków badania, w tym sugestie dotyczące dalszych promptów.
Aby kontynuować rozmowę, kliknij dowolny z sugerowanych promptów. Kliknij
kroku badania, aby lepiej zrozumieć, co Pomoc AI zrobiła za kulisami.
Gdy rozwiniesz element postępu, zobaczysz kod wykonany przez agenta wraz z jego 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 zostanie wstrzymana przed wykonaniem kodu.
Gdy rozmowa zostanie wstrzymana, sprawdź kod zaproponowany przez agenta. Aby kontynuować, kliknij Dalej , a aby zapobiec wykonaniu, kliknij Anuluj.
Zapisywanie zmian w obszarze roboczym
Jeśli masz połączony folder obszaru roboczego, możesz zapisywać zmiany stylu sugerowane przez Pomoc AI z powrotem w plikach źródłowych 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 z panelu Elementy.
Poproś Pomoc AI o zmodyfikowanie CSS.
Pomoc AI może wygenerować kod i wstrzymać jego wykonanie. 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 proces, zobacz:
Brak odpowiedzi
Pomoc AI może nie udzielać odpowiedzi z różnych powodów.
Jeśli uważasz, że Pomoc AI powinna być w stanie odpowiedzieć na Twojego prompta, 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.
Aby kontrolować historię rozmów, użyj elementów sterujących w lewym górnym rogu panelu.
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 .
Ocena odpowiedzi i przesyłanie opinii
Pomoc AI to funkcja eksperymentalna. Dlatego aktywnie szukamy Twoich opinii, aby dowiedzieć się, jak możemy poprawić jakość odpowiedzi i ogólne wrażenia.
Głosowanie na odpowiedzi
Oceń odpowiedź za pomocą przycisków Polub i Nie lubię pod odpowiedzią.
Zgłaszanie odpowiedzi
Aby zgłosić nieodpowiednie treści, kliknij przycisk obok przycisków głosowania.