Pomoc AI przy określaniu stylu

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 panelu „Pomoc AI”

Otworzy się panel Pomoc AI w szufladzie.

Panel pomocy AI został otwarty w stanie domyślnym.

W panelu Elementy

Aby otworzyć pomoc AI w panelu Elementy, podczas sprawdzania węzła DOM kliknij go prawym przyciskiem myszy i wybierz opcję Zapytaj AI.

Menu kontekstowe elementu z wyróżnioną opcją „Zapytaj AI”.

Gdy otworzysz pomoc AI w ten sposób, sprawdzany 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.

Pływający przycisk dołączony do węzła DOM.

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.

Otwarte menu poleceń z wyróżnioną opcją „Pokaż pomoc AI”.

W menu „Więcej narzędzi”

Możesz też w prawym górnym rogu kliknąć Więcej opcji > Więcej narzędzi > Pomoc AI.

Otworzone menu Więcej narzędzi.

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.

Panel pomocy AI z wyróżnionym elementem kontekstu.

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 wpisywania czatu.

„Przycisk zrobienia zrzutu ekranu” i załączony zrzut ekranu w polu wprowadzania danych.

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.

Tworzenie promptów

Podczas rozpoczynania nowej rozmowy pomoc AI w zakresie stylizacji oferuje przykładowe prompty, które pomogą Ci szybko zacząć.

Panel pomocy AI z wyróżnionymi przykładowymi promptami.

Kliknij dowolny prompt, aby wstępnie wypełnić pole do wpisywania promptów 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 wprowadzania.

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….

Panel pomocy AI po rozpoczęciu rozmowy.

Etykieta kroku aktualizuje się w miarę wykonywania przez agenta bardziej szczegółowych działań w celu rozwiązania Twojego pytania.

Gdy agent znajdzie ostateczną odpowiedź, wyświetli się ona pod krokami dochodzenia, wraz z sugestiami dotyczącymi dalszych promptów.

Panel pomocy AI z odpowiedzią wygenerowaną przez AI.

Aby kontynuować rozmowę, kliknij dowolny z sugerowanych promptów. Kliknij .

kroku dochodzenia, aby lepiej zrozumieć, co zrobił asystent AI w tle.

Panel pomocy AI z rozwiniętym krokiem rozmowy.

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.

Panel pomocy AI z wstrzymaną rozmową.

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ć:

  1. Najpierw wygeneruj plik metadanych i połącz folder obszaru roboczego.

    Możesz też dodać folder ręcznie.

  2. Rozpocznij czat w panelu Elementy.

  3. Poproś pomoc AI o zmodyfikowanie CSS.

  4. Pomoc AI może generować kod i wstrzymywać wykonywanie. Sprawdź kod i kliknij Dalej, aby przetestować zmiany na żywo.

  5. Rozwiń sekcję Niezapisane zmiany i kliknij Zastosuj w obszarze roboczym.

  6. Sprawdź zmiany w diff i kliknij Zapisz wszystko.

Aby poznać ten przepływ pracy, zobacz:

Brak odpowiedzi

Asystent AI może nie udzielać odpowiedzi z różnych powodów.

Panel pomocy AI z odrzuconą rozmową.

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.

Panel pomocy AI z wyróżnionymi elementami sterującymi historią.

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 przesyłanie opinii

Pomoc AI to funkcja eksperymentalna. Dlatego aktywnie zbieramy opinie, aby dowiedzieć się, jak możemy poprawić jakość odpowiedzi i ogólne wrażenia.

Podświetlony panel pomocy AI z elementami sterującymi oceną.

Głosowanie na odpowiedzi

Oceń odpowiedź za pomocą przycisków Lubię Nie lubię pod odpowiedzią.

Zgłaszanie odpowiedzi

Aby zgłosić nieodpowiednie treści, kliknij przycisk obok przycisków głosowania.