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ść.

Grupuj pliki według autora / wdrożenia

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.

Połączone zrzuty stosu dla operacji asynchronicznych

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). Kliknij Pokaż więcej ramek, aby wyświetlić pełny zrzut stosu.

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.

Automatycznie ignoruj w zrzucie stosu znane skrypty innych firm

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.

Ustawienie automatycznego dodawania znanych skryptów 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.

Ulepszony stos wywołań podczas debugowania

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.

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

Błąd w Chromium: 1352488

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.

Ukrywanie plików z listy ignorowanych w menu poleceń

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.

Śledzenie interakcji w panelu Skuteczność

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.

Zestawienie czasu LCP w panelu Statystyki wydajności

Błąd w Chromium: 1351735

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

Panel Dyktafon automatycznie generuje nazwy nowych nagrań.

Domyślna nazwa nagrań w panelu Dyktafon

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

Skorzystaj z 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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59