Nowości w Narzędziach deweloperskich: Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

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.

łą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. Ułatwia to pracę 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 związanych z DOM, żądaniami/XHR i naruszeniem 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 przerwania 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.

Zmiany 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 wstępnie ustawione wartości 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). W logu możesz na przykład znaleźć 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 zawartość 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łów 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 długości 0.
  • Sieć: rozwiązaliśmy 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 wersji Canary, Dev lub Beta przeglądarki Chrome. 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ędziach deweloperskich.