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

Jecelyn Yeen

Czyszczenie panelu wydajności przy ponownym załadowaniu

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

Wcześniej w panelu Skuteczność wyświetlała się oś czasu ze zrzutami ekranu z poprzednich nagrań. Trudno było sprawdzić, kiedy rozpoczął się pomiar. Teraz panel zawsze przechodzi teraz najpierw na stronę about:blank, aby zagwarantować, że nagrywanie będzie się zaczynało od pustego logu czasu. Podobnie jest w przypadku panelu Statystyki skuteczności, który już wcześniej zawierał takie same informacje.

Czyszczę panel wydajności przy ponownym załadowaniu.

Problemy z Chromium: 1101268, 1382044

Aktualizacje Dyktafonu

Wyświetl i wyróżnij kod przepływu użytkownika w Dyktafonie.

Dyktafon udostępnia teraz podzielony widok kodu, co ułatwia wyświetlanie kodu przepływu użytkowników. Aby uzyskać dostęp do widoku kodu, otwórz interfejs użytkownika i kliknij Show Code (Pokaż kod).

Dyktafon podświetla odpowiedni kod, gdy najedziesz kursorem na każdy krok po lewej stronie, co ułatwia śledzenie przepływu. Format kodu możesz zmienić za pomocą menu, które pozwala przełączać się między formatami, np. skrypt Nightwatch Test.

Widok kodu w Dyktafonie.

Problem z Chromium: 1385489

Dostosuj typy selektorów nagrania

Możesz tworzyć nagrania obejmujące tylko te typy selektorów, które mają dla Ciebie znaczenie. Dzięki nowej opcji dostosowywania typów selektorów podczas tworzenia nowego nagrania możesz uwzględnić lub wykluczyć selektory, takie jak XPath, aby rejestrować tylko te selektory, które chcesz uwzględnić w procesie użytkownika.

Nowa opcja dostosowywania typów selektorów.

Problem z Chromium: 1384431

Edytuj przepływ użytkowników 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.

Edytowanie podczas nagrywania przepływu użytkowników

Problem z Chromium: 1381971

Automatyczny nadruk estetyczny

Teraz w panelu Źródła są automatycznie wyświetlane zminifikowane pliki źródłowe. Aby cofnąć tę czynność, kliknij przycisk odbitek { }.

Wcześniej w panelu Źródła domyślnie wyświetlane były treści zminimalizowane. Aby sformatować treść, trzeba było ręcznie kliknąć przycisk „Drukuj”. Poza tym stylizowane treści nie były wyświetlane na tej samej karcie, ale na innej karcie ::formatted.

Pokaż zmniejszony plik przed automatycznym umieszczeniem umiejscowionego w odpowiednim miejscu pięknie oraz po nim.

Problemy z Chromium: 1383453, 1382752, 1382397

Lepsze zaznaczanie składni i podgląd w treści w przypadku Vue, SCSS i innych funkcji

Panel Źródła ulepszył składnię kilku popularnych formatów plików, co ułatwiło odczytywanie kodu i rozpoznawanie jego struktury, m.in. Vue, JSX, Dart, LESS, SCSS, SASS i wbudowanych arkuszy CSS.

Wyróżnianie składni w Vue.

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

Wbudowany podgląd Vue.

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

Link do mapy źródłowej dla SASS.

Problemy z Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1351}1061351}106.

Ergonomiczne i spójne autouzupełnianie w konsoli

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

  • Na potrzeby autouzupełniania zawsze jest używany język Tab.
  • Działanie Arrow right i Enter różni się w zależności od kontekstu.
  • Działanie autouzupełniania jest spójne we wszystkich edytorach tekstu w panelach Konsola, Źródła i Elementy.

Jeśli na przykład wpiszesz cons w Konsoli, wykonaj te czynności:

  • W Konsoli pojawi się lista sugestii autouzupełniania z subtelnym, przerywanym obramowaniem wokół górnej opcji, co oznacza, że nawigacja jeszcze się nie rozpoczęła.Obramowanie przerywane wokół górnej opcji autouzupełniania.

  • Konsola uruchamia wiersz, gdy naciśniesz Enter. Wcześniej automatycznie uzupełniał wiersz o najlepszą sugestię. Aby automatycznie uzupełniać, naciśnij Tab lub Arrow Right. Uruchamia wiersz przy naciśnięciu klawisza Enter.

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

  • Aby podczas nawigacji korzystać z autouzupełniania wybranej opcji, użyj klawiszy Tab, Enter lub Arrow Right. Autouzupełnianie przy wybranej opcji podczas nawigacji.

  • Podczas edytowania kodu w środku kodu, np. gdy kursor znajduje się między n a s, użyj Tab do autouzupełniania, Enter, by uruchomić wiersz, i Arrow Right, aby przesunąć kursor do przodu.podczas edytowania kodu.

Problemy z Chromium: 1399436, 1276960

Inne ważne informacje

Oto kilka ważnych poprawek wprowadzonych w tej wersji:

  • Rozwiązaliśmy problem z regresją w Narzędziach deweloperskich, który uniemożliwiał zatrzymanie działania na instrukcji debugger we wbudowanych skryptach. (1385374)
  • Nowe ustawienie konsoli, które umożliwia domyślne rozwijanie lub zwijanie wiadomości console.trace(). Ustawienia możesz zmienić, klikając Settings (Ustawienia) > Preferences (Preferencje) > expand konsoli.trace() message domyślnie. (1139616).
  • Panel Fragmenty w panelu Źródła obsługuje rozszerzone autouzupełnianie, podobnie jak w konsoli. (772949) Autouzupełnianie we fragmentach.

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

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

101 Chrome

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

Subskrypcja Chrome 82 została anulowana.

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