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

Jecelyn Yeen

Importowanie i eksportowanie zarejestrowanych wzorców użytkowników do pliku JSON

Panel Dyktafon obsługuje teraz importowanie i eksportowanie nagrań przepływu użytkownika w postaci pliku JSON. Ta funkcja ułatwia udostępnianie ścieżek użytkownika i może być przydatna do zgłaszania błędów.

Możesz na przykład pobrać ten plik JSON. Możesz go zaimportować za pomocą przycisku importowania i odtworzyć ścieżkę użytkownika.

Poza tym możesz też wyeksportować nagranie. Po nagraniu ścieżki użytkownika kliknij przycisk eksportu. Dostępne są 3 opcje eksportu:

  • Eksportowanie jako plik JSON. Pobierz nagranie jako plik JSON.
  • Eksportuj jako skrypt @puppeteer/replay. Pobierz nagranie jako skrypt Puppeteer Replay.
  • Eksportowanie jako skryptu Puppeteer . Pobierz nagranie jako skrypt Puppeteer.

Więcej informacji o różnicach między tymi opcjami znajdziesz w dokumentacji.

Opcje eksportowania w panelu Dyktafon

Problem z Chromium: 1257499

Wyświetlanie warstw kaskadowych w panelu Styl

Warstwy kaskadowe dają dokładniejszą kontrolę nad plikami CSS, co pozwala zapobiegać konfliktom związanym ze stylami. Jest to szczególnie przydatne w przypadku dużych baz kodu, systemów projektowania i zarządzania stylami innych firm w aplikacjach.

W tym przykładzie zdefiniowano 3 poziomy kaskadowe: page, component i base. W panelu Style możesz wyświetlić każdą warstwę i jej style.

Kliknij nazwę warstwy, aby wyświetlić kolejność warstw. Warstwa page ma najwyższą specyficzność, dlatego tło box jest zielone.

Wyświetlanie warstw kaskadowych w panelu Styl

Problem z Chromium: 1240596

Obsługa funkcji kolorów hwb()

W Narzędziach deweloperskich możesz teraz wyświetlać i edytować format kolorów HWB.

Aby zmienić format koloru, w panelu Style przytrzymaj klawisz Shift i kliknij dowolny podgląd koloru. Dodano format kolorów HWB.

Możesz też zmienić format kolorów na HWB w selektorze kolorów.

Funkcja kolorów hwb()

Ulepszony wyświetlacz prywatnych obiektów

Narzędzia deweloperskie prawidłowo oceniają i wyświetlają prywatne metody dostępu. Wcześniej w Konsoli i panelu Źródła nie można było rozwijać klas z prywatnymi metodami dostępu.

prywatnych usług w Konsoli.

Problemy z Chromium: 1296855, https://crbug.com/1303407

Inne wyróżnione informacje

Oto kilka istotnych poprawek w tej wersji:

  • Pamięć podręczna stanu strony internetowej wyświetla teraz identyfikator rozszerzenia, który blokuje element bfcache, gdy jest dostępny (1284548).
  • Naprawiono obsługę autouzupełniania w przypadku obiektów podobnych do tablic, nazw klas CSS, map.get i tagów HTML. (1297101, 1297491, 1293807, 1296983)
  • Naprawiono nieprawidłowe wyróżnianie podczas podwójnego klikania słów i cofania autouzupełniania. (1298437, 1298667)
  • Rozwiązaliśmy problem ze skrótem klawiszowym do komentowania w panelu Źródła. (1296535)
  • Włącz ponownie obsługę klawisza Alt (Opcje) w przypadku wielokrotnego wyboru w panelu Źródła. (1304070)

[Experimental] Nowy okres i tryb migawki w panelu Lighthouse

Oprócz dotychczasowego trybu nawigacji panel Lighthouse obsługuje teraz 2 dodatkowe tryby pomiaru ścieżek użytkowników: okres i migawka.

Możesz na przykład użyć raportów okres do analizowania interakcji użytkowników. Otwórz tę stronę prezentacji. Wybierz tryb Przedział czasowy i kliknij Rozpocznij przedział czasowy. Na stronie kliknij kawę i zakończ przedział czasu. Przeczytaj raport, aby poznać łączny czas blokowania i skumulowaną zmianę układu spowodowane przez interakcję.

Każdy tryb ma swoje unikalne przypadki użycia, korzyści i ograniczenia. Więcej informacji znajdziesz w dokumentacji Lighthouse.

Tryb okresu i migawki w panelu Lighthouse

Problem z Chromium: 772558

Pobieranie kanałów podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.