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 stylów CSS możesz teraz rozmawiać z Gemini o żądaniach sieciowych, plikach źródłowych i śladach wydajności.

Podobnie jak w przypadku menu kontekstowego w panelu Elementy, aby otworzyć panel Pomoc AI i rozpocząć czat z Gemini, kliknij prawym przyciskiem myszy i wybierz Zapytaj AI lub kliknij przycisk Zapytaj 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 Zapytaj AI i opcja menu w panelach Sieć, Źródła i Wydajność.

Gemini weźmie pod uwagę kontekst wybranego żądania, pliku lub aktywności.

Zespół Narzędzi deweloperskich czeka na Twoją opinię na stronie crbug.com/364805393.

Historia czatu z AI

Możesz teraz przywracać i wyświetlać poprzednie czaty z Gemini w panelu Pomoc AI. Aby to zrobić, kliknij przycisk Nowy czat w lewym górnym rogu panelu lub użyj przycisków i opcji menu Zapytaj AI w panelach Sieć, Źródła > karta Strona oraz Skuteczność > ścieżka Główna.

Aby wyświetlić jeden z poprzednich czatów, wybierz odpowiedni prompt z menu pod przyciskiem Historia. Panel Pomoc AI będzie pamiętać historię czatu, gdy Narzędzia deweloperskie są otwarte.

Historia 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 sesyjnej możesz teraz wyświetlać i zmieniać wpisy w pamięci rozszerzenia w sekcji Aplikacja > Pamięć.

Przed i po dodaniu sekcji „Pamięć rozszerzenia” do panelu Aplikacja.

Problem w Chromium: crbug.com/40963428.

Poprawa skuteczności

Ta wersja wprowadza szereg ulepszeń w panelu Wydajność.

Fazy interakcji w danych na żywo

Możesz teraz rozwijać interakcje w danych o skuteczności na żywo, aby zobaczyć podział na fazy i ich czasy.

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

Jak informowaliśmy w artykule Rozszerzenie Web Vitals w Narzędziach deweloperskich, udostępnienie tych funkcji oznacza koniec obsługi rozszerzenia Web Vitals.

Problem w Chromium: crbug.com/369097528.

Informacje o blokowaniu renderowania na karcie Podsumowanie

Gdy w sekcji Skuteczność > Sieć wybierzesz żądanie sieciowe oznaczone czerwonym trójkątem, na karcie Podsumowanie, oprócz (zmodyfikowanego) dymku, zobaczysz też informację, że żądanie blokuje renderowanie.

Przed i po dodaniu informacji o elementach blokujących renderowanie na karcie Podsumowanie.

Obsługa zdarzeń scheduler.postTask i strzałek inicjujących

Ścieżka Skuteczność > Główna zawiera teraz zdarzenia scheduler.postTask() i strzałki inicjatora między:

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

Przed i po dodaniu obsługi zdarzeń scheduler.postTask i strzałek inicjatora.

Problem w Chromium: crbug.com/40775984.

Ulepszenia panelu Animacje i karty Elementy > Style

W tej wersji wprowadziliśmy kilka ulepszeń w panelu Animacje oraz na karcie Elementy > Style.

Na karcie Elementy > Style obok wartości właściwości animation znajdują się teraz ikony animacji Przejdź do panelu Animacje, dzięki czemu możesz łatwo sprawdzać animacje.

Przed i po dodaniu linku z karty Style do panelu Animacje

Aktualizacje w czasie rzeczywistym na karcie Obliczone

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

Obliczanie emulacji ciśnienia w aplikacji Czujniki

W panelu Czujniki możesz teraz emulować obciążenie procesora Nominal, Fair, Serious i Critical.

Przed i po dodaniu opcji emulacji obciążenia procesora do panelu Czujniki.

Problem w Chromium: crbug.com/362277525.

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

Panel Pamięć rozróżnia teraz obiekty JS o tej samej nazwie, które pochodzą z różnych źródeł, i odpowiednio je grupuje.

Obiekty JS przed i po grupowaniu o tej samej nazwie są też grupowane według źródła.

Problem z Chromium: crbug.com/357902505.

Nowy wygląd ustawień

Aby lepiej dopasować wygląd interfejsu, ustawienia Narzędzi deweloperskich są teraz bardziej podobne do ustawień Chrome. W szczególności sekcje są teraz wizualnie rozdzielone na „karty”.

Przed i po rozdzieleniu sekcji 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 znajdują się teraz w panelu Wydajność, a konkretnie w danych na żywo, karcie bocznej Statystyki i śladzie zmian układu. W tej wersji wycofujemy i usuwamy z Narzędzi deweloperskich panel Statystyki wydajności.

Zespół Narzędzi deweloperskich jest wdzięczny za przesłane opinie na temat wycofania tego panelu i ogólnych wrażeń związanych z debugowaniem wydajności. Jak zawsze chętnie poznamy Twoje przemyślenia i opinie. Niech nadal przychodzą!

Różne wyróżnione informacje

Oto kilka ważnych poprawek i ulepszeń w tej wersji:

  • Skuteczność:
    • Usunięto niepotrzebny limit 3 znaków w przypadku zapytań.
    • Dodaliśmy przycisk Strona główna, który umożliwia powrót do ekranu z danymi na żywo.
    • Naprawiono wcześniej uszkodzone skróty klawiszowe Shift+S/W do powiększania śladu.
  • Elementy > Style:
    • Dodano anchor-center do autouzupełniania 341991541.
    • Usunęliśmy błąd, który powodował, że edytor Flexbox nie był dostępny w przypadku wartości składających się z 2 słów 341964645.
  • Sieć: błędy wstępnego pobierania są teraz żółtymi ostrzeżeniami zamiast czerwonych błędów, co oznacza, że nie mają wpływu na wyświetlanie treści 372055494.

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.