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

Jecelyn Yeen

Dyktafon: kopiowanie jako opcje kroków, ponowne odtwarzanie na stronie, menu kontekstowe kroku

Nowe opcje kopiowania w panelu Dyktafon.

Otwórz ścieżkę użytkownika w Dyktafonie. Do tej pory za każdym razem, gdy odtwarzano ponownie ścieżkę użytkownika, Narzędzia deweloperskie zawsze rozpoczynały ponowne odtwarzanie przez przejście do strony lub jej ponowne załadowanie.

W najnowszych aktualizacjach Dyktafon osobno wyświetla etap nawigacji. Możesz go kliknąć prawym przyciskiem myszy i usunąć, aby odtworzyć na stronie.

Oprócz tego możesz kliknąć krok prawym przyciskiem myszy i skopiować go do schowka w panelu *Dyktafon, zamiast eksportować cały proces 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 skrypt.

Wcześniej dostęp do menu był możliwy tylko za pomocą przycisku z 3 kropkami. Teraz możesz kliknąć prawym przyciskiem myszy w dowolnym miejscu na tym etapie, aby otworzyć menu.

Problemy z Chromium: 1322313, 1351649, 1322313, 1339767

Pokaż rzeczywiste nazwy funkcji w nagraniach występów

Panel Wydajność pokazuje teraz rzeczywiste nazwy funkcji i ich źródła w śledzeniu, jeśli istnieje mapa źródeł.

W panelu Skuteczność pokaż porównanie nazw funkcji przed i po.

W tym przykładzie plik źródłowy jest zminifikowany na etapie produkcji. Na przykład funkcja sayHi jest minimalizowana do postaci n, a funkcja takeABreak w tej demo do wartości o.

Pokaż pliki przed minifikacją i po niej.

Dotychczas ślad zarejestrowany w panelu Wydajność pokazywał tylko zminimalizowane nazwy funkcji. Utrudniło to debugowanie.

W związku z najnowszymi zmianami Narzędzia deweloperskie odczytują mapę źródeł i wyświetlają rzeczywiste nazwy funkcji i lokalizację źródłową.

Problemy z Chromium: 1364601, 1364601

Nowe skróty klawiszowe w Konsoli Play Panel Źródła

Między kartami w panelu Źródła możesz się przełączać za pomocą: W systemie macOS: Funkcja + Command + strzałka w górę i w dół W systemach Windows i Linux: Control + Page up lub down

Poza tym w systemie macOS możesz poruszać się po sugestiach autouzupełniania za pomocą klawiszy Ctrl + N lub Ctrl + P (podobnie jak w przypadku Emacs). Możesz na przykład wpisać window. w Console i używać tych skrótów do nawigacji.

Oprócz tego w Narzędziach deweloperskich dostępne są teraz strzałkę w prawo w przypadku autouzupełniania tylko na końcu wiersza. Okno autouzupełniania wyświetla się na przykład podczas edytowania czegoś w środku kodu. Gdy naciśniesz klawisz strzałki w prawo, najprawdopodobniej zechcesz ustawić kursor na następnej pozycji, a nie w autouzupełnianiu. Ta zmiana UX ułatwi Ci proces tworzenia treści.

Problem z Chromium: 1167965, 1172535, 1371585. 1369503,

Ulepszone debugowanie JavaScript

Oto kilka ulepszeń w debugowaniu JavaScriptu w tej wersji:

  • new.target to meta-właściwość pozwalająca wykryć, czy funkcja lub konstruktor została wywołana za pomocą nowego operatora. Możesz teraz zalogować parametr new.target w konsoli, aby sprawdzić jego wartość podczas debugowania. Wcześniej po wpisaniu new.target zwracał on błędy. Pokaż porównanie debugowania oceny wartości new.target i po nim.
  • Obiekt WeakRef umożliwia przechowywanie słabego odwołania do innego obiektu bez uniemożliwiania jego czyszczenia pamięci. Narzędzia deweloperskie wyświetlają teraz wbudowany podgląd wartości i oceniają słabe odwołanie bezpośrednio w konsoli podczas debugowania. Wcześniej, aby rozwiązać ten problem, trzeba było bezpośrednio wywołać w nim metodę „deref”. Pokaż porównanie oceny Słabej referencji i po nim podczas debugowania.
  • Poprawiono podgląd wbudowany w zmiennej powielanej. Wcześniej wyświetlana wartość była nieprawidłowa. Pokaż wbudowany podgląd porównania „przed” i „po” dla zmiennej powielanej.
  • Rozjaśnij nazwy zmiennych w funkcjach Generator i async w panelu Zakres w panelu Źródła.

Problemy z Chromium: 1267690, 1246863 1371322, 1311637

Różne wyróżnienia

Oto kilka ważnych poprawek w tej wersji:

  • Więcej wskazówek dotyczących nieaktywnych właściwości CSS znajdziesz w panelu Style. Zawierają one właściwości wysokości i szerokości tekstu w tekście, właściwości Flex i siatki. (1373597, 1178508, 1178508,1178508)
  • Naprawiono wyróżnianie składni. Nie działał on prawidłowo od czasu uaktualnienia edytora kodu w Narzędziach deweloperskich. (1290182).
  • Zarejestruj zdarzenia zmiany sygnału wejściowego po wystąpieniu rozmycia w Dyktafonie. (1378488)
  • Zaktualizuj skrypt ponownego odtwarzania Puppeteer podczas eksportowania, aby ułatwić debugowanie w Dyktafonie. (1351649)
  • Obsługuj nagrywanie i odtwarzanie w Dyktafonie na potrzeby zdalnego debugowania. (1185727)
  • Naprawiono analizowanie nazw specjalnych zmiennych CSS w komponencie var(). Wcześniej Narzędzia deweloperskie nie obsługiwały analizy zmiennych ze znakami zmiany znaczenia, np. var(--fo\ o). , (1378992)

[Funkcja eksperymentalna] Ulepszony UX zarządzania punktami przerwania

Bieżący panel Punkty przerwania zapewnia niewielką pomoc wizualną w nadzorowaniu wszystkich punktów przerwania. Często używane czynności są ukryte za menu kontekstowym.

Ta eksperymentalna zmiana UX nadaje strukturę panelu Punkty przerwania i zapewnia deweloperom szybki dostęp do często używanych funkcji, takich jak edytowanie i usuwanie punktów przerwania.

Oto kilka najważniejszych kwestii:

  • Obie opcje wstrzymania znajdują się w panelu Punkty przerwania. Są oznaczone etykietami tekstowymi, które jasno określają, czy ich wybór jest jasny.
  • Punkty przerwania są grupowane według pliku w kolejności według numeru wiersza lub kolumny. Możesz je zwijać i rozwijać**.
  • Nowe opcje usuwania i edytowania punktu przerwania po najechaniu na niego kursorem lub nazwę pliku w panelu Punkt przerwania.

Zapoznaj się ze wszystkimi zmianami w RFC (zamknięty) i prześlij swoją opinię tutaj.

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

Problemy z Chromium: 1346231, 1324904

[Funkcja eksperymentalna] Automatyczne formatowanie stylistyczne na miejscu

W panelu Źródła automatycznie wyświetlają się zminifikowane pliki źródłowe z wykorzystaniem formatowania drukarskiego. Aby cofnąć tę czynność, możesz kliknąć przycisk Tryb wydruku { }.

Wcześniej w panelu Źródła domyślnie wyświetlały się zminimalizowane treści. Aby sformatować treść, trzeba było ręcznie kliknąć przycisk Stylowa grafika. Poza tym treść w formacie ładnym nie była wyświetlana w tym samym pliku, tylko na innej karcie ::formatted.

Pokazuj zminimalizowany plik przed automatycznym formatowaniem graficznym i po nim.

Problem z Chromium: 1164184

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 w Narzędziach deweloperskich.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o 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.