Narzędzia deweloperskie udostępniają panel asystenta AI, który pomaga zrozumieć witrynę i rozwiązywać problemy poprzez czatowanie z wbudowanym agentem AI.
Panel Pomoc AI jest obsługiwany przez Gemini i umożliwia:
- Specjalizuje się w tworzeniu stron internetowych.
- Może odpowiadać na ogólne pytania dotyczące całej strony internetowej, a także dostarczać szczegółowe informacje na różne tematy, w tym dotyczące stylów, sieci, wydajności i innych.
- Samodzielnie zawęża i wybiera konkretny kontekst, o którym możesz porozmawiać, np. elementy DOM, żądania sieciowe, zdarzenia śledzenia wydajności i inne.
- Może wykonywać autonomiczne działania, takie jak przeprowadzanie audytów i rejestrowanie śladów wydajności.
- Zawiera szczegółowe instrukcje dotyczące działań i uzasadnień oraz linki do odpowiednich części Narzędzi deweloperskich, dzięki czemu możesz je sprawdzić jednym kliknięciem.
- Może sugerować zmiany w kodzie i generować prompt z obserwacjami, które Twój agent kodowania może wykonać.
Dzięki pomocy AI możesz debugować style, sieć, wydajność, źródła witryny i inne elementy.
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
Panel Pomoc AI otwiera się domyślnie 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 paneli
Panel z wybranym kontekstem rozmowy możesz otworzyć bezpośrednio z paneli Elementy, Sieć, Źródła lub Skuteczność na 2 sposoby:
Kliknij przycisk
Debuguj za pomocą AI obok elementu, żądania sieciowego, pliku źródłowego lub rozwiniętej statystyki wydajności.
Kliknij prawym przyciskiem myszy element, żądanie, plik lub wpis śledzenia i wybierz jedną z opcji promptu w menu kontekstowym Debuguj za pomocą 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 pomoc AI oferuje przykładowe prompty, które pomogą Ci szybko zacząć.
Kliknij dowolnego prompta, aby wstępnie wypełnić pole do wprowadzania danych prompta u dołu panelu.
Możesz też wpisać własnego prompta 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.
Prompty otwarte bez kontekstu
W polu czatu możesz zadawać bardziej złożone pytania otwarte bez wcześniejszego kontekstu. Na przykład:
How to use DevTools to debug accessibility?Pomoc AI najpierw przeprowadzi audyt Lighthouse pod kątem dostępności, aby lepiej odpowiedzieć na Twoje pytanie.
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 jednym kliknięciem wybrać żądanie jako kontekst rozmowy.
What performance issues exist on the page?Asystent AI automatycznie zarejestruje ślad wydajności z wybranymi ustawieniami, aby odpowiedzieć na ten prompt.
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, a także uwzględniać Twoje ręczne wybory.
Prompty z kontekstem
Gdy otworzysz pomoc AI z panelu, w oknie czatu zostanie wybrany odpowiedni kontekst rozmowy, dzięki czemu możesz czatować na temat wybranego elementu.
W dowolnym momencie możesz ręcznie zmienić kontekst, wybierając element w panelu Elementy, żądanie w panelu Sieć, wpis śledzenia w panelu Skuteczność lub plik w panelu Źródła.
Możesz też skopiować fragment pliku, np. z panelu Źródła, i wkleić go na czacie, aby zapytać, co robi.
Następnie dowiedz się więcej o przebiegu rozmowy w pomocy AI.
Przebieg rozmowy
Wysłanie promptu rozpoczyna rozmowę z agentem. 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 początkowego kroku aktualizuje się, gdy agent wykonuje bardziej szczegółowe działania, aby odpowiedzieć na Twój prompt.
W zależności od tego, co debugujesz, agent może też wykonywać działania w narzędziach deweloperskich, takie jak rejestrowanie śladu wydajności lub przeprowadzanie audytów Lighthouse.
Przewodnik po agencie
Gdy agent wygeneruje odpowiedź na Twój prompt, początkowa etykieta kroku zmieni się na Pokaż instrukcje agenta lub Pokaż proces myślowy. Możesz ją rozwinąć, aby zobaczyć kroki, które agent wykonał w celu analizy danych w panelu bocznym po prawej stronie.
Obejmują one:
- Rozwijane fragmenty kodu wykonane przez agenta wraz ze zwróconymi danymi. Możesz skopiować kod i wykonać go w konsoli.
- widżety, które prezentują wyniki w bardziej czytelnej formie;
W prawym górnym rogu widżetów znajduje się przycisk Odkryj, który przenosi Cię do odpowiedniej części Narzędzi deweloperskich.
Dodatkowe prompty
Gdy agent znajdzie ostateczną odpowiedź, może zaproponować dalsze prompty. Kliknij dowolną, aby kontynuować rozmowę.
Generowanie prompta dla asystenta kodowania
Aby wygenerować prompta dla Twojego asystenta kodowania, kliknij Skopiuj do asystenta kodowania.
Agent podsumuje swoje ustalenia i wnioski oraz poda działający prompt w zminimalizowanej formie lub w formacie Markdown czytelnym dla człowieka. Możesz go skopiować do schowka i kontynuować kodowanie za pomocą wybranego agenta AI.
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 Dalej, aby kontynuować, lub Anuluj, aby zapobiec wykonaniu.
Sugerowane zmiany w kodzie możesz sprawdzić w panelu Zmiany.
Agent stosuje zmiany w Narzędziach deweloperskich, ale możesz skonfigurować obszar roboczy tak, aby Narzędzia deweloperskie zapisywały zmiany w Twoich źródłach.
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ę w kontekście aktualnie wybranej 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.