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.

Czyszczenie panelu Wydajność po ponownym załadowaniu.

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.

widok kodu w Dyktafonie.

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.

Nowa opcja dostosowywania typów selektorów.

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.

Edytowanie podczas nagrywania przepływu użytkownika.

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.

Pokazuj zminimalizowany plik przed automatycznym formatowaniem graficznym i po nim.

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, co ułatwiło jego odczytywanie i rozpoznawanie jego struktury, w tym Vue, JSX, Dart, LESS, SCSS, SASS i wbudowanego CSS.

Podświetlanie składni w Vue.

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.

Wbudowany podgląd Vue.

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.

Link do mapy źródeł dla SASS.

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. Obramowanie kropkowane wokół górnej opcji autouzupełniania.

  • 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. Wykonuje wiersz za pomocą 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 poruszania się po sugestiach.

  • Aby automatycznie uzupełnić wybraną opcję podczas nawigacji, użyj klawiszy Tab, Enter lub Arrow Right. Automatycznie uzupełniaj za pomocą wybranej opcji podczas nawigacji.

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

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(). Przełączaj ustawienia, klikając Ustawienia > Preferencje > Domyślnie rozwiń komunikaty Console.trace(). (1139616).
  • Okienko Fragmenty w panelu Źródła obsługuje ulepszone autouzupełnianie podobne do tych dostępnych w Konsoli. (772949) Autouzupełnianie we fragmentach

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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 82 został anulowany.

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