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

Jecelyn Yeen

Rejestrator: opcje kopiowania kroków, odtwarzanie na stronie, menu kontekstowe kroku

Nowe opcje kopiowania w panelu Dyktafonu.

Otwórz istniejący wzorzec przeglądania w Rejestratorze. Wcześniej, gdy odtwarzałeś ścieżkę użytkownika, Narzędzia deweloperskie zawsze rozpoczynały odtwarzanie od przejścia na stronę lub jej ponownego załadowania.

W najnowszych aktualizacjach Rejestrator wyświetla krok nawigacji oddzielnie. Możesz kliknąć prawym przyciskiem myszy i usunąć go, aby odtworzyć sesję na stronie.

Oprócz tego możesz kliknąć prawym przyciskiem myszy krok i skopiować go do schowka w panelu *Rejestrator zamiast eksportować cały przepływ użytkownika. 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 było dostępne tylko po kliknięciu przycisku z 3 kropkami. Aby otworzyć menu, możesz teraz kliknąć prawym przyciskiem myszy dowolne miejsce w kroku.

Problemy z Chromium: 1322313, 1351649, 1322313, 1339767

Wyświetlanie rzeczywistych nazw funkcji w nagraniach dotyczących wydajności

Panel Skuteczność wyświetla teraz rzeczywiste nazwy funkcji i ich źródła w śladzie, jeśli dostępna jest mapa źródła.

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

W tym przykładzie plik źródłowy jest minimalizowany w środowisku produkcyjnym. Na przykład funkcja sayHi jest w tym demo skrócona do n, a funkcja takeABreak – do o.

Pokaż pliki przed i po minifikacji.

Wcześniej, gdy rejestrowałeś ślad w panelu Wydajność, ślad zawierał tylko nazwy funkcji po minifikacji. Utrudniało to debugowanie.

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

Problemy z Chromium: 1364601, 1364601

Nowe skróty klawiszowe w panelach Konsola i Źródła

Między kartami w panelu Źródła możesz przełączać się za pomocą tych skrótów: w systemie macOS: Function + Command + strzałka w górę lub w dół; w systemach Windows i Linux: Control + Page Up lub Page Down.

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

Dodatkowo Narzędzia deweloperskie akceptują teraz strzałkę 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łki w prawo, najprawdopodobniej chcesz ustawić kursor w następnej pozycji, a nie włączyć autouzupełnianie. Ta zmiana w interfejsie użytkownika lepiej pasuje do Twojego przepływu pracy związanego z tworzeniem treści.

Problem w 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 umożliwia wykrycie, czy funkcja lub konstruktor zostały wywołane za pomocą operatora new. Możesz teraz rejestrować wartość new.target w konsoli, aby sprawdzić ją podczas debugowania. Wcześniej po wpisaniu new.target zwracał błędy. Wyświetl porównanie przed i po debugowaniu oceny new.target.
  • Obiekt WeakRef umożliwia przechowywanie słabego odwołania do innego obiektu bez uniemożliwiania jego usunięcia przez mechanizm odśmiecania. Narzędzia deweloperskie wyświetlają teraz podgląd wartości w wierszu i oceniają słabe odwołanie bezpośrednio w konsoli podczas debugowania. Wcześniej trzeba było jawnie wywołać funkcję „deref”, aby rozwiązać ten problem. Wyświetlanie porównania przed i po ocenie WeakRef podczas debugowania.
  • Naprawiono podgląd w wierszu dla zmiennej zacienionej. Wcześniej wyświetlana wartość była nieprawidłowa. Wyświetl podgląd porównania przed i po w przypadku zmiennej zacienionej.
  • Odszyfrowywanie nazw zmiennych w funkcjach Generator i async w panelu Zakres w panelu Źródła.

Problemy z Chromium: 1267690, 1246863, 1371322, 1311637

Różne wyróżnione informacje

Oto niektóre ważne poprawki w tej wersji:

  • Więcej wskazówek dotyczących nieaktywnych właściwości CSS w panelu Style – wysokość i szerokość w wierszu, właściwości flex i grid. (1373597, 1178508, 1178508,1178508)
  • Poprawione wyróżnianie składni. Nie działał on prawidłowo od czasu niedawnej aktualizacji edytora kodu w Narzędziach deweloperskich. (1290182)
  • Prawidłowe rejestrowanie zdarzeń zmiany danych wejściowych po zdarzeniu utraty fokusu w Rejestratorze. (1378488)
  • Aktualizowanie skryptu odtwarzania Puppeteer podczas eksportowania, aby ułatwić debugowanie w Rejestratorze. (1351649)
  • Obsługa nagrywania i odtwarzania w narzędziu Recorder na potrzeby debugowania zdalnego. (1185727)
  • Naprawiliśmy analizowanie specjalnych nazw zmiennych CSS w var(). Wcześniej Narzędzia deweloperskie nie obsługiwały analizowania zmiennych ze znakami specjalnymi, takimi jak var(--fo\ o). , (1378992)

[Eksperymentalnie] Ulepszone wrażenia użytkownika podczas zarządzania punktami przerwania

Obecny panel Punkty przerwania nie zapewnia zbyt wielu wizualnych wskazówek dotyczących wszystkich punktów przerwania. Dodatkowo często używane działania są ukryte w menu kontekstowym.

Ta eksperymentalna zmiana interfejsu wprowadza strukturę w panelu Punkty przerwania i umożliwia programistom szybki dostęp do często używanych funkcji, takich jak edytowanie i usuwanie punktów przerwania.

Oto niektóre z nich:

  • Obie opcje wstrzymania znajdują się w panelu Punkty przerwania. Mają one wyraźne etykiety tekstowe, które sprawiają, że opcje są zrozumiałe same przez się.
  • Punkty przerwania są pogrupowane według plików i uporządkowane według numeru wiersza lub kolumny. Możesz je zwijać i rozwijać**.
  • Nowe opcje usuwania i edytowania punktu przerwania po najechaniu kursorem na punkt przerwania lub nazwę pliku w panelu Punkt przerwania.

Pełną listę zmian znajdziesz w naszym RFC (zamkniętym). Swoją opinię możesz przesłać tutaj.

Pokaż panel punktu przerwania przed zmianą projektu i po niej.

Problemy z Chromium: 1346231, 1324904

[Eksperymentalne] Automatyczne formatowanie stylistyczne w miejscu

Panel Źródła automatycznie stosuje formatowanie stylistyczne do zminifikowanych plików źródłowych. Aby cofnąć tę czynność, możesz kliknąć przycisk pretty print { }.

Wcześniej panel Źródła domyślnie wyświetlał zminimalizowaną zawartość. Aby sformatować treść, musisz ręcznie kliknąć przycisk ładnego drukowania. Dodatkowo sformatowana treść nie była wyświetlana w tym samym pliku, ale na innej karcie ::formatted.

Wyświetl zminifikowany plik przed automatycznym formatowaniem stylistycznym i po nim.

Problem w Chromium: 1164184

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.

Skontaktuj się 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.

Co nowego w Narzędziach deweloperskich

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