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

Jecelyn Yeen

Uruchom ponownie ramkę podczas debugowania

Funkcja Uruchom ponownie ramkę powraca! Po wstrzymaniu w jakimś miejscu w funkcji możesz ponownie uruchomić poprzedni kod. Wcześniej ta funkcja została wycofana i usunięta w Chrome 92 ze względu na problemy ze stabilnością.

W tym przykładzie debuger został początkowo wstrzymany w punkcie przerwania (wiersz 343) w pobliżu końca funkcji toggleColorScheme. Aby ponownie rozpocząć debugowanie od początku funkcji toggleColorScheme, w panelu Debugger rozwiń sekcję Stos wywołania, kliknij toggleColorScheme prawym przyciskiem myszy i wybierz Restart frame (Restartuj ramkę).

Uruchom ponownie ramkę podczas debugowania

Problem z Chromium: 1303521

Opcje powtarzania w zwolnionym tempie w panelu Dyktafon

Możesz teraz odtwarzać ścieżki użytkownika z niższą prędkością – wolno, bardzo wolno i bardzo wolno. Te opcje umożliwiają lepsze obserwowanie każdego kroku na ekranie.

Otwórz panel Nagrywarka i rozpocznij nowe nagrywanie. Po zakończeniu nagrywania kliknij przycisk menu Odtwórz. Wybierz prędkość, aby rozpocząć odtwarzanie.

Opcje powtarzania w zwolnionym tempie w panelu Dyktafon

Problem z Chromium: 1306756

Tworzenie rozszerzenia dla panelu Dyktafon

Możesz teraz tworzyć lub instalować rozszerzenie Chrome, aby eksportować skrypty odtwarzania w ulubionym formacie. Aby dowiedzieć się, jak utworzyć rozszerzenie, zapoznaj się z dokumentacją interfejsu API rozszerzenia Recorder.

Aby zainstalować rozszerzenie demonstracyjne, wykonaj te czynności opisane w dokumentacji.

niestandardowe rozszerzenie panelu Dyktafon

Problem z Chromium: 1325751

Grupowanie plików według autora / wdrożenia w panelu Źródła

Aby uporządkować pliki w panelu Źródła, włącz nową opcję Grupuj pliki według autora / wdrożenia. Podczas tworzenia aplikacji internetowych za pomocą frameworków (np. React, Angular) poruszanie się po plikach źródłowych może być utrudnione z powodu zminiaturyzowanych plików wygenerowanych przez narzędzia do kompilacji (np. Webpack, Vite).

Zaznaczenie tego pola pozwala grupować pliki w 2 kategorie, aby szybciej je znajdować:

  • Autor. Podobnie jak pliki źródłowe w Twoim środowisku IDE. Narzędzia deweloperskie generują te pliki na podstawie map źródeł (dostarczonych przez narzędzia do kompilacji).
  • Wdrożono. Rzeczywiste pliki odczytywane przez przeglądarkę. Zwykle są one zminifikowane.

Wypróbuj to samodzielnie, korzystając z prezentacji React.

Grupowanie plików według autora / wdrożenia w panelu Źródła

Problem z Chromium: 960909

Nowy wskaźnik Czas trwania sesji użytkownika w panelu Statystyki wydajności

Wizualizuj znaczniki performance.measure() w nagraniu za pomocą nowego śladu Czasy użytkownika w panelu Statystyki skuteczności.

Na przykład ta strona internetowa używa metody performance.measure() do obliczania upływu czasu wczytywania tekstu.

Gdy zaczniesz mierzyć wczytywanie strony, w nagraniu pojawi się ścieżka Czasy użytkownika. Kliknij element Czasy, aby wyświetlić jego szczegóły w panelu bocznym.

Śledzenie czasu działań użytkowników w panelu Statystyki wydajności

Problem z Chromium: 1322808

Pokaż przypisany element

Elementy w składach w panelu Elementy mają nową plakietkę slot. Podczas debugowania problemów z układem możesz użyć tej funkcji, aby szybciej zidentyfikować element, który wpływa na układ węzła.

Ten przykład zawiera karty z kilkoma nazwanymi slotami. Sprawdź slot person-occupation karty, klikając obok niego plakietkę slot, aby wyświetlić przypisany slot.

Dowiedz się, jak używać elementów <template> i <slot>, aby utworzyć elastyczny szablon, który można wykorzystać do wypełniania modelu DOM cienia komponentu internetowego.

Pokaż przypisany element

Problem z Chromium: 1018906

Symulowanie równoczesności sprzętu w przypadku nagrań z testów wydajności

Nowe ustawienie Równoczesność sprzętowa w panelu Wydajność umożliwia deweloperom skonfigurowanie wartości raportowanej przez navigator.hardwareConcurrency.

Niektóre aplikacje używają navigator.hardwareConcurrency do kontrolowania stopnia równoległości aplikacji, na przykład do kontrolowania rozmiaru puli wątków pthread w Emscripten. Dzięki tej funkcji deweloperzy mogą testować wydajność aplikacji z różną liczbą rdzeni.

Symulowanie równoczesności sprzętu w przypadku nagrań z testów wydajności

Problem z Chromium: 1297439

Podgląd wartości niebędącej kolorem podczas automatycznego uzupełniania zmiennych CSS

Podczas automatycznego uzupełniania zmiennych CSS DevTools wypełnia teraz zmienną niekolorową wartością, aby można było wyświetlić podgląd zmian, jakie ta wartość wprowadzi w węźle.

Podgląd wartości niekolorowej podczas automatycznego wypełniania zmiennych CSS

Problem z Chromium: 1285091

Określanie ramek blokujących w sekcji pamięci podręcznej stanu strony internetowej

Panel Pamięć podręczna wstecz/wprzód w panelu Aplikacja zawiera nową sekcję ramki, która pomoże Ci zidentyfikować ramki blokujące, które mogą uniemożliwiać stronie spełnianie wymagań dotyczących pamięci podręcznej wstecz/wprzód.

Określanie ramek blokujących w sekcji pamięci podręcznej stanu strony internetowej

Problem z Chromium: 1288158

Ulepszone sugestie autouzupełniania w przypadku obiektów JavaScriptu

Właściwości obiektu JavaScript są teraz wyświetlane w tym porządku:

  1. Własne właściwości wyliczalne
  2. mieć własne właściwości niewyliczalne;
  3. Dziedziczone właściwości wyliczalne
  4. Dziedziczone właściwości niewyliczalne

Wcześniej deweloperzy mieli trudności ze znalezieniem odpowiednich usług, ponieważ sugestia faworyzowała tylko własne usługi kosztem usług dziedziczonych, a wszystkie usługi dziedziczone miały równy priorytet.

Ulepszone sugestie autouzupełniania w przypadku obiektów JavaScriptu

Problem z Chromium: 1299241

Ulepszenia map źródłowych

Oto kilka poprawek map źródeł, które poprawiają ogólne wrażenia podczas debugowania:

  • Punkty przecięcia działają teraz w adnotacjach <script> z adresem URL źródła.
  • Debuger rozwiązuje teraz zmienne w zakresie bloku w widoku Zakres za pomocą map źródłowych.Rozwiązywanie zmiennych ograniczonych do bloku
  • Debuger rozwiązuje teraz zmienne w funkcjach strzałek w widoku Zakres z mapami źródłowymi. Rozwiązuje zmienne w funkcjach strzałek

Problemy z Chromium: 1329113, 1322115

Inne najciekawsze momenty

Oto kilka istotnych poprawek w tej wersji:

  • Naprawiono ustawienie Autouzupełnianie w panelu Źródła. Wcześniej autouzupełnianie było zawsze włączone, nawet jeśli ustawienie było wyłączone. (1323286)
  • Zaktualizowaliśmy kartę Plik manifestu w panelu Aplikacja, aby analizować najnowszy format schematu kolorów. (1318305)
  • W panelu Statystyki wydajności ulepszyliśmy sugestie dotyczące problemów z blokowaniem renderowania (<script async>). Wcześniej w Narzędziach deweloperskich sugerowano add async attribute to the script tag, mimo że skrypt był już oznaczony jako asynchroniczny. (1334096)
  • Panel Statystyki skuteczności wykrywa teraz iframe’y jako potencjalne przyczyny zmian układu. Szczegóły iframe możesz wyświetlić w panelu Szczegóły. (1328873)
  • Gdy w menu poleceń klikniesz Otwórz plik, pliki autoryzowane (pliki wygenerowane przez mapy źródeł) są teraz wyżej w hierarchii, dzięki czemu wyświetlają się nad skompilowanymi skryptami o podobnej nazwie. (1312929)

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. 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.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.