Nowości w Narzędziach deweloperskich: Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

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

łączyć jawne i domyślne kotwy przed i po linkowaniu;

Dodatkowo wartość atrybutu popovertarget jest teraz połączona z odpowiednim 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 wstrzymywać tutaj” pozwala zapobiec wielokrotnemu wstrzymywaniu Debugera na 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 działa teraz w przypadku:

  • wyjątki lub odrzucenia obietnic z wbudowanych funkcji.
  • „Anulowanie” punktów przerwania DOM, żądań XHR i naruszeń zasad CSP.
  • W rozpakowaniu Wasm.

Zobacz, jak działa ten proces:

Problem z Chromium: 40924349.

Nowe detektory zdarzeń przeskakiwania podczas przewijania

Na liście Źródła > Punkty kontrolne detektora zdarzeń > Kontrola znajdują się 2 detektory związane z zawijaniem: scrollsnapchange i scrollsnapchanging. Te zdarzenia są wywoływane, gdy przewijasz kontener przewijania w sposób, który powoduje przyciąganie go do nowego elementu.

Zdjęcie przed i po dodaniu detektorów zdarzeń związanych z przewijaniem.

Problem z Chromium: 40286359.

Ulepszenia panelu Sieć

Ta wersja zawiera kilka ulepszeń panelu Sieć.

Zaktualizowane gotowe ustawienia ograniczania wykorzystania sieci

W panelu Sieć dostępne są zaktualizowane wstępnie ustawione wartości ograniczania przepustowości: nowa opcja Szybka sieć 4G, zmieniona nazwa Szybka sieć 3G na Wolna sieć 4G oraz zmieniona nazwa Wolna sieć 3G na 3G. Jest to bardziej zgodne z wstępnymi ustawieniami Lighthouse.

Ustawienia wstępne ograniczania przepustowości sieci przed i po aktualizacji

Problem z Chromium: 342406608.

Informacje o usługach w niestandardowych polach w formacie 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). Możesz na przykład znaleźć w logu 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 „Odebranie wiadomości WebSocket” zarejestrowane w śladzie wydajności.

Problem z Chromium: 40286129.

Inne najciekawsze momenty

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 teraz zapisuje 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 zrzutu pamięci Podsumowanie (340200025) usunięto niepotrzebne InternalNodes o rozmiarze 0.
  • Sieć: rozwiązano błąd uniemożliwiający wyświetlanie podglądu treści strumieniowej w przypadku żądań, które dopiero się rozpoczęły, ale nie otrzymał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.

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.