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.

Błąd w Chromium: 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 dla deweloperów 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.

Dzięki najnowszym zmianom DevTools pokazuje teraz, że operacja pochodzi ze zdarzenia onClick w komponencie przycisku, a potem z funkcji increment, po której następuje operacja limitu czasu.

W ramach 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 wywołania 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ższy czas poświęcony na 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 kolejka wywołań podczas debugowania

Dzięki ustawieniu Automatycznie dodawaj znane skrypty innych firm do listy ignorowanych stos wywołań pokazuje 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.

Błąd w Chromium: 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 z listy 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ść

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

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ł czasów 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: błąd 1351735

Automatyczne generowanie domyślnej nazwy nagrań w panelu Dyktafon

Panel Nagrywarka automatycznie generuje teraz nazwy 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 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, 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 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.

• 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.
• 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ędziech deweloperskich.