Nowości w DevTools w Chrome 138

Sofia Emelianova
Sofia Emelianova
GitHub

Ulepszenia panelu wydajności

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

Źródła połączone w trybie preconnect w statystykach „Drzewo zależności sieciowych”

Wskazówka Skuteczność > Statystyki > Drzewo zależności sieciowych zawiera teraz listę używanych lub nieużywanych wstępnie połączonych źródeł i źródeł, które można wstępnie połączyć.

Wskazówki dotyczące wstępnego połączenia umożliwiają witrynie wcześniejsze nawiązywanie połączeń z ważnymi źródłami w innych domenach i zwiększanie szybkości wczytywania strony.

Widok przed i po dodaniu wstępnie połączonych źródeł i kandydatów do statystyk „Drzewo zależności sieciowych”.

Więcej informacji znajdziesz w artykule Łączenie się z wymaganymi źródłami.

Czas reakcji serwera i przekierowania w statystykach „Czas oczekiwania w przypadku żądania dokumentu”

Statystyka Skuteczność > Statystyki > Opóźnienie żądania dokumentu pokazuje teraz czas odpowiedzi serwera oraz liczbę przekierowań i czas przekierowania (jeśli występują).

Porównanie czasu oczekiwania na żądanie dokumentu przed dodaniem przekierowania i czasu odpowiedzi serwera oraz po dodaniu tych elementów.

Przekierowania w podsumowaniu żądań sieciowych

W panelu Skuteczność adresy URL przekierowań są teraz widoczne w podsumowaniu żądań sieciowych i w ich etykietkach.

Przed i po dodaniu adresów URL przekierowania do podsumowania i etykietek żądań sieciowych.

Problem w Chromium: 402353313.

Mniejszy szum w śladzie wydajności

Panel Skuteczność nie będzie już wyświetlać zdarzeń z kategorii compile silnika JavaScript v8. Wcześniej te zdarzenia powodowały wiele niepotrzebnych obciążeń i szumów, zwłaszcza zdarzenie compile code.

Przed i po usunięciu zdarzeń „compile code” ze śladu wydajności.

Jeśli zauważysz, że brakuje niektórych ważnych dla Ciebie wydarzeń, możesz przesłać opinię na stronie crbug.com/414330508.

Wycofanie opcji „Wyłącz próbki JavaScriptu”

Opcja Wyłącz próbki JavaScriptu w sekcji Skuteczność > Ustawienia przechwytywania została wycofana i usunięta ze względu na rzadkie zastosowanie i niską popularność.

Przed i po usunięciu opcji „Wyłącz próbki JavaScriptu” z „Ustawień przechwytywania”.

Problem w Chromium: 414734883.

Parametr dokładności geolokalizacji w sekcji Czujniki

W panelu Czujniki możesz teraz ustawić dokładność emulacji geolokalizacji. Dzięki temu możesz sprawdzić, jak aplikacja radzi sobie z różnymi poziomami dokładności GPS.

Przed i po dodaniu parametru „Dokładność” do emulacji geolokalizacji w panelu Czujniki.

Problem w Chromium: 40074843.

Ulepszenia panelu Elementy

Ta wersja wprowadza kilka ulepszeń w panelu Elementy.

Łatwiejsze debugowanie złożonych wartości CSS

Aby ułatwić debugowanie złożonych wartości CSS, na karcie Elementy > Style wyświetla się teraz w dymku po najechaniu kursorem:

  • Pełny łańcuch definicji zmiennych CSS, dzięki czemu nie musisz klikać wielu linków.
  • Szczegółowa ocena złożonych obliczeń CSS, która pozwala skuteczniej wykrywać błędy i lepiej zrozumieć sposób obliczania wartości.

Etykietka zawiera łańcuchy definicji w wielu wierszach, po jednym dla każdej definicji. Możesz rozwijać złożone obliczenia i najeżdżać kursorem na wartości, aby wyróżnić obliczoną wartość i prześledzić ją aż do początkowego wyrażenia.

Przed i po dodaniu etykietki z łańcuchami definicji i rozwijanymi złożonymi obliczeniami.

Problem w Chromium: 396080529.

@function w sekcji Elementy > Style

W ramach przygotowań do obsługi @function w Chrome na karcie Elementy > Style nazwy funkcji niestandardowych są teraz połączone z ich definicjami w osobnej sekcji.

Przed i po połączeniu nazwy funkcji niestandardowej z odpowiednią sekcją.

Ulepszenia panelu Sieć

Ta wersja wprowadza kilka ulepszeń w panelu Sieć.

has-request-header filtr

Panel Sieć obsługuje teraz filtr has-request-header, który umożliwia filtrowanie według konkretnej nazwy nagłówka żądania.

Widok przed i po dodaniu filtra „has-request-header” do panelu Sieć.

Problem w Chromium: 397481040.

Direct Sockets w izolowanych aplikacjach internetowych

W panelu Sieć możesz teraz monitorować ruch izolowanych aplikacji internetowych (IWA) za pomocą TCPSocket, UDPSocket (w trybie przychodzącym) i UDPSocket (w trybie połączonym).

Aby to zrobić, w tabeli wybierz directscoket połączenie obok zwykłych żądań, a na karcie Wiadomości wybierz wiadomość.

Przed i po dodaniu obsługi gniazd bezpośrednich w aplikacjach internetowych do panelu Sieć.

Izolowane aplikacje internetowe (IWA) zapewniają model zabezpieczeń o wysokim poziomie zaufania w przypadku aplikacji internetowych. Więcej informacji znajdziesz w artykule Pierwsze kroki z izolowanymi aplikacjami internetowymi. Możesz też wypróbować aplikację demonstracyjną, która implementuje interfejs Direct Sockets API.

Różne wyróżnione informacje

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

  • Aplikacja > Pamięć: usunęliśmy przestarzałą opcję Web SQL (crbug.com/412707590).
  • Elementy:
  • Sieć: usunęliśmy nagłówek HTTP Referrer-Policy z opcji Skopiuj jako pobieranie, ponieważ jest to nagłówek odpowiedzi służący do kontrolowania działania przeglądarki, a nie instrukcja po stronie klienta (crbug.com/413904896).
  • Wydajność: usunięto ostrzeżenia o „długich zadaniach” z wątków roboczych, ponieważ nie blokują one wątków głównych (crbug.com/40248589).
  • Problemy Raporty:
    • czy zablokowane są zasoby podejrzane o śledzenie użytkowników.
    • łagodzenie śledzenia przekierowań niezależnie od tego, czy podczas przekierowania uzyskują dostęp do pamięci.
  • Ułatwienia dostępu Te elementy w Elementy > Style można teraz zaznaczać za pomocą klawiatury:

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.