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

Jecelyn Yeen

Importowanie i eksportowanie zarejestrowanych ścieżek użytkownika jako pliku JSON

Panel Rejestrator obsługuje teraz importowanie i eksportowanie nagrań przepływu użytkownika jako pliku JSON. Ułatwia to udostępnianie ścieżek użytkownika i może być przydatne w przypadku zgłaszania błędów.

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

Możesz też wyeksportować nagranie. Po zarejestrowaniu ścieżki użytkownika kliknij przycisk eksportowania. Dostępne są 3 opcje eksportu:

  • Eksportowanie jako pliku JSON Pobierz nagranie jako plik JSON.
  • Eksportuj jako skrypt @puppeteer/replay. Pobierz nagranie jako skrypt Puppeteer Replay.
  • Eksportuj jako skrypt 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 Style

Warstwy kaskadowe umożliwiają bardziej precyzyjną kontrolę nad plikami CSS, co pozwala uniknąć konfliktów związanych ze specyficznością stylów. 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 zdefiniowane są 3 warstwy 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 Style

Problem w Chromium: 1240596

Obsługa funkcji koloru hwb()

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

W panelu Style przytrzymaj klawisz Shift i kliknij dowolny podgląd koloru, aby zmienić format koloru. Dodany zostanie format koloru HWB.

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

Funkcja koloru hwb()

Ulepszyliśmy wyświetlanie obiektów prywatnych

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

usługi prywatne w konsoli,

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

Różne wyróżnione informacje

Oto niektóre z najważniejszych poprawek w tej wersji:

[Eksperymentalne] Nowy tryb okresu i migawki w panelu Lighthouse

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

Możesz na przykład używać raportów dotyczących okresu do analizowania interakcji użytkowników. Otwórz tę stronę demonstracyjną. Wybierz tryb Przedział czasu i kliknij Rozpocznij przedział czasu. Na stronie kliknij kawę i zakończ okres. W raporcie znajdziesz łączny czas blokowania i skumulowane przesunięcie układu spowodowane przez interakcję.

Każdy tryb ma własne, unikalne przypadki użycia, zalety i ograniczenia. Więcej informacji znajdziesz w dokumentacji Lighthouse.

Tryb okresu i migawki w panelu Lighthouse

Problem w Chromium: 772558

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.

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

Co nowego w Narzędziach deweloperskich

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