Nowości w DevTools w Chrome 133

Sofia Emelianova
Sofia Emelianova
GitHub

Historia czatu z trwałą AI

Panel Pomoc AI przechowuje teraz lokalnie historię czatu w całych sesjach, dzięki czemu możesz wyświetlać poprzednie rozmowy z Gemini nawet po ponownym załadowaniu narzędzi deweloperskich lub Chrome.

Ulepszenia panelu wydajności

Ta wersja zawiera wiele ulepszeń panelu Wydajność.

Statystyki wyświetlania obrazów

Na karcie Skuteczność > Statystyki możesz teraz wyróżniać obrazy, których rozmiar pliku możesz zoptymalizować. Kliknij obraz w statystykach, aby wyróżnić go na ścieżce Sieć.

Panel Skuteczność z wyróżnionym statystycznym wyświetleniem obrazu.

Więcej informacji o optymalizowaniu dostarczania obrazów znajdziesz w artykule Wydajne kodowanie obrazów.

Klasyczna i nowocześniejsza nawigacja za pomocą klawiatury

W panelu Wyniki możesz teraz wybrać preferowany styl sterowania za pomocą klawiatury. Oto główne różnice:

  • Klasyczny: powiększanie za pomocą kółka myszy (w górę lub w dół na touchpadzie) oraz przewijanie w pionie za pomocą Shift + kółko myszy.
  • Nowoczesne: przewijanie w pionie za pomocą kółka myszy, przewijanie w poziomie za pomocą Shift + kółko myszy oraz powiększanie za pomocą Command/Control + kółko myszy.

Aby wybrać preferowany styl, w prawym górnym rogu panelu kliknij Pokaż skróty i wybierz Klasyczna lub Nowoczesny. W oknie skrótów znajdziesz też listę dostępnych skrótów.

Okno skrótów z dostępnymi skrótami do panelu Wydajność

Ignorowanie nieistotnych skryptów na wykresie fali

Aby lepiej skupić się na kodzie, możesz teraz dodawać nieistotne skrypty do listy ignorowanych fragmentów kodu bezpośrednio w panelu Skuteczność. Panel automatycznie zwinie nadmiarowe zagnieżdżenie.

Aby dodać skrypty do listy ignorowanych, na górnym pasku działań kliknij Pokaż okno ustawień listy ignorowanych fragmentów kodu i wpisz wyrażenie regularne w polu wprowadzania. Podczas wpisywania nowego reguły wykres płomienia zastosuje ją w miarę pisania.

DevTools zapisuje reguły listy ignorowania dodawane w  Ustawienia > Lista ignorowania. Możesz je włączać i wyłączać w oknie dialogowym.

Podświetlenie znacznika i zakresu na osi czasu

Aby ułatwić Ci interpretowanie ścieżki skuteczności, panel Skuteczność umożliwia teraz:

  • Po najechaniu kursorem na osi czasu wyświetla się pionowy znacznik, który obejmuje cały ślad skuteczności.
  • Podświetla zakres na osi czasu, gdy najedziesz kursorem na elementy na głównym ścieżku.

Zalecane ustawienia ograniczania przepustowości

Panel Skuteczność zawiera teraz zalecenia dotyczące ustawień ograniczania przepustowości zarówno w danych na żywo, jak i w odpowiednich menu Ustawienia rejestrowania.

Stan przed i po dodaniu do menu ustawień rekomendacji dotyczących ograniczania przepustowości.

Zalecane ograniczenie procesora jest (na razie) najczęściej używane 4x slowdown, a zalecenie dotyczące sieci jest oparte na danych z raportu na temat użytkowania Chrome, jeśli jest on włączony w danych na żywo.

Dodatkowo panel Wydajność przypomina teraz ustawienia ograniczania przepustowości obok każdego śledzenia w menu Ostatnie sesje na pasku działań.

znaczniki czasu w nakładce;

znaczniki czasu zostały przeniesione ze ścieżki Czasy na dół ścieżki śledzenia. Teraz nakłada się je na wszystkie ścieżki i są widoczne nawet wtedy, gdy ścieżka Czasy jest ukryta.

Przed i po przeniesieniu znaczników na dół ścieżki.

Ścieżka Czasy przechowuje niestandardowe wywołania mark() i measure().

Zrzuty stosu wywołań JavaScriptu w sekcji Podsumowanie

Na karcie Wydajność > Podsumowanie znajdziesz teraz ścieżki stosu wywołań JavaScript, w tym asynchronicznych.

Przed i po dodaniu ścieżek pakietu do karty Podsumowanie.

Ustawienia plakietki zostały przeniesione do menu w Elementach

Ustawienia plakietki w panelu Elementy zostały przeniesione z ukrytej domyślnie paska czynności do menu, które otwiera się po kliknięciu prawym przyciskiem myszy.

Przeniesienie ustawień plakietki do menu – stan przed i po.

Nowy panel „Co nowego”

Panel Co nowego ma teraz nowy wygląd, który bardziej przypomina interfejs Chrome.

Stary i nowy wygląd panelu „Co nowego”.

Problem z Chromium: 325441858.

Lighthouse 12.3.0

Panel Lighthouse korzysta teraz z Lighthouse w wersji 12.3.0.

Ta aktualizacja obejmuje m.in. nowe kontrole, które sprawdzają prawidłowe izolowanie źródła za pomocą zasad COOP i silnej zasady HSTS. Zobacz pełną listę zmian.

Podstawy korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 40543651.

Inne wyróżnione informacje

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Źródła: gdy jest wstrzymany, Debuger nie przełącza się nieoczekiwanie do kontekstu skryptu usługi, jeśli został on utworzony po wstrzymaniu (373893057).
  • Skuteczność:
    • Po najechaniu kursorem na skrypty na diagramie płomienia pojawiają się teraz tooltipy z adresami URL (368541957).
    • Podsumowanie: wykres kołowy jest zastępowany wykresem słupkowym.
    • Pole wyboru Dane rozszerzenia w sekcji Ustawienia rejestrowania zostało przemianowane na Pokaż ścieżki niestandardowe.
    • Na karcie Statystyki znajduje się teraz sekcja Przeanalizowane statystyki (N), która jest domyślnie zwinięta.
  • Aplikacja > Pamięć: możesz tworzyć wpisy pamięci z pustymi kluczami, ponieważ są one technicznie poprawne (373703285).
  • Tryb urządzenia jest teraz wyłączony na stronach chrome:// (40186276).
  • Sieć:
    • Gdy odpowiednie ustawienie jest włączone, po kliknięciu Eksportuj HAR otworzy się menu z 2 opcjami (po usunięciu danych poufnych i z danymi poufnymi). Wcześniej menu otwierało się po długim kliknięciu (378076279).
    • Opcja Skopiuj jako cURL używa teraz atrybutu -b, aby pominąć pliki cookie i ułatwić czytelność, zamiast -H 'cookie:...' (40791742).
  • Ułatwienia dostępu: możesz teraz przenosić karty w panelach w lewo lub w prawo za pomocą menu kontekstowego (383164782).
  • Blokowanie żądań sieciowych: to ustawienie menu poleceń jest teraz zsynchronizowane z odpowiednim polem wyboru (378058733).

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej przeglądarki Chrome w wersji Canary, Dev lub Beta. 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.