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) na 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ę.

Uruchom ponownie ramkę podczas debugowania

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órzenia poszczególnych kroków.

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 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.

niestandardowe rozszerzenie panelu Dyktafon

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.

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

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ć oznaczenia 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 pozycję z czasem, aby wyświetlić jej szczegóły w panelu bocznym.

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

Problem w Chromium: 1322808

Pokazywanie przypisanego boksu do elementu

Elementy w boksie w panelu Elementy mają nową plakietkę slot. Przy debugowaniu 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 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.

Pokazywanie przypisanego boksu do elementu

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.

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

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.

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

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.

Identyfikuj 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 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 mieli problemy 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.

Ulepszone sugestie autouzupełniania obiektów JavaScript

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 blokowe w widoku Zakres za pomocą map źródłowych. Rozwiązuje zmienne ograniczone do bloku
  • Debuger rozpoznaje teraz zmienne w funkcjach strzałek w widoku Zakres na mapach źródłowych. Analizuje zmienne w funkcjach strzałek

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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 82 został anulowany.

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