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

Jecelyn Yeen

Czyszczenie panelu wydajności po ponownym załadowaniu

Po kliknięciu przycisku Rozpocznij profilowanie i załaduj ponownie stronę w panelu Wydajność zostanie wyczyszczony zrzut ekranu i zrzut.

Wcześniej w panelu Skuteczność wyświetlała się oś czasu ze zrzutami ekranu z poprzednich nagrań. Utrudniało to określenie, kiedy rozpoczął się rzeczywisty pomiar. Panel zawsze przechodzi teraz najpierw do strony about:blank, aby zagwarantować, że nagrywanie rozpocznie się od pustego logu czasu. Jest to zgodne z panelem Statystyki skuteczności, w którym do tej pory było to samo.

Problemy z Chromium: 1101268, 1382044

Aktualizacje Dyktafonu

Wyświetl i wyróżnij kod wzorca przeglądania w Dyktafonie

W Dyktafonie jest teraz dostępny widok podzielonego kodu, który ułatwia przeglądanie kodu przepływu użytkownika. Aby uzyskać dostęp do widoku kodu, otwórz wzorzec użytkownika i kliknij Pokaż kod.

Dyktafon wyróżnia odpowiedni kod po najechaniu kursorem na każdy krok z lewej strony, ułatwiając śledzenie. Format kodu możesz zmienić w menu, które umożliwia przełączanie się między formatami, np. skrypt Nightwatch Test.

Problem w Chromium: 1385489

Dostosowywanie typów selektora nagrania

Możesz tworzyć nagrania, które rejestrują tylko te typy selektorów, które mają dla Ciebie znaczenie. Dzięki nowej opcji dostosowania typów selektorów podczas tworzenia nowego nagrania możesz uwzględniać lub wykluczać selektory, takie jak XPath, dzięki czemu rejestrujesz tylko te selektory, które chcesz uwzględnić w ścieżce użytkownika.

Problem z Chromium: 1384431

Edytuj wzorzec przeglądania podczas nagrywania

Dyktafon umożliwia teraz edytowanie podczas nagrywania, dzięki czemu możesz wprowadzać zmiany w czasie rzeczywistym. Nie musisz już kończyć nagrywania, aby wprowadzić zmiany.

Problem z Chromium: 1381971

Automatyczny, spersonalizowany wygląd strony

Panel Źródła automatycznie drukuje zminimalizowane pliki źródłowe. Możesz kliknąć przycisk Tryb wydruku { }, aby cofnąć tę czynność.

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 Drukuj ładnie. Dodatkowo treści w formacie ładnym nie były wyświetlane na tej samej karcie, ale na innej karcie ::formatted.

Problemy z Chromium: 1383453, 1382752, 1382397

Ulepszone wyróżnienie składni i wbudowany podgląd w językach Vue, SCSS i innych

W panelu Źródła ulepszyliśmy wyróżnianie składni w kilku popularnych formatach plików. Dzięki temu łatwiej jest czytać kod i rozpoznawać jego strukturę, w tym Vue, JSX, Dart, LESS, SCSS, SASS i wbudowany kod CSS.

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

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

Problemy z Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 13921061392106{/16

Ergonomiczne i spójne autouzupełnianie w konsoli

Narzędzia deweloperskie usprawniają działanie autouzupełniania, wprowadzając te zmiany:

• Pole Tab jest zawsze używane do autouzupełniania.
• Działanie funkcji Arrow right i Enter zależy od kontekstu.
• Autouzupełnianie jest spójne we wszystkich edytorach tekstu w panelach Konsola, Źródła i Elementy.

Gdy na przykład wpiszesz cons w Konsoli, to na przykład:

• Konsola wyświetla listę sugestii autouzupełniania z subtelnym kropkowaną ramką wokół górnej opcji, która wskazuje, że nawigacja jeszcze się nie rozpoczęła.

• Konsola wykonuje wiersz, gdy naciśniesz Enter. Wcześniej automatycznie uzupełniał on wiersz o najlepszą sugestię. Aby uzupełnić automatycznie, 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 automatycznie uzupełnić wybraną opcję podczas nawigacji, użyj klawiszy Tab, Enter lub Arrow Right.

• Gdy np. edytujesz kod w środku kodu, gdy kursor znajduje się między n a s, użyj opcji Tab w przypadku autouzupełniania, Enter do wykonania wiersza i Arrow Right, by przesunąć kursor do przodu.

Problemy z Chromium: 1399436, 1276960

Różne wyróżnienia

Oto kilka ważnych poprawek w tej wersji:

• Rozwiązaliśmy problem z regresją w Narzędziach deweloperskich, w wyniku którego nie udało się zatrzymać działania na instrukcji debugger we wbudowanych skryptach. (1385374).
• Nowe ustawienie konsoli, które umożliwia domyślne rozwijanie i zwijanie wiadomości console.trace(). Zmień ustawienia, klikając Ustawienia > Ustawienia > Domyślne rozwijanie komunikatów Console.trace(). (1139616).
• Okienko Fragmenty w panelu Źródła obsługuje ulepszone autouzupełnianie podobne do tych dostępnych w Konsoli. (772949)

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