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 widoczna w menu z 3 kropkami. Wcześniej był on widoczny bezpośrednio w panelu nawigacji.

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

Grupowanie plików według autora / wdrożenia

Błąd Chromium: 1352488

Ulepszone zrzuty stosu

Połączone zrzuty stosu operacji asynchronicznych

Gdy zaplanowano, aby niektóre operacje były wykonywane asynchronicznie, zrzuty stosu w Narzędziach deweloperskich zawierają teraz „pełną historię” operacji. Wcześniej to tylko część materiału.

Na przykład otwórz tę prezentację i kliknij przycisk zwiększania liczby. Rozwiń komunikat o błędzie w konsoli. W naszym kodzie źródłowym operacja zawiera asynchroniczną operację timeout.

// application.component.ts

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

Wcześniej zrzut stosu wyświetlał tylko operację przekroczenia limitu czasu. Nie wskazał on „głównej przyczyny” operacji.

Po najnowszych zmianach w Narzędziach deweloperskich wyświetlana jest teraz operacja zainicjowana przez zdarzenie onClick w komponencie przycisku, a następnie przez funkcję increment oraz czas oczekiwania.

Połączone zrzuty stosu operacji asynchronicznych

Za kulisami wprowadziliśmy w Narzędziach deweloperskich nową funkcję „Asynchronicznego tagowania stosu”. Możesz opowiedzieć całą historię działania, łą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.

Czy to brzmi skomplikowane? W żadnym wypadku. Najczęściej używane przez Ciebie platformy obsługują planowanie i wykonywanie asynchroniczne. W takim przypadku to od platformy zależy, czy ten interfejs API będzie używany, więc nie musisz się tym przejmować. (np. te zmiany zostały wprowadzone w Angular)

Błąd Chromium: 1334585

Automatycznie ignoruj znane skrypty innych firm

Narzędzia deweloperskie automatycznie dodają znane skrypty innych firm do listy ignorowanych fragmentów kodu, co pozwala szybciej zidentyfikować problemy z kodem.

Otwórz tę prezentację i kliknij przycisk zwiększania liczby. 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, lecz generowany przez pakiety (np. webpack) lub platformy (np. Angular). Ustalenie głównej przyczyny błędu trwało dłużej.

Automatycznie ignoruj znane skrypty innych firm w zrzucie stosu

W tle narzędzie deweloperskie ignoruje skrypty innych firm na podstawie nowej właściwości x_google_ignoreList w mapach źródeł. Platformy i pakiety muszą dostarczać te informacje. Zobacz Studium przypadku: Better Angular Debugging with DevTools (Studium przypadku: lepsze debugowanie Angular za pomocą Narzędzi deweloperskich).

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

Ustawienie automatycznego dodawania znanych skryptów innych firm do listy ignorowanych fragmentów kodu

Błąd Chromium: 1323199

Ulepszony stos wywołań podczas debugowania

Dzięki ustawieniu Automatycznie dodawaj znane skrypty innych firm do listy ignorowanych w stosie wywołań są teraz widoczne tylko ramki pasujące do Twojego kodu.

Otwórz tę prezentację i ustaw punkt przerwania dla funkcji increment() w app.component.ts. Na stronie kliknij przycisk zwiększania wartości, aby aktywować punkt przerwania. Stos wywołań zawiera tylko ramki z Twojego kodu (np. app.component.ts i button.component.ts).

Aby wyświetlić wszystkie klatki, włącz opcję Pokaż klatki, które są ignorowane. Wcześniej w Narzędziach deweloperskich domyślnie wyświetlały się wszystkie klatki.

Ulepszony stos wywołań podczas debugowania

Błąd Chromium: 1352488

Ukrywam źródła 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 tę prezentację. w panelu Źródła. node_modules i webpack to skrypty firm zewnętrznych. Kliknij menu z 3 kropkami i wybierz Ukryj źródła z listy ignorowanych, aby ukryć te źródła w panelu.

Ukrywam źródła z listy ignorowanych w panelu Źródła

Błąd Chromium: 1352488

Dzięki ustawieniu Ukryj źródła z listy ignorowanych możesz szybciej znaleźć plik za pomocą menu poleceń. Do tej pory wyszukiwanie w menu poleceń plików zwracało pliki innych firm, które mogą nie być dla Ciebie istotne.

Możesz na przykład włączyć ustawienie Ukryj źródła z listy ignorowanych i kliknąć menu z 3 kropkami. Wybierz Otwórz plik. Wpisz „ton”, aby wyszukać elementy przycisku. Wcześniej wyniki obejmują pliki z usługi node_modules, czyli jednego z plików usługi node_modules, które pojawiało się nawet w pierwszym wyniku.

Ukrywam pliki z listy ignorowanych w menu poleceń

Błąd Chromium: 1336604

Nowa ścieżka interakcji w panelu Skuteczność

Nowa ścieżka Interakcje w panelu Skuteczność pozwala wizualizować interakcje i wykrywać potencjalne problemy z reagowaniem.

Możesz na przykład rozpocząć nagrywanie występu na tej stronie demonstracyjnej. Kliknij kawę i zatrzymaj nagrywanie. Na ścieżce Interakcje widoczne są 2 interakcje. Obie interakcje mają takie same identyfikatory, co oznacza, że są wywoływane przez tę samą interakcję użytkownika.

Śledzenie interakcji w panelu Skuteczność

Błąd Chromium: 1347390

Zestawienie czasów LCP w panelu Statystyki skuteczności

Panel Statystyki wydajności zawiera teraz podział czasowy największego wyrenderowania treści (LCP). Wykorzystaj te informacje o terminach, aby dowiedzieć się, jak możesz poprawić wyniki LCP.

Zestawienie czasów LCP w panelu Statystyki skuteczności

Błąd Chromium: 1351735

Automatycznie generuj domyślne nazwy nagrań w panelu Dyktafon

Panel Dyktafon automatycznie generuje nazwy nowych nagrań.

Domyślna nazwa nagrań w panelu Dyktafon

Błąd Chromium: 1351383

Inne ważne informacje

  • Wcześniej rozszerzenia Dyktafonu nie od czasu do czasu wyświetlały się w panelu Dyktafon. (1351416)
  • W panelu Style pojawi się teraz selektor kolorów dla właściwości stop-color elementu SVG <stop>. (1351096)
  • W panelu Statystyki skuteczności znajdź skrypty, które powodują miażdżenie układu jako potencjalne przyczyny przesunięcia układu. (1343019).
  • Wyświetl ścieżkę krytyczną czcionek internetowych LCP w panelu Statystyki wydajności. (1350390).

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

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

101 Chrome

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

Subskrypcja Chrome 82 została anulowana.

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