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

Jecelyn Yeen

Grupuj pliki według autora / wdrożenia w panelu Źródła

Opcja Grupowanie plików według autora / wdrożenia jest teraz widoczna w menu z 3 kropkami. Wcześniej wyświetlała się ona bezpośrednio w panelu nawigacji.

Otwórz tę prezentację. Włącz ustawienie Grupuj pliki według autora / wdrożonego, aby najpierw wyświetlić pierwotny kod źródłowy (Autorowany) i szybciej do nich przejść.

Błąd w Chromium: 1352488

Ulepszone zrzuty stosu

Połączone zrzuty stosu dla operacji asynchronicznych

Jeśli niektóre operacje są zaplanowane asynchronicznie, zrzuty stosu w Narzędziach deweloperskich przedstawiają 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 „głównej przyczyny” operacji.

Po najnowszych zmianach w Narzędziach deweloperskich wyświetlana jest operacja zapoczątkowana przez zdarzenie onClick w komponencie przycisku, następnie z funkcji increment, a następnie przez przekroczenie limitu czasu.

Za kulisami wprowadziliśmy w Narzędziach deweloperskich nową funkcję „Asynchroniczne tagowanie stosów”. Możesz opowiedzieć całą operację, łącząc obie części kodu asynchronicznego ze sobą za pomocą nowej metody console.createTask(). Więcej informacji znajdziesz w sekcji Nowoczesne debugowanie w Narzędziach deweloperskich.

Czy to 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 od platformy należy użycie interfejsu API – nie musisz się tym przejmować. (np.usługa Angular wdrożyła te zmiany).

Błąd w Chromium: 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 tę prezentację i kliknij przycisk zwiększania głośności. Rozwiń komunikat o błędzie w Konsoli. Zrzut stosu pokazuje 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 zrzut stosu zawierał skrypty innych firm, takie jak zone.js i core.mjs. To nie jest Twój kod źródłowy. Zostały wygenerowane przez pakiety pakietów (np. Webpack) lub platformy (np. Angular). Znalezienie głównej przyczyny błędu trwało dłużej.

W rzeczywistości Narzędzia deweloperskie ignoruje skrypty innych firm, wykorzystując nową właściwość x_google_ignoreList w mapach źródłowych. Te informacje muszą być dostarczane przez platformy i pakiety SDK. Zobacz studium przypadku: lepsze debugowanie Angular dzięki narzędziom deweloperskim.

Opcjonalnie, jeśli wolisz zawsze wyświetlać pełne zrzuty stosu, możesz wyłączyć to ustawienie w sekcji Ustawienia > Lista ignorowanych > Automatycznie dodawaj znane skrypty innych firm do listy ignorowanych.

Błąd Chromium: 1323199

Ulepszony stos wywołań podczas debugowania

Ustawienie Automatycznie dodawaj znane skrypty innych firm do listy ignorowanych sprawia, że stos wywołań pokazuje teraz tylko klatki, które są istotne dla Twojego kodu.

Otwórz tę prezentację i ustaw punkt przerwania na funkcji increment() w app.component.ts. Aby aktywować punkt przerwania, kliknij na stronie przycisk zwiększania. Stos wywołań pokazuje tylko ramki z kodu (np. app.component.ts i button.component.ts).

Aby wyświetlić wszystkie klatki, włącz opcję Pokaż klatki z listy ignorowanych. Wcześniej w Narzędziach deweloperskich domyślnie wyświetlały się wszystkie klatki.

Błąd w Chromium: 1352488

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

Włącz opcję Ukryj źródła ignorowane, aby ukryć nieistotne pliki w panelu Nawigacja. Dzięki temu możesz się skupić 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 ignorowane źródła, aby ukryć je w panelu.

Błąd w Chromium: 1352488

Ukrywanie plików z listy ignorowanych w menu poleceń

Ustawienie Ukryj źródła z listy ignorowanych pozwala szybciej odnaleźć plik za pomocą menu poleceń. Do tej pory wyszukiwanie plików w menu poleceń zwracało pliki innych firm, które mogą być dla Ciebie nieistotne.

Na przykład włącz ustawienie ukryj źródła ignorowane i kliknij menu z 3 kropkami. Wybierz Otwórz plik. Wpisz „ton”, aby wyszukać komponenty przycisku. Wcześniej wyniki obejmują pliki z usługi node_modules. Jeden z plików node_modules był nawet wyświetlany jako pierwszy wynik.

Błąd w Chromium: 1336604

Nowa ścieżka interakcji w panelu Skuteczność

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

Na przykład rozpocznij nagrywanie wydajności na tej stronie demonstracyjnej. Kliknij kawę i zatrzymaj nagrywanie. Na ścieżce Interakcje wyświetlają się 2 interakcje. Obie interakcje mają te same identyfikatory, co wskazuje, że są one wywoływane w wyniku tej samej interakcji użytkownika.

Błąd w Chromium: 1347390

Zestawienie czasu LCP w panelu Statystyki wydajności

Panel Statystyki wydajności wyświetla teraz zestawienie okresów w przypadku największego wyrenderowania treści (LCP). Wykorzystaj te informacje o czasach, aby zrozumieć i zidentyfikować możliwość poprawy wyników LCP.

Błąd w Chromium: 1351735

Automatycznie generuj domyślną nazwę nagrań w panelu Dyktafon

Panel Dyktafon automatycznie generuje nazwy nowych nagrań.

Błąd Chromium: 1351383

Różne wyróżnienia

• Wcześniej co jakiś czas w panelu Dyktafon nie pojawiały się rozszerzenia Dyktafonu. (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 określ skrypty powodujące wahania 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

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.