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

Jecelyn Yeen

Czyszczenie panelu wydajności po jego ponownym załadowaniu

Po kliknięciu przycisku Rozpocznij profilowanie i załaduj ponownie stronę panel Wydajność usuwa zrzut ekranu i ślad.

Wcześniej panel Wydajność wyświetlał oś czasu ze zrzutami ekranu z poprzednich nagrań. Utrudniało to określenie, kiedy rozpoczęło się rzeczywiste pomiar. Panel zawsze najpierw przechodzi na stronę about:blank, aby zapewnić, że nagrywanie rozpocznie się od pustego śledzenia. Jest to zgodne z panelem Statystyki wydajności, który już to umożliwiał.

Czyszczenie panelu wydajności po jego ponownym załadowaniu.

Problemy z Chromium: 1101268, 1382044

Aktualizacje Dyktafonu

Wyświetlanie i wyróżnianie kodu ścieżki użytkownika w Rejestratorze

Nagrywarka ma teraz widok kodu podzielonego na części, który ułatwia wyświetlanie kodu przepływu użytkownika. Aby uzyskać dostęp do widoku kodu, otwórz przepływ użytkownika i kliknij Pokaż kod.

Nagrywarka wyróżnia odpowiedni kod, gdy najedziesz kursorem na dany krok po lewej stronie, co ułatwia śledzenie przebiegu. Format kodu możesz zmienić, korzystając z menu, które umożliwia przełączanie się między formatami, np. skryptem Nightwatch Test.

Widok kodu w rejestratorze

Problem z Chromium: 1385489

Dostosowywanie typów selektorów nagrania

Możesz tworzyć nagrania, które obejmują tylko te typy selektorów, które Cię interesują. Dzięki nowej opcji dostosowywania typów selektorów podczas tworzenia nowego nagrania możesz uwzględniać lub wykluczać selektory, takie jak XPath, aby rejestrować tylko te selektory, które chcesz uwzględnić w swoich scenariuszach użytkownika.

Nowa opcja dostosowywania typów selektorów.

Problem z Chromium: 1384431

Edytowanie wzorzec przeglądania podczas nagrywania

Dyktafon umożliwia teraz edytowanie podczas nagrywania, co daje Ci elastyczność w dokonywania zmian w czasie rzeczywistym. Nie musisz już kończyć nagrywania, aby wprowadzić poprawki.

Edytowanie podczas rejestrowania wzoru przeglądania.

Problem z Chromium: 1381971

Automatyczne formatowanie stylistyczne na miejscu

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

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

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

Problemy z Chromium: 1383453, 1382752, 1382397

Lepsze podświetlanie składni i podgląd wstawiania w przypadku Vue, SCSS i innych

W panelu Źródła ulepszono podświetlanie składni w przypadku kilku popularnych formatów plików, co ułatwia czytanie kodu i rozpoznawanie jego struktury, m.in. w przypadku formatów Vue, JSX, Dart, LESS, SCSS, SASS i inline CSS.

Podświetlanie składni w Vue

Dodatkowo w Narzędziach deweloperskich ulepszono podgląd wbudowany w przypadku Vue, wbudowanego HTML-a i TSX. Najedź kursorem na zmienną, aby wyświetlić podgląd jej wartości.

Wbudowany podgląd w Vue.

Oprócz tego w Narzędziach deweloperskich w panelu Źródła wyświetlana jest teraz mapa źródeł arkusza stylów. Na przykład po otwarciu pliku SCSS możesz uzyskać dostęp do powiązanego pliku CSS, klikając link do mapy źródeł.

Link do mapy źródeł dla SASS.

Problemy z Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

Ergonomiczna i spójna funkcja autouzupełniania w Konsoli

DevTools ulepsza autouzupełnianie, wprowadzając te zmiany:

  • Tab jest zawsze używane do autouzupełniania.
  • Sposób działania funkcji Arrow right i Enter zależy od kontekstu.
  • Funkcja autouzupełniania działa w spójny sposób w edytorach tekstu w panelach Konsoli, Źródeł i Elementów.

Oto, co się dzieje, gdy w Konsoli wpiszesz cons:

  • Konsola wyświetla listę sugestii autouzupełniania. Opcja na górze ma cienką kropkowaną obwódkę, która wskazuje, że nawigacja nie została jeszcze rozpoczęta. Przerywana ramka wokół najlepszej opcji autouzupełniania.

  • Gdy naciśniesz Enter, Konsola wykona wiersz. Wcześniej wiersz był automatycznie wypełniany sugerowaną propozycją. Aby skorzystać z autouzupełniania, naciśnij Tab lub Arrow Right. Wykonuje wiersz po naciśnięciu klawisza Enter.

  • Gdy przewijasz listę sugestii za pomocą skrótów Arrow up i Arrow down, konsola wyróżnia wybraną opcję.Podświetla sugestie podczas nawigacji.

  • Aby podczas nawigacji automatycznie wypełnić pole wybraną opcją, użyj klawiszy Tab, Enter lub Arrow Right. Autouzupełnianie z wybraną opcją podczas nawigacji.

  • Podczas edycji w środku kodu, np. gdy kursor znajduje się między n a s, użyj Tab do autouzupełniania, Enter do wykonania linii i Arrow Right do przesunięcia kursora do przodu. Edytowanie w środku kodu.

Problemy z Chromium: 1399436, 1276960

Inne najciekawsze momenty

Oto kilka istotnych poprawek w tej wersji:

  • Rozwiązaliśmy problem polegający na regresji w Narzędziach deweloperskich, który powodował, że nie zatrzymywano się na instrukcji debugger w skryptach wbudowanych. (1385374)
  • nowe ustawienie Konsoli, które umożliwia domyślne rozwijanie lub zwijanie wiadomości console.trace(); Przełącz ustawienia, klikając Ustawienia > Preferencje > Domyślnie rozwijaj komunikaty console.trace(). (1139616)
  • Panel Fragmenty w panelu Źródła obsługuje ulepszony autouzupełnianie, podobnie jak Konsola. (772949) Autouzupełnianie w fragmentach.

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ędziach deweloperskich.