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.

Po wprowadzeniu najnowszych aktualizacji 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 aktualizować istniejące skrypty.

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świetl porównanie 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 w tym demo funkcja sayHi jest skracana 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 dokończyć wpisywanie. 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świetlanie podglądu 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 z najważniejszych poprawek 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. Od czasu niedawnej aktualizacji edytora kodu w Narzędziach deweloperskich nie działał on prawidłowo. (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 rejestrowania 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)

[Eksperymentalne] 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). Swoje opinie możesz przesył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ę zmianę, kliknij przycisk ładne drukowanie { }.

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

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.

Co nowego w Narzędziach deweloperskich

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