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 do niego przechodzić, włącz ustawienie Grupuj pliki według autora / wdrożenia.

Chromium bug: 1352488

Ulepszone zrzuty 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 opowiada tylko część historii.

Na przykład otwórz tę prezentację i kliknij przycisk zwiększania głośności. 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 zrzut stosu pokazuje tylko przekroczenie limitu czasu. Nie pokazuje „podstawowej przyczyny” operacji.

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

Za kulisami wprowadziliśmy w Narzędziach deweloperskich nową funkcję „Asynchroniczne tagowanie stosów”. 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 platforma, której używasz, obsługuje planowanie i wykonanie asynchroniczne. W takim przypadku to framework decyduje o użyciu interfejsu API, więc nie musisz się o to martwić. (np.Angular wprowadził te zmiany).

Chromium: błąd 1334585

Automatycznie ignoruj znane skrypty innych firm

Szybciej wykrywaj problemy w kodzie podczas debugowania, ponieważ Narzędzia deweloperskie automatycznie dodają teraz 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ł. Informacje te muszą podać twórcy frameworków i bundlers. Zobacz studium przypadku: lepsze debugowanie Angular dzięki narzędziom deweloperskim.

Jeśli wolisz zawsze wyświetlać pełne ścieżki wywołań, 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

Ulepszona kolejka 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ń pokazuje tylko ramki z 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.

Błąd w Chromium: 1352488

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

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

Otwórz tę prezentację. W panelu Źródła. node_modules i webpack to skrypty zewnętrzne. Kliknij menu z 3 kropkami i wybierz Ukryj źródła na liście ignorowanych, aby ukryć je na panelu.

Chromium bug: 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 ignorowane 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ść

Nowa ścieżka Interakcje w panelu Skuteczność pozwala wizualizować interakcje i znajdować potencjalne problemy z czasem reakcji.

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

Błąd w Chromium: 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ąc z tych informacji o czasach, możesz poznać i zidentyfikować możliwości poprawy skuteczności LCP.

Chromium bug: 1351735

Automatyczne generowanie domyślnej nazwy nagrań w panelu Dyktafon

Panel Nagrywarka automatycznie generuje teraz nazwy nowych nagrań.

Chromium: błąd 1351383

Inne wyróżnione informacje

• Wcześniej rozszerzenia Dyktafonu nie wyświetlały się od czasu do czasu w panelu Dyktafon. (1351416)
• W panelu Style 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 powodujące przeciążenie układu jako potencjalne główne przyczyny przesunięć układu. (1343019).
• Możesz wyświetlić ścieżkę krytyczną czcionek internetowych LCP w panelu Statystyki skuteczności. (1350390)

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.

• Prześlij nam swoje 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.
• 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.