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 zaczynał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 wersji demonstracyjnej 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 i panelu Ź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 w dół

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 opcje strzałki 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 w celu rozwiązania problemu trzeba było z łatwością wywołać 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 analizowania 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, dzięki którym wybór opcji jest jasny i niewymagający wyjaśnień.
  • 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 druku. 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.
  • 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