Nowości w DevTools w Chrome 132

Sofia Emelianova
Sofia Emelianova
GitHub

Debugowanie żądań sieciowych, plików źródłowych i śladów wydajności za pomocą Gemini

Oprócz stylowania CSS możesz teraz rozmawiać z Gemini o żądaniach sieciowych, plikach źródłowych i śladach wydajności.

Aby otworzyć panel Pomoc AI i rozpocząć czat z Gemini, kliknij prawym przyciskiem myszy i wybierz Zadaj pytanie AI lub kliknij przycisk Zadaj pytanie AI obok tych elementów:

  • Żądanie sieci w panelu Sieć.
  • Plik na karcie Źródła > Strona.
  • Aktywność na ścieżce Skuteczność > Główna.

przyciski i opcje menu dotyczące AI w sekcji Sieć, Źródła i Wydajność;

Gemini uwzględni kontekst wybranego żądania, pliku lub działania.

Zespół DevTools czeka na Twoją opinię na stronie crbug.com/364805393.

Historia czatu z AI

Możesz teraz przywrócić i wyświetlić poprzednie czaty z Gemini w panelu Pomoc AI, klikając przycisk Nowy czat w lewym górnym rogu panelu lub używając przycisków Zapytaj AI i opcji menu w panelu Sieć, na karcie Źródła > Strona oraz Wydajność > Główny.

Aby wyświetlić jeden z poprzednich czatów, wybierz odpowiednią prośbę z menu przy przycisku Historia. Panel Pomoc AI zapamięta historię czatu, gdy Narzędzia deweloperskie są otwarte.

historię czatu z AI w menu pod przyciskiem „Historia”.

Zarządzanie miejscem na dane rozszerzenia w sekcji Aplikacja > Pamięć

Podobnie jak w przypadku pamięci lokalnej i pamięci sesji, teraz możesz wyświetlać i zmieniać wpisy dotyczące pamięci rozszerzenia w sekcji Aplikacja > Pamięć.

Stan przed i po dodaniu sekcji „Pamięć rozszerzona” do panelu aplikacji.

Problem z Chromium: crbug.com/40963428.

Poprawa skuteczności

Ta wersja zawiera wiele ulepszeń panelu Wydajność.

Fazy interakcji w danych na żywo

W danych o skuteczności w czasie rzeczywistym możesz teraz rozwinąć interakcje, aby zobaczyć podział na fazy i ich czas trwania.

Przed i po dodaniu podziału faz i ich czasów trwania do interakcji.

Jak informowaliśmy w artykule Rozszerzenie Web Vitals, które jest teraz dostępne w DevTools, udostępnienie tych funkcji oznacza koniec obsługi rozszerzenia Web Vitals.

Problem z Chromium: crbug.com/369097528.

Informacje o blokowaniu renderowania na karcie Podsumowanie

Gdy w sekcji Wydajność > Sieć wybierzesz żądanie sieci oznaczone czerwonym trójkątem, na karcie Podsumowanie oprócz (przebudowanej) informacji w podpowiedzi zobaczysz też komunikat o tym, że żądanie blokuje renderowanie.

Stan przed i po dodaniu informacji o blokowaniu renderowania na karcie Podsumowanie.

Obsługa zdarzeń scheduler.postTask i strzałek inicjatora

Na ścieżce Skuteczność > Główna widoczne są teraz zdarzenia scheduler.postTask() i strzałki wskazujące nainicjatora między:

  • Schedule postTask -> Fire postTask
  • Schedule postTask -> Abort postTask

Zdjęcia przedstawiające stan przed i po dodaniu obsługi zdarzeń scheduler.postTask oraz ich strzałki inicjatora.

Problem z Chromium: crbug.com/40775984.

Ulepszenia w panelu Animacje i na karcie Elementy > Style

Ta wersja zawiera kilka ulepszeń w panelu Animacje oraz na karcie Elementy > Style.

Karta Elementy > Style zawiera teraz przyciski animacji Przejdź do panelu Animacje obok wartości właściwości animation, dzięki czemu możesz łatwo modyfikować animację.

Stan przed i po dodaniu linku z karty Style do panelu Animacje.

Aktualizacje w czasie rzeczywistym na karcie Obliczenia

Karta Elementy > Obliczone aktualizuje teraz obliczone wartości w czasie rzeczywistym, gdy na przykład aktualizują je animacje.

Obliczanie emulacji ciśnienia w urządzeniu Sensors

Panel Czujniki umożliwia teraz emulowanie obciążenia procesora Nominal, Fair, Serious i Critical.

Stan przed i po dodaniu opcji emulacji ciśnienia procesora do panelu Sensory.

Problem z Chromium: crbug.com/362277525.

Obiekty JS o tej samej nazwie pogrupowane według źródła w panelu Pamięć

Panel Pamięć odróżnia teraz obiekty JS o tej samej nazwie pochodzące z różnych źródeł i odpowiednio je grupowanie.

Przed i po grupowaniu obiektów JS o tej samej nazwie według źródła.

Problem z Chromium: crbug.com/357902505.

Nowy wygląd ustawień

Aby lepiej dopasować interfejs użytkownika, ustawienia DevTools są teraz bardziej zbliżone do ustawień Chrome. W szczególności sekcje są teraz wizualnie podzielone na „karty”.

Sekcje przed i po rozdzieleniu na „karty”.

Panel Statystyki wydajności został wycofany i usunięty z Narzędzi deweloperskich

Wszystkie ważne i przydatne funkcje z panelu Statystyki wydajności znalazły teraz nowe miejsce w panelu Wydajność, a w szczególności w sekcji dane na żywo, na karcie bocznej Statystyki i w sekcji Zmiany układu. W tej wersji wycofujemy panel Statystyki wydajności i usuwamy go z Narzędzi deweloperskich.

Zespół Narzędzi deweloperskich dziękuje za przesłane opinie na temat wycofania tego panelu i ogólnego procesu debugowania wydajności. Jak zawsze chętnie poznamy Twoje zdanie i Twoje spojrzenie na tę kwestię. Niech tak dalej!

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Skuteczność:
    • Usunięto niepotrzebny limit 3 znaków w zapytaniach.
    • Dodano przycisk Strona główna, który umożliwia powrót do ekranu danych na żywo.
    • Naprawiono wcześniej uszkodzone skróty klawiszowe Shift + S/W do śledzenia powiększenia.
  • Elementy > Style:
    • Dodano anchor-center do autouzupełniania 341991541.
    • Usunęliśmy błąd, który powodował, że edytor Flexbox był niedostępny w przypadku wartości dwuwyrazowych 341964645.
  • Sieć: błędy pobierania wstępnego są teraz wyświetlane jako żółte ostrzeżenia lub czerwone błędy, aby wskazać, że wyświetlanie treści nie zostało zakłócone 372055494.

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziech deweloperskich.