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

Jecelyn Yeen

Uruchom ponownie ramkę podczas debugowania

Funkcja Uruchom ponownie ramkę znów jest dostępna. Poprzedni kod możesz ponownie uruchomić w miejscu, w którym funkcja jest wstrzymana. Wcześniej ta funkcja została wycofana i usunięta w Chrome 92 z powodu problemów ze stabilnością.

W tym przykładzie debuger początkowo wstrzymał działanie w punkcie przerwania (wiersz 343) przy końcu funkcji toggleColorScheme. Aby ponownie uruchomić debugowanie od początku funkcji toggleColorScheme, w panelu Debuger rozwiń sekcję Stos wywołań, kliknij prawym przyciskiem myszy ikonę toggleColorScheme i wybierz Uruchom ponownie ramkę.

Problem z Chromium: 1303521

Opcje powolnego odtwarzania w panelu Dyktafon

Teraz możesz ponownie odtwarzać ruch użytkownika z mniejszą prędkością – wolno, bardzo wolno i bardzo wolno. Dzięki tym opcjom możesz lepiej obserwować na ekranie powtórzenie każdej czynności.

Otwórz panel Dyktafon i rozpocznij nowe nagranie. Po zakończeniu nagrywania kliknij przycisk Odtwórz ponownie. Wybierz szybkość, aby rozpocząć ponowne odtwarzanie.

Problem w Chromium: 1306756

Tworzenie rozszerzenia panelu Dyktafon

Teraz możesz utworzyć lub zainstalować rozszerzenie do Chrome, aby eksportować skrypty ponownego odtwarzania w swoim ulubionym formacie. Aby dowiedzieć się, jak go utworzyć, zapoznaj się z dokumentacją interfejsu API rozszerzenia Recorder.

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

Problem z Chromium: 1325751

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

Włącz nową opcję Grupuj pliki według autora / wdrożonego, aby uporządkować pliki w panelu Źródła. Podczas tworzenia aplikacji internetowych za pomocą platform (np. React czy Angular) poruszanie się po plikach źródłowych może być trudne ze względu na zminimalizowane pliki wygenerowane przez narzędzia do kompilacji (np. Webpack czy Vite).

Za pomocą tego pola wyboru możesz pogrupować pliki w 2 kategorie, aby przyspieszyć wyszukiwanie:

• Autor. Są podobne do plików źródłowych, które wyświetlasz w 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 te pliki są zminimalizowane.

Przekonaj się, jak działa ta wersja demonstracyjna z reakcji.

Problem z Chromium: 960909

Nowa ścieżka czasu działań użytkownika w panelu Statystyki skuteczności

Dzięki nowej ścieżce Czas użytkownika w panelu Statystyki skuteczności możesz wizualizować znaczniki performance.measure() w nagraniu.

Na przykład ta strona internetowa wykorzystuje metodę performance.measure() do obliczania czasu wczytywania tekstu.

Gdy rozpoczniesz pomiar wczytywania strony, w nagraniu pojawi się ścieżka Czas użytkownika. Kliknij punkt czasowy, aby wyświetlić jego szczegóły w panelu bocznym.

Problem w Chromium: 1322808

Pokazywanie przypisanego boksu do elementu

Elementy w boksie w panelu Elementy mają nową plakietkę slot. Podczas debugowania problemów z układem ta funkcja pozwala szybciej zidentyfikować element, który wpływa na układ węzła.

Ten przykład zawiera karty z kilkoma nazwanymi boksami. Sprawdź gniazdo person-occupation karty i kliknij znajdującą się obok niej plakietkę slot, aby wyświetlić przypisane do niej miejsce.

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

Problem z Chromium: 1018906

Symulowanie równoczesności sprzętu na potrzeby nagrań wydajności

Nowe ustawienie Równoczesność sprzętu w panelu Wydajność umożliwia deweloperom konfigurowanie wartości zgłaszanej przez navigator.hardwareConcurrency.

Niektóre aplikacje używają funkcji navigator.hardwareConcurrency do sterowania stopniem równoległości działania, na przykład do kontrolowania rozmiaru puli pthread Emscripten. Dzięki tej funkcji deweloperzy mogą testować wydajność aplikacji, korzystając z różnej liczby rdzeni.

Problem z Chromium: 1297439

Podgląd wartości innych niż kolor podczas automatycznego uzupełniania zmiennych CSS

Podczas automatycznego uzupełniania zmiennych CSS Narzędzia deweloperskie wypełniają zmienną inną niż kolor sensowną wartością, dzięki czemu możesz zobaczyć podgląd zmiany, jaką wartość wywoła w węźle.

Problem z Chromium: 1285091

Identyfikuj blokujące ramki w panelu pamięci podręcznej stanu strony internetowej

Okienko Pamięć podręczna stanu strony internetowej w panelu Aplikacja zawiera nową sekcję ramek, która ułatwia identyfikowanie blokujących ramek, które mogą uniemożliwiać witrynie korzystanie z pamięci podręcznej stanu strony internetowej.

Problem w Chromium: 1288158

Ulepszone sugestie autouzupełniania obiektów JavaScript

Autouzupełnianie właściwości obiektów JavaScript jest teraz wyświetlane w następującej kolejności:

1. Własne właściwości wyliczane
2. Własne właściwości, których nie można wyliczyć
3. Dziedziczone właściwości wymienne
4. Dziedziczone właściwości niewyliczane

Wcześniej deweloperzy mogli mieć problem ze znalezieniem odpowiednich usług, ponieważ w sugestii faworyzowane były tylko usługi własne, a wszystkie odziedziczone właściwości miały taki sam priorytet.

Problem z Chromium: 1299241

Ulepszenia map źródłowych

Oto kilka poprawek dotyczących map źródeł, które poprawiają ogólne działanie debugowania:

• Punkty przerwania działają teraz w tekście <script> z adnotacjami sourceURL.
• Debuger rozpoznaje teraz zmienne o zakresie blokowym w widoku Zakres na mapach źródłowych.
• Debuger rozpoznaje teraz zmienne w funkcjach strzałek w widoku Zakres na mapach źródłowych.

Problemy z Chromium: 1329113, 1322115

Różne wyróżnienia

Oto kilka ważnych poprawek w tej wersji:

• Poprawiliśmy ustawienie Autouzupełnianie w panelu Źródła. Wcześniej autouzupełnianie było zawsze włączone, nawet jeśli było wyłączone. (1323286).
• Zaktualizowaliśmy kartę Plik manifestu w panelu Aplikacja, aby analizowała najnowszy format schematu kolorów. (1318305).
• Ulepszyliśmy sugestie dotyczące problemów z blokowaniem renderowania (<script async>) w panelu Statystyki skuteczności. Wcześniej Narzędzia deweloperskie były sugerowane dla add async attribute to the script tag, mimo że skrypt był już oznaczony jako asynchroniczny. (1334096).
• Panel Statystyki skuteczności wykrywa teraz elementy iframe jako potencjalne przyczyny przesunięć układu. Szczegóły elementu iframe możesz wyświetlić w panelu Szczegóły. (1328873)
• Po otwarciu pliku w menu poleceń pliki utworzone przez Ciebie (pliki wygenerowane przez mapy źródłowe) mają teraz wyższą pozycję w rankingu, więc pojawiają się nad wdrożonymi skryptami o podobnych nazwach. (1312929)

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   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o 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.