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

Jecelyn Yeen

Nagrywarka: opcje kopiowania kroków, odtwarzania na stronie i menu kontekstowego kroku

Nowe opcje kopiowania w panelu Dyktafon.

Otwórz istniejący przepływ danych w Rejestratorze. Wcześniej, gdy odtwarzano ścieżkę użytkownika, przeglądarka DevTools zawsze rozpoczynała od odświeżenia strony lub przejścia do niej.

W ramach najnowszych aktualizacji nagrywarka pokazuje krok nawigacji osobno. Możesz kliknąć prawym przyciskiem myszy i usunąć go, aby odtworzyć nagranie na stronie.

Zamiast eksportować cały przepływ danych, możesz też kliknąć prawym przyciskiem myszy krok i skopiować go do schowka w panelu *Rejestrator. Działa też z rozszerzeniami. Spróbuj na przykład skopiować krok jako skrypt Nightwatch Test. Dzięki tej funkcji możesz łatwo zaktualizować dowolny istniejący skrypt.

Wcześniej menu kroków można było otworzyć tylko za pomocą przycisku z 3 kropkami. Aby otworzyć menu, możesz teraz kliknąć prawym przyciskiem myszy dowolne miejsce na kroku.

Problemy z Chromium: 1322313, 1351649, 1322313, 1339767

wyświetlanie w nagraniach wydajności rzeczywistych nazw funkcji;

W panelu Wydajność są teraz widoczne nazwy funkcji i ich źródła w śladzie, jeśli jest dostępna mapa źródła.

Wyświetlanie porównywania wyświetlania nazw funkcji w panelu Skuteczność przed i po zmianie.

W tym przykładzie plik źródłowy jest upakowany podczas produkcji. Na przykład w tym demo funkcja sayHi jest zminiaturyzowana jako n, a funkcja takeABreak jako o.

wyświetlać pliki przed i po zminiaturyzowaniu.

Wcześniej, gdy rejestrowano ślad w panelu Wydajność, wyświetlano tylko uproszczone nazwy funkcji. Utrudniało to debugowanie.

Dzięki najnowszym zmianom Narzędzia deweloperskie odczytują teraz mapę źródłową i wyświetlają rzeczywiste nazwy funkcji oraz lokalizację źródła.

Problemy z Chromium: 1364601, 1364601

Nowe skróty klawiszowe w panelu Konsola i źródła

Możesz przełączać się między kartami w panelu Źródła za pomocą: – w systemie macOS: Function + Command + strzałka w górę i w dół; – w systemie Windows i Linux: Control + Page up lub down.

Ponadto na komputerze Mac możesz poruszać się po sugestiach autouzupełniania za pomocą kombinacji klawiszy Ctrl + N i Ctrl + P, podobnie jak na Emacu. Możesz na przykład wpisać window. w Console i użyć tych skrótów do poruszania się po menu.

Ponadto w Narzędziach deweloperskich można teraz używać klawisza Strzałka w prawo do autouzupełniania tylko na końcu wiersza. Na przykład okno autouzupełniania wyświetla się, gdy edytujesz coś w środku kodu. Gdy naciśniesz klawisz Strzałka w prawo, najprawdopodobniej chcesz przesunąć kursor do następnej pozycji zamiast korzystać z autouzupełniania. Ta zmiana wrażeń użytkowników lepiej pasuje do Twojego procesu tworzenia.

Problem z Chromium: 1167965, 1172535, 1371585. 1369503

Ulepszone debugowanie JavaScriptu

Oto niektóre ulepszenia debugowania JavaScriptu w tej wersji:

  • new.target to metawłaściwość, która pozwala wykryć, czy za pomocą operatora new została wywołana funkcja lub konstruktor. Możesz teraz rejestrować wartość new.target w Konsoli, aby sprawdzać ją podczas debugowania. Wcześniej, gdy wpiszesz new.target, zwracane były błędy. Pokazywanie porównania przed i po debugowaniu oceny new.target.
  • Obiekt WeakRef umożliwia przechowywanie słabego odwołania do innego obiektu bez uniemożliwiania usuwania tego obiektu przez funkcję garbage-collection. Narzędzia deweloperskie wyświetlają teraz podgląd wartości w ramach kodu oraz oceniają słabe odwołania bezpośrednio w konsoli podczas debugowania. Wcześniej, aby rozwiązać ten problem, trzeba było wywołać funkcję „deref”. Pokazywanie stanu przed i po porównaniu oceny WeakRef podczas debugowania.
  • Naprawiono podgląd wbudowany w przypadku zacienionych zmiennych. Wcześniej wyświetlana wartość była nieprawidłowa. Wyświetlanie wbudowanego podglądu porównywania stanu przed i po dla zacienionych zmiennych.
  • Odszyfruj nazwy zmiennych w funkcjach Generator i async w panelu Zakres w panelu Źródła.

Problemy z Chromium: 1267690, 1246863 1371322, 1311637

Inne najciekawsze momenty

Oto kilka istotnych poprawek w tej wersji:

  • Więcej podpowiedzi dotyczących nieaktywnych właściwości CSS w panelu Style: wysokość i szerokość w śródtytułach, właściwości flex i grid. (1373597, 1178508, 1178508,1178508)
  • Naprawiono podświetlanie składni. Nie działał prawidłowo od czasu ostatniej aktualizacji edytowania kodu w Narzędziach deweloperskich. (1290182)
  • Po zdarzeniu rozmycia prawidłowo rejestruj zdarzenia zmiany wejścia w nagrywarce. (1378488)
  • Zaktualizowano skrypt odtwarzania Puppeteer podczas eksportowania, aby ułatwić debugowanie w rejestratorze. (1351649)
  • Obsługa nagrywania i odtwarzania w Dyktafonie na potrzeby debugowania zdalnego. (1185727)
  • Naprawiono analizowanie specjalnych nazw zmiennych CSS w var(). Wcześniej DevTools nie obsługiwał analizowania zmiennych z użyciem znaków ucieczki, takich jak var(--fo\ o). , (1378992)

[Experimental] Ulepszone wrażenia użytkownika w przypadku zarządzania punktami przerwania

Obecna karta Punkty graniczne nie zawiera wielu wizualnych wskazówek ułatwiających przeglądanie wszystkich punktów granicznych. Ponadto często używane działania są ukryte w menu kontekstowym.

Ta eksperymentalna wersja interfejsu użytkownika wprowadza porządek w panelu Punkty graniczne i umożliwia programistom szybki dostęp do często używanych funkcji, takich jak edytowanie i usuwanie punktów granicznych.

Oto najważniejsze zmiany:

  • Obie opcje wstrzymania znajdują się w panelu Punkty przerwania. Zawierają one wyraźne etykiety tekstowe, które ułatwiają zrozumienie opcji.
  • Punkty przerwania są grupowane według pliku i uporządkowane według numeru wiersza lub kolumny. Możesz je zwijać i rozwijać.**
  • Nowe opcje usuwania i edytowania punktu kontrolnego po najechaniu na niego kursorem lub nazwę pliku w panelu Punkt kontrolny.

Zapoznaj się z pełną treścią zmian w zapytaniu o funkcjonalność (zamkniętym) i prześlij opinię tutaj.

Pokaż panel Punktu kontrolnego przed i po zmianie projektu.

Problemy z Chromium: 1346231, 1324904

[Experimental] Automatyczne formatowanie stylistyczne na miejscu

Panel Źródła automatycznie formatuje zminifikowane pliki źródłowe. Aby cofnąć zmianę, kliknij przycisk estetyczny wydruk { }.

Wcześniej panel Źródła wyświetlał domyślnie zminiaturyzowane treści. Aby sformatować treści, musisz ręcznie kliknąć przycisk drukowania. Co więcej, ładnie wydrukowane treści nie były wyświetlane w tym samym pliku, ale na innej karcie ::formatted.

Pokazuje zminifikowany plik przed i po automatycznym formatowaniu stylistycznym na miejscu.

Problem z Chromium: 1164184

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziech deweloperskich.