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

Jecelyn Yeen

Ponowne uruchamianie ramki podczas debugowania

Funkcja Uruchom ponownie ramkę znów jest dostępna. Możesz ponownie uruchomić poprzedni kod po wstrzymaniu dowolnego miejsca w funkcji. 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 początkowo zatrzymał się w punkcie przerwania (wiersz 343) w pobliżu końca 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ę.

Ponowne uruchamianie ramki podczas debugowania

Problem z Chromium: 1303521

Opcje powolnego odtwarzania w panelu Dyktafon

Teraz możesz odtwarzać treści użytkownika z mniejszą prędkością – powolną, bardzo powolną i bardzo wolno. Te opcje pozwalają lepiej obserwować ponowne odtwarzanie każdego kroku na ekranie.

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

Opcje powolnego odtwarzania w panelu Dyktafon

Problem z Chromium: 1306756

Tworzenie rozszerzenia do panelu Dyktafon

Możesz teraz 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.

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ą platform (np. React, Angular) poruszanie się po plikach źródłowych może być trudne z powodu zminifikowanych plików wygenerowanych przez narzędzia do kompilacji (takie jak Webpack czy Vite).

Za pomocą tego pola możesz grupować pliki w 2 kategoriach, aby przyspieszyć wyszukiwanie:

  • Autor: Podobne do plików źródłowych wyświetlanych w IDE. DevTools generuje te pliki na podstawie map źródeł (udostępnionych przez Twoje narzędzia do tworzenia).
  • Wdrożono. Rzeczywiste pliki, które odczytuje przeglądarka. Zwykle te pliki są zmniejszone.

Sprawdź, jak to działa, w tej prezentacji React.

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

Problem z Chromium: 960909

Śledzenie czasu nowego użytkownika w panelu Statystyki skuteczności

Wizualizuj oznaczenia performance.measure() w nagraniu dzięki nowej ścieżce Czas działań użytkownika w panelu Statystyki skuteczności.

Na przykład ta strona internetowa korzysta z metody performance.measure(), aby obliczyć czas wczytywania tekstu.

Po rozpoczęciu pomiaru wczytywania strony w nagraniu pojawi się ścieżka Czas użytkownika. Kliknij element czasowy, aby wyświetlić jego szczegóły na panelu bocznym.

Śledzenie czasu działań użytkownika w panelu Statystyki skuteczności

Problem z Chromium: 1322808

Pokaż boks przypisany do elementu

Elementy boksowe 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 boksami. Sprawdź gniazdo person-occupation na karcie i kliknij obok niej plakietkę slot, aby odsłonić gniazdo przypisane do tej karty.

Dowiedz się, jak używać elementów <template> i <slot> do tworzenia elastycznego szablonu, którego można później używać do wypełniania obiektu shadow DOM komponentu internetowego.

Pokaż boks przypisany do elementu

Problem z Chromium: 1018906

Symulowanie równoczesności sprzętu w nagraniach z występów

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

Niektóre aplikacje używają funkcji navigator.hardwareConcurrency do kontrolowania poziomu równoległości ich aplikacji, na przykład do kontrolowania rozmiaru puli wątków pThread Emscripten. Dzięki tej funkcji deweloperzy mogą testować wydajność swoich aplikacji przy różnych liczbach rdzeni.

Symulowanie równoczesności sprzętu w nagraniach z występów

Problem z Chromium: 1297439

Wyświetl podgląd wartości innej niż kolor podczas automatycznego uzupełniania zmiennych CSS

Podczas automatycznego uzupełniania zmiennych CSS narzędzia DevTools wypełnia teraz zmienną inną niż color stosowną wartością, dzięki czemu można wyświetlić podgląd zmiany, jaką ta wartość wprowadzi w węźle.

Wyświetl podgląd wartości innej niż kolor podczas automatycznego uzupełniania zmiennych CSS

Problem z Chromium: 1285091

Zidentyfikuj 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 ramek blokujących, które mogą uniemożliwiać stronom korzystanie z pamięci podręcznej stanu strony internetowej.

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

Problem z Chromium: 1288158

Ulepszone sugestie autouzupełniania obiektów JavaScript

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

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

Wcześniej programiści mieli trudności ze znalezieniem odpowiednich usług, ponieważ sugestia faworyzowała tylko właściwości własne zamiast dziedziczonych, a wszystkim dziedziczonym właściwości miały taki sam priorytet.

Ulepszone sugestie autouzupełniania obiektów JavaScript

Problem z Chromium: 1299241

Ulepszenia map źródeł

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 obsługuje teraz zmienne ograniczone do bloku w widoku Zakres za pomocą map źródeł. Rozpoznaje zmienne ograniczone do bloku
  • Debuger rozpoznaje teraz zmienne w funkcjach strzałek w widoku Zakres za pomocą map źródeł. Wskazuje zmienne w funkcjach strzałek

Problemy z Chromium: 1329113, 1322115

Inne ważne informacje

Oto kilka ważnych poprawek wprowadzonych w tej wersji:

  • Naprawiliśmy ustawienie Autouzupełnianie w panelu Źródła. Wcześniej autouzupełnianie było zawsze włączone, nawet jeśli to ustawienie było wyłączone. (1323286)
  • Zaktualizowaliśmy kartę Plik manifestu w panelu Aplikacja, aby przeanalizować najnowszy format schematu kolorów. (1318305).
  • Poprawiliśmy sugestie dotyczące problemów blokujących renderowanie <script async> w panelu Statystyki wydajności. Wcześniej w Narzędziach deweloperskich sugerowano działanie add async attribute to the script tag, mimo że skrypt jest już oznaczony jako asynchroniczny. (1334096)
  • Panel Statystyki skuteczności wykrywa teraz elementy iframe jako potencjalne przyczyny przesunięcia układu. Szczegóły elementu iframe możesz wyświetlić w panelu Szczegóły. (1328873)
  • Po otwarciu pliku w menu polecenia utworzone pliki (wygenerowane przez mapy źródeł) mają teraz wyższą pozycję w rankingu, więc pojawiają się nad wdrożonymi skryptami o podobnej nazwie. (1312929).

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