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

Jecelyn Yeen

Ponowne uruchamianie ramki podczas debugowania

Funkcja Uruchom ponownie ramkę powraca! Gdy kod zostanie wstrzymany w funkcji, możesz ponownie uruchomić poprzedni kod. 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 zatrzymał się w punkcie przerwania (wiersz 343) pod koniec funkcji toggleColorScheme. Aby ponownie uruchomić debugowanie od początku funkcji toggleColorScheme, w panelu Debuger rozwiń sekcję Stos wywołań, kliknij prawym przyciskiem myszy toggleColorScheme i wybierz Uruchom ponownie ramkę.

Problem w Chromium: 1303521

Opcje odtwarzania w zwolnionym tempie w panelu Dyktafonu

Możesz teraz odtwarzać ścieżki użytkownika w wolniejszym tempie – wolnym, bardzo wolnym i ekstremalnie wolnym. Te opcje pozwalają lepiej obserwować powtórkę każdego kroku na ekranie.

Otwórz panel Rejestrator i rozpocznij nowe nagranie. Po zakończeniu nagrywania kliknij przycisk menu Odtwórz. Wybierz szybkość, aby rozpocząć powtórkę.

Problem w Chromium: 1306756

Tworzenie rozszerzenia panelu Dyktafon

Możesz teraz utworzyć lub zainstalować rozszerzenie Chrome, aby eksportować skrypty powtórki w ulubionym formacie. Informacje o tym, jak utworzyć takie rozszerzenie, znajdziesz w dokumentacji interfejsu API rozszerzenia Rejestrator.

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

Problem w Chromium: 1325751

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

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

Dzięki temu polu wyboru możesz podzielić pliki na 2 kategorie, aby szybciej je wyszukiwać:

• Autor Podobne do plików źródłowych wyświetlanych w IDE. Narzędzia deweloperskie generują te pliki na podstawie map źródeł (dostarczanych przez narzędzia do kompilacji).
• Wdrożono Rzeczywiste pliki odczytywane przez przeglądarkę. Zwykle są one zminifikowane.

Wypróbuj to na prezentacji Reacta.

Problem z Chromium: 960909

Nowy ślad czasu użytkownika w panelu Statystyki wydajności

Wizualizuj performance.measure() w nagraniu za pomocą nowej ścieżki Czasy użytkownika w panelu Statystyki wydajności.

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

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

Problem w Chromium: 1322808

Odsłanianie przypisanego miejsca elementu

Elementy z miejscami w panelu Elementy mają nową plakietkę slot. Podczas debugowania problemów z układem użyj 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ź gniazdo person-occupation karty i kliknij plakietkę slot obok niego, aby wyświetlić przypisane gniazdo.

Dowiedz się, jak używać elementów <template> i <slot> do tworzenia elastycznego szablonu, który można następnie wykorzystać do wypełniania modelu Shadow DOM komponentu internetowego.

Problem w Chromium: 1018906

Symulowanie równoczesności sprzętu w przypadku nagrań dotyczących wydajności

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

Niektóre aplikacje używają navigator.hardwareConcurrency do kontrolowania stopnia równoległości, np. do kontrolowania rozmiaru puli wątków Emscripten. Dzięki tej funkcji deweloperzy mogą testować wydajność aplikacji przy różnej liczbie rdzeni.

Problem w Chromium: 1297439

Wyświetlanie podglądu wartości innej niż kolor podczas autouzupełniania zmiennych CSS

Podczas automatycznego uzupełniania zmiennych CSS Narzędzia deweloperskie wypełniają teraz zmienną niebędącą kolorem znaczącą wartością, dzięki czemu możesz zobaczyć podgląd tego, jak zmiana wartości wpłynie na węzeł.

Problem w Chromium: 1285091

Identyfikowanie ramek blokujących w panelu Pamięć podręczna stanu strony internetowej

W panelu Pamięć podręczna stanu strony internetowej w panelu Aplikacja pojawiła się nowa sekcja ramki, która pomaga identyfikować ramki blokujące, które mogą uniemożliwiać korzystanie z pamięci podręcznej stanu strony internetowej.

Problem w Chromium: 1288158

Ulepszone sugestie autouzupełniania w przypadku obiektów JavaScriptu

Autouzupełnianie właściwości obiektów JavaScriptu jest teraz wyświetlane w tej kolejności:

1. Własne właściwości możliwe do wyliczenia
2. Własne właściwości niepodlegające wyliczeniu
3. Dziedziczone właściwości wyliczalne
4. Dziedziczone właściwości niepodlegające wyliczeniu

Wcześniej deweloperom trudniej było znaleźć odpowiednie właściwości, ponieważ sugestie faworyzowały tylko własne właściwości w stosunku do właściwości dziedziczonych, a wszystkie dziedziczone właściwości miały równy priorytet.

Problem w Chromium: 1299241

Ulepszenia map źródłowych

Oto kilka poprawek w mapach źródła, które poprawiają ogólną jakość debugowania:

• Punkty przerwania działają teraz w <script> wierszu z adnotacjami sourceURL.
• Debuger rozwiązuje teraz zmienne o zakresie bloku w widoku Zakres za pomocą map źródłowych.
• Debuger rozwiązuje teraz zmienne w funkcjach strzałkowych w widoku Zakres za pomocą map źródłowych.

Problemy z Chromium: 1329113, 1322115

Różne wyróżnione informacje

Oto niektóre z najważniejszych poprawek w tej wersji:

• Naprawiono ustawienie Automatyczne uzupełnianie w panelu Źródła. Wcześniej funkcja autouzupełniania była zawsze włączona, nawet jeśli ustawienie było wyłączone. (1323286)
• Zaktualizowaliśmy kartę Manifest w panelu Aplikacja, aby analizować najnowszy format schematu kolorów. (1318305)
• Ulepszyliśmy sugestie dotyczące <script async> problemów z blokowaniem renderowania w panelu Statystyki wydajności. Wcześniej narzędzia deweloperskie sugerowały 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)
• Gdy w menu poleceń wybierzesz otwórz plik, utworzone pliki (pliki wygenerowane przez mapy źródła) będą teraz miały wyższą pozycję, dzięki czemu będą wyświetlane nad podobnie nazwanymi wdrożonymi skryptami. (1312929)

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.