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

Czyszczenie panelu wydajności po ponownym załadowaniu

Panel Wydajność czyści teraz zarówno zrzut ekranu, jak i ślad po kliknięciu przycisku Rozpocznij profilowanie i ponownie załaduj stronę.

Wcześniej w panelu Wydajność wyświetlana była oś czasu z zrzutami ekranu z poprzednich nagrań. Utrudniało to określenie, kiedy rozpoczął się pomiar. Panel zawsze przechodzi najpierw na stronę about:blank, aby zagwarantować, że nagrywanie rozpocznie się od pustego śladu. Jest to zgodne z działaniem panelu Statystyki wydajności, który już to robił.

Czyszczenie Panelu wydajności podczas ponownego wczytywania.

Problemy z Chromium: 1101268, 1382044

Aktualizacje Dyktafonu

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

Rejestrator oferuje teraz widok kodu podzielonego, co ułatwia przeglądanie kodu przepływu użytkownika. Aby otworzyć widok kodu, otwórz ścieżkę użytkownika i kliknij Pokaż kod.

Rejestrator podświetla odpowiedni kod, gdy najedziesz kursorem na poszczególne kroki po lewej stronie, co ułatwia śledzenie przepływu. Format kodu możesz zmienić za pomocą menu, które umożliwia przełączanie się między formatami, np. skryptem Nightwatch Test.

Widok kodu w Rejestratorze.

Problem w Chromium: 1385489

Dostosowywanie typów selektorów nagrania

Możesz tworzyć nagrania, które rejestrują 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 w przepływach użytkowników rejestrować tylko te selektory, które Cię interesują.

Nowa opcja dostosowywania typów selektorów.

Problem w Chromium: 1384431

Edytowanie wzorca przeglądania podczas nagrywania

Dyktafon umożliwia teraz edytowanie podczas nagrywania, co daje Ci możliwość wprowadzania zmian w czasie rzeczywistym. Nie musisz już kończyć nagrywania, aby wprowadzać zmiany.

Edytowanie podczas nagrywania wzorca przeglądania.

Problem w Chromium: 1381971

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ść, trzeba było ręcznie kliknąć przycisk ładnego drukowania. Dodatkowo sformatowana zawartość nie była wyświetlana na tej samej karcie, ale na innej karcie ::formatted.

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

Problemy z Chromium: 1383453, 1382752, 1382397

Lepsze podświetlanie składni i podgląd w tekście w przypadku Vue, SCSS i innych języków

Panel Źródła ma ulepszone podświetlanie składni w przypadku kilku popularnych formatów plików, co ułatwia czytanie kodu i rozpoznawanie jego struktury, w tym Vue, JSX, Dart, LESS, SCSS, SASS i wbudowanego CSS.

Wyróżnianie składni w Vue.

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

Wbudowany podgląd w Vue.

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

Link do mapy źródeł dla SASS.

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

Ergonomiczne i spójne autouzupełnianie w konsoli

Narzędzia deweloperskie ulepszają autouzupełnianie, wprowadzając te zmiany:

  • Tab jest zawsze używany do autouzupełniania.
  • Działanie symboli Arrow rightEnter zależy od kontekstu.
  • Autouzupełnianie działa tak samo w edytorach tekstu oraz w panelach Konsola, ŹródłaElementy.

Na przykład po wpisaniu conskonsoli:

  • W konsoli wyświetla się lista sugestii autouzupełniania. Dookoła pierwszej opcji widać delikatną kropkowaną ramkę, która wskazuje, że nawigacja jeszcze się nie rozpoczęła. Kropkowane obramowanie wokół pierwszej opcji autouzupełniania.

  • Konsola wykona wiersz po naciśnięciu klawisza Enter. Wcześniej automatycznie uzupełniał wiersz najlepszą sugestią. Aby skorzystać z autouzupełniania, naciśnij Tab lub Arrow Right. Wykonuje wiersz po naciśnięciu klawisza Enter.

  • Konsola wyróżnia wybraną opcję podczas poruszania się po liście sugestii za pomocą skrótów Arrow upArrow down. Podświetlanie podczas nawigacji z sugestiami.

  • Aby automatycznie uzupełnić wybraną opcję podczas nawigacji, użyj klawiszy Tab, Enter lub Arrow Right. Automatyczne uzupełnianie wybraną opcją podczas nawigacji.

  • Podczas edytowania w środku kodu, np. gdy kursor znajduje się między znakami ns, użyj klawisza Tab do automatycznego uzupełniania, klawisza Enter do wykonania wiersza i klawisza Arrow Right do przesunięcia kursora do przodu. Edytowanie w środku kodu.

Problemy z Chromium: 1399436, 1276960

Różne wyróżnione informacje

Oto niektóre z najważniejszych poprawek w tej wersji:

  • Rozwiązaliśmy problem regresji w Narzędziach deweloperskich, który powodował, że nie zatrzymywały się one na instrukcji debugger w skryptach wbudowanych. (1385374)
  • Nowe ustawienie Konsola, które umożliwia domyślne rozwijanie lub zwijanie wiadomości console.trace(). Zmień ustawienia, klikając Ustawienia > Preferencje > Domyślnie rozwijaj komunikaty console.trace(). (1139616)
  • Panel Fragmenty w panelu Źródła obsługuje ulepszone automatyczne uzupełnianie podobne do tego w Konsoli. (772949) Autouzupełnianie we fragmentach.

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.