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 wyświetlana w menu z 3 kropkami. Wcześniej wyświetlał się bezpośrednio w panelu nawigacyjnym.

Otwórz demo. Aby najpierw wyświetlać oryginalny kod źródłowy (Authored) i szybciej się po nim poruszać, włącz ustawienie Grupuj pliki według autora / rozmieszczenia.

Chromium: błąd 1352488

Ulepszone śledzenie stosu

Połączone zrzuty stosu w przypadku operacji asynchronicznych

Gdy niektóre operacje są zaplanowane do wykonania asynchronicznie, ścieżki stosu w Narzędziach deweloperskich podają teraz „pełną historię” operacji. Wcześniej mówiły one tylko część historii.

Otwórz na przykład tę prezentację i kliknij przycisk zwiększania. Rozwiń komunikat o błędzie w Konsoli. W naszym kodzie źródłowym operacja ta obejmuje asynchroniczną operację timeout.

// application.component.ts

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

Wcześniej zrzut stosu pokazywał tylko operację przekroczenia limitu czasu. Nie pokazuje ona „podstawowej przyczyny” operacji.

Po wprowadzeniu najnowszych zmian narzędzia DevTools pokazują, że operacja pochodzi ze zdarzenia onClick w komponencie przycisku, a potem z funkcji increment, po której następuje operacja limitu czasu.

W ramach tej funkcji w DevTools wprowadzono nową funkcję „Tagowanie stosu asynchronicznego”. Możesz opisać całą operację, łą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.

Brzmi skomplikowanie? W żadnym wypadku. W większości przypadków harmonogramowanie i wykonanie asynchroniczne obsługuje używane przez Ciebie środowisko. W takim przypadku to framework decyduje o użyciu interfejsu API, więc nie musisz się o to martwić. (np.Angular wprowadził te zmiany).

Błąd w Chromium: 1334585

Automatyczne ignorowanie znanych skryptów innych firm

Podczas debugowania możesz szybciej wykrywać problemy w kodzie, ponieważ DevTools automatycznie dodaje 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 są to Twoje kody źródłowe, ponieważ są generowane przez narzędzia do tworzenia pakietów (np. webpack) lub frameworki (np. Angular). Dłużej trwało znalezienie głównej przyczyny błędu.

W tle Narzędzia deweloperskie ignorują skrypty innych firm na podstawie nowej właściwości x_google_ignoreList w mapach źródeł. Te informacje muszą podać twórcy frameworków i bundlers. Zapoznaj się ze studium przypadku: ulepszone debugowanie Angulara za pomocą Narzędzi dla deweloperów.

Jeśli wolisz zawsze wyświetlać pełne ścieżki wywołań, możesz wyłączyć to ustawienie, korzystając z opcji Ustawienia > Lista ignorowanych > Automatycznie dodawaj znane skrypty innych firm do listy ignorowanych.

Błąd w Chromium: 1323199

Ulepszona funkcja sterowania stosem wywołań podczas debugowania

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

Otwórz to demo i ustaw punkt przerwania w funkcji increment() w pliku app.component.ts. Aby wywołać punkt kontrolny, kliknij przycisk zwiększania na stronie. 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 dla programistów wyświetlały domyślnie wszystkie ramki.

Chromium: błąd 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 demo. W panelu Źródła. Skrypty node_modules i webpack są skryptami innych firm. Kliknij menu z 3 kropkami i wybierz Ukryj źródła na liście ignorowanych, aby ukryć je na panelu.

Chromium: błąd 1352488

Ukrywanie plików z listy ignorowanych w menu poleceń

Dzięki ustawieniu ukrywanie źródeł 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 nie być dla Ciebie odpowiednie.

Na przykład włącz ustawienie Ukryj źródła na liście ignorowanych i kliknij menu z 3 kropkami. Kliknij Otwórz plik. Aby wyszukać komponenty przycisków, wpisz „ton”. Wcześniej wyniki zawierały pliki z node_modules, a jeden z plików node_modules był nawet wyświetlany jako pierwszy wynik.

Błąd w Chromium: 1336604

Nowy ślad Interakcje w panelu Skuteczność

Aby wizualizować interakcje i wykrywać potencjalne problemy z szybkością reakcji, użyj nowego wykresu Interakcje w panelu Skuteczność.

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

Chromium: błąd 1347390

Szczegóły dotyczące czasu LCP w panelu Statystyki wydajności

Panel Statystyki wydajności zawiera teraz podział na etapy czasu trwania największego wyrenderowania treści (LCP). Korzystaj z tych informacji o czasach, aby zrozumieć i zidentyfikować możliwości poprawy skuteczności LCP.

Chromium: błąd 1351735

Automatyczne generowanie domyślnej nazwy nagrań w panelu Dyktafon

Panel Nagrywarka automatycznie generuje nazwę dla nowych nagrań.

Chromium bug: 1351383

Inne najciekawsze momenty

• Wcześniej rozszerzenia Dyktafonu nie wyświetlały się od czasu do czasu w panelu Dyktafon. (1351416)
• Na panelu Styl wyświetla się teraz selektor kolorów dla właściwości stop-color elementu SVG <stop>. (1351096)
• W panelu Statystyki skuteczności zidentyfikuj skrypty, które powodują przeciążenie 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ż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.

• Przesyłaj opinie 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.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

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