Nowości w Narzędziach deweloperskich: Chrome 127

Sofia Emelianova
Sofia Emelianova

Aby ułatwić debugowanie funkcji pozycjonowania kotwic, na karcie Style połączyliśmy teraz jawne identyfikatory kotwic i ukryte kotwy z odpowiednimi węzłami.

Połączenia jawne i niejawne przed i po połączeniu.

Dodatkowo wartość atrybutu popovertarget jest teraz powiązana z elementem popover w DOM.

Stan przed i po połączeniu popovertarget z elementem popover.

Ulepszenia panelu Źródła

Ta wersja zawiera kilka ulepszeń panelu Źródła.

Ulepszona funkcja „Nigdy nie wstrzymuj w tym miejscu”

Opcja „Nigdy nie wstrzymuj tutaj” zapobiega wstrzymywaniu Debugera w tym samym wierszu. Dzięki temu łatwiej jest pracować z nieistotnymi punktami przełamania, które są wywoływane wielokrotnie. Ta wersja rozszerza tę funkcję i obecnie działa w przypadku:

  • Wyjątki lub obietnice odrzucenia ze względu na funkcje wbudowane.
  • „Anulowanie” punktów przerwania DOM, żądań XHR i naruszeń zasad CSP.
  • W demontażu Wasm.

Zobacz, jak wygląda przepływ pracy:

Problem z Chromium: 40924349.

Nowe detektory zdarzeń przewijania

Lista Źródła > Punkty przerwania detektora zdarzeń > Kontrola zawiera dwa detektory powiązane z scroll-snap: scrollsnapchange i scrollsnapchanging. Te zdarzenia są wywoływane, gdy przewijasz kontener przewijania w sposób, który powoduje przyciąganie go do nowego elementu.

Zmiany przed i po dodaniu detektorów zdarzeń związanych z przewijaniem.

Problem z Chromium: 40286359.

Ulepszenia panelu Sieć

W tej wersji wprowadziliśmy kilka ulepszeń w panelu Sieć.

Zaktualizowane wstępnie ustawione wartości ograniczania wykorzystania sieci

W panelu Sieć zostaną zaktualizowane gotowe ustawienia ograniczania: Szybka 4G, Szybka 3G zmieniona na Wolna 4G oraz Zwolna 3G na 3G. Jest to bardziej zgodne z wstępnymi ustawieniami Lighthouse.

Ustawienia limitowania przepustowości sieci przed i po aktualizacji

Problem z Chromium: 342406608.

Informacje o mechanizmie Service Worker w polach niestandardowych formatu HAR

Podczas eksportowania dziennika sieci do formatu HAR możesz teraz zobaczyć informacje związane z usługami workera, w tym czasy, jako pola niestandardowe (z przedrostkiem podkreślenia). W logu możesz na przykład zobaczyć te nowe pola:

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

Problem z Chromium: 342406608.

Wysyłanie i odbieranie zdarzeń WebSocket w panelu Wydajność

Podobnie jak w przypadku innych zdarzeń WebSocket, panel Wydajność rejestruje teraz zdarzenia Wyślij wiadomość WebSocket i Odbierz wiadomość WebSocket oraz wyświetla je w śladzie wydajności. Na przykład:

Zdarzenie „Receive WebSocket Message” (Odbieranie wiadomości WebSocket) zarejestrowane w zrzucie wydajności.

Problem z Chromium: 40286129.

Różne wyróżnienia

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Ułatwienia dostępu: czytniki ekranu odczytują teraz treść wiadomości w Konsoli podczas przewijania dziennika za pomocą klawiszy strzałki w górę i w dół (344484979).
  • Źródła:
    • Strona: opcja menu Zapisz jako zapisuje teraz pliki modułu Wasm jako prawidłowe pliki binarne Wasm zamiast tekstu Base64 (40784130).
    • Stos wywołań: usunięto sufiks (async) z opisów ramki wywołania asynchronicznego, a ich wyróżnienie zmieniono z kursywy na pogrubienie (343750870).
  • Pamięć: z Podsumowania zrzutu sterty (340200025) usunęliśmy zbędne pole InternalNodes o zerowym rozmiarze.
  • Sieć: naprawiliśmy błąd, który uniemożliwiał podgląd treści odpowiedzi w odpowiedzi na żądania przesyłania w przypadku żądań, które właśnie się rozpoczęły, ale nie wywołały jeszcze zdarzenia responseReceived (338340752).
  • Skuteczność:
    • Statystyki selektora: dodano objaśniającą etykietę dla kolumny %-of-Slow-Path-Non-Matches (324282954).
    • Tryb konfiguracji ścieżek: przycisk Zakończ konfigurowanie ścieżek został przeniesiony w prawy dolny róg (345256274).
  • Konsola: rozwiązaliśmy problem, który powodował wyświetlanie wielu identycznych komunikatów konsoli podczas przechodzenia za pomocą przycisku Wstecz/Wprzód (40894153).
  • Ustawienia: dodano ikony pomocy obok wszystkich kart.

Pobierz kanały podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych i pomagają w wykrywaniu problemów w witrynie przed użytkownikami.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne informacje związane z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

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