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

Jecelyn Yeen

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 najpierw przechodzi 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ł.

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 ścieżki 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.

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, co pozwala rejestrować w przepływach użytkownika tylko te selektory, które Cię interesują.

Problem z 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. Aby wprowadzić zmiany, nie musisz już kończyć nagrywania.

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.

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.

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.

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ódeł.

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

Ergonomiczne i spójne automatyczne uzupełnianie w konsoli

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

• Tab jest zawsze używany do automatycznego uzupełniania.
• Działanie symboli Arrow right i Enter zależy od kontekstu.
• Autouzupełnianie działa tak samo w edytorach tekstu, w panelach Konsola, Źródła i Elementy.

Na przykład po wpisaniu cons w konsoli:

• 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.

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

• Konsola wyróżnia wybraną opcję podczas poruszania się po liście sugestii za pomocą skrótów Arrow up i Arrow down.

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

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

Problemy z Chromium: 1399436, 1276960

Różne wyróżnione informacje

Oto niektóre ważne poprawki 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 autouzupełnianie, podobnie jak Konsola. (772949)

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.

Skontaktuj się 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.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

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