Nowości w DevTools w Chrome 133

Sofia Emelianova
Sofia Emelianova

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 DevTools 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óżnić obrazy, których rozmiar 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 płomienia

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 wejściowym. 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 obejmujący 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 są nakładane 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()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.

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 wersji Lighthouse 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 najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Źródła: gdy jest wstrzymany, Debuger nie przełącza się nieoczekiwanie na kontekst skryptu usługi, jeśli został on utworzony po wstrzymaniu (373893057).
  • Skuteczność:
    • Po najechaniu kursorem na skrypty na diagramie płomienia pojawiają się teraz etykietki z adresami URL (jeśli takie istnieją; 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 Przetestowane statystyki (N), która jest domyślnie zwinięta.
  • Aplikacja > Pamięć: możesz tworzyć wpisy pamięci z pustymi kluczami, ponieważ są one technicznie prawidłowe (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 pomijać pliki cookie i być bardziej czytelna, 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.