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

Jecelyn Yeen

Ponowne uruchamianie ramki podczas debugowania

Funkcja Uruchom ponownie ramkę powraca! Gdy debuger jest 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, rozwiń sekcję Stos wywołań w panelu Debuger, 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ć odtwarzanie każdego kroku na ekranie.

Otwórz panel Rejestrator i rozpocznij nowe nagranie. Po zakończeniu nagrywania kliknij przycisk menu Odtwórz. Wybierz prędkość, 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 pogrupować pliki w 2 kategorie, aby szybciej je wyszukiwać:

• Autor Podobne do plików źródłowych wyświetlanych w zintegrowanym środowisku programistycznym. 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 React.

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 gniazdami w panelu Elementy mają nową plakietkę slot. Podczas debugowania problemów z układem używaj tej funkcji, aby szybciej identyfikować 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 z Chromium: 1018906

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

Nowe ustawienie Współbieżność sprzętowa w panelu Wydajność umożliwia deweloperom skonfigurowanie wartości zgłaszanej przez 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ć, jaki wpływ będzie miała ta wartość 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 z Chromium: 1288158

Ulepszone podpowiedzi 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 podlegające wyliczeniu
2. Własne właściwości niepodlegające wyliczeniu
3. Dziedziczone właściwości możliwe do wyliczenia
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 przed właściwościami dziedziczonymi, a wszystkie właściwości dziedziczone 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 kodzie wbudowanym <script> 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 ważne poprawki 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ń klikniesz otwórz plik, utworzone pliki (pliki wygenerowane przez mapy źródła) będą teraz wyświetlane wyżej, dzięki czemu pojawią się 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ą wykrywać problemy w witrynie, zanim zauważą je 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.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Nowości w Narzędziach deweloperskich

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