Nowości w Narzędziach deweloperskich (Chrome 106)

Jecelyn Yeen

Grupowanie plików według autora / wdrożenia w panelu Źródła

Opcja Grupuj pliki według autora / wdrożenia jest teraz widoczna w menu z 3 kropkami. Wcześniej wyświetlał się bezpośrednio w panelu nawigacyjnym.

Otwórz tę wersję demonstracyjną. Włącz ustawienie Grupuj pliki według autora / wdrożenia, aby najpierw wyświetlić oryginalny kod źródłowy (Autor) i szybciej się po nim poruszać.

Błąd w Chromium: 1352488

Ulepszone zrzuty stosu

Połączone zrzuty stosu dla operacji asynchronicznych

Gdy niektóre operacje są zaplanowane do wykonania asynchronicznego, ślady stosu w Narzędziach deweloperskich zawierają teraz „pełną historię” operacji. Wcześniej podawano tylko część informacji.

Na przykład otwórz tę wersję demonstracyjną i kliknij przycisk zwiększania. Rozwiń komunikat o błędzie w konsoli. W naszym kodzie źródłowym operacja obejmuje asynchroniczną operację timeout.

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

Wcześniej śledzenie stosu pokazywało tylko operację przekroczenia limitu czasu. Nie pokazywał „głównej przyczyny” operacji.

Po wprowadzeniu najnowszych zmian Narzędzia deweloperskie pokazują, że operacja pochodzi ze zdarzenia onClick w komponencie przycisku, a następnie z funkcji increment i operacji przekroczenia limitu czasu.

W narzędziach deweloperskich wprowadziliśmy nową funkcję „Async Stack Tagging”. Możesz opowiedzieć całą historię operacji, łącząc obie części kodu asynchronicznego za pomocą nowej metody console.createTask(). Więcej informacji znajdziesz w artykule Nowoczesne debugowanie w Narzędziach deweloperskich.

Czy to brzmi skomplikowanie? W żadnym wypadku. Większość używanych przez Ciebie platform obsługuje planowanie i wykonywanie asynchroniczne. W takim przypadku interfejsu API używa platforma, więc nie musisz się tym martwić. (np. Angular wprowadził te zmiany)

Błąd w Chromium: 1334585

Automatyczne ignorowanie znanych skryptów innych firm

Szybciej identyfikuj problemy w kodzie podczas debugowania, ponieważ Narzędzia deweloperskie automatycznie dodają znane skrypty innych firm do listy ignorowanych.

Otwórz to demo i kliknij przycisk zwiększania. Rozwiń komunikat o błędzie w konsoli. Zrzut stosu zawiera tylko Twój kod (np. app.component.ts button.component.ts). Aby wyświetlić pełny zrzut stosu, kliknij Pokaż więcej ramek.

Wcześniej ślad stosu zawierał skrypty innych firm, takie jak zone.js i core.mjs. Nie jest to kod źródłowy, ale kod wygenerowany przez narzędzia do łączenia plików (np. webpack) lub platformy (np. Angular). Znalezienie głównej przyczyny błędu zajęło więcej czasu.

W tle Narzędzia deweloperskie ignorują skrypty innych firm na podstawie nowej właściwości x_google_ignoreList w mapach źródłowych. Frameworki i programy do łączenia plików muszą podawać te informacje. Zobacz studium przypadku: lepsze debugowanie Angulara za pomocą Narzędzi deweloperskich.

Jeśli wolisz zawsze wyświetlać pełne ślady stosu, możesz wyłączyć to ustawienie, klikając Ustawienia > Lista ignorowanych > Automatycznie dodawaj znane skrypty innych firm do listy ignorowanych.

Błąd w Chromium: 1323199

Ulepszony stos wywołań podczas debugowania

Dzięki ustawieniu Automatycznie dodawaj znane skrypty innych firm do listy ignorowanych stos wywołań zawiera teraz tylko ramki, które są istotne dla Twojego kodu.

Otwórz tę wersję demonstracyjną i ustaw punkt przerwania w funkcji increment() w pliku app.component.ts. Kliknij przycisk zwiększania na stronie, aby wywołać punkt przerwania. Stos wywołań zawiera tylko ramki z Twojego kodu (np. app.component.ts i button.component.ts).

Aby wyświetlić wszystkie ramki, włącz opcję Pokaż ramki z listy ignorowanych. Wcześniej Narzędzia deweloperskie domyślnie wyświetlały wszystkie ramki.

Błąd w Chromium: 1352488

Ukrywanie źródeł z listy ignorowanych w panelu Źródła

Włącz opcję Ukryj źródła z listy ignorowanych, aby ukryć nieistotne pliki w panelu Nawigacja. Dzięki temu możesz skupić się tylko na kodzie.

Otwórz tę wersję demonstracyjną. W panelu Źródła. Skrypty node_modules i webpack to skrypty firm zewnętrznych. Kliknij menu z 3 kropkami i wybierz ukryj źródła z listy ignorowanych, aby ukryć je w panelu.

Błąd w Chromium: 1352488

Ukrywanie plików z listy ignorowanych w menu poleceń

Dzięki ustawieniu Ukryj źródła z listy ignorowanych możesz szybciej znaleźć plik za pomocą menu poleceń. Wcześniej wyszukiwanie plików w menu poleceń zwracało pliki innych firm, które mogły być dla Ciebie nieistotne.

Na przykład włącz ustawienie ukryj źródła z listy ignorowanych i kliknij menu z 3 kropkami. Kliknij Otwórz plik. Wpisz „ton”, aby wyszukać komponenty przycisków. Wcześniej wyniki obejmowały pliki z node_modules, a jeden z nich node_modules był nawet wyświetlany jako pierwszy.

Błąd w Chromium: 1336604

Nowa ścieżka Interakcje w panelu Wydajność

Użyj nowej ścieżki Interakcje w panelu Skuteczność, aby wizualizować interakcje i wykrywać potencjalne problemy z reaktywnością.

Możesz na przykład rozpocząć nagrywanie wydajności na tej stronie demonstracyjnej. Kliknij kawę i zatrzymaj nagrywanie. Na ścieżce Interakcje widać 2 interakcje. Obie interakcje mają te same identyfikatory, co oznacza, że są wywoływane przez tę samą interakcję użytkownika.

Błąd w Chromium: 1347390

Podział czasów LCP w panelu Statystyki wydajności

Panel Statystyki wydajności zawiera teraz szczegółowe informacje o czasach największego wyrenderowania treści (LCP). Korzystaj z tych informacji o czasach, aby zrozumieć i określić możliwości poprawy skuteczności LCP.

Błąd w Chromium: 1351735

Automatyczne generowanie domyślnej nazwy nagrań w panelu Dyktafon

Panel Dyktafon automatycznie generuje teraz nazwę nowych nagrań.

Błąd w Chromium: 1351383

Różne wyróżnione informacje

• Wcześniej rozszerzenia Dyktafonu czasami nie wyświetlały się w panelu Dyktafon. (1351416)
• W panelu Style jest teraz dostępny selektor kolorów dla właściwości stop-color elementu SVG <stop>. (1351096)
• W panelu Statystyki skuteczności możesz zidentyfikować skrypty powodujące przesunięcia układu jako potencjalne główne przyczyny przesunięć układu. (1343019)
• Wyświetlanie ścieżki krytycznej dla czcionek internetowych LCP w panelu Statystyki wydajności. (1350390)

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.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.