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

Jecelyn Yeen

Importowanie i eksportowanie zarejestrowanych ścieżek użytkownika jako plików JSON

Panel Rejestrator obsługuje teraz importowanie i eksportowanie nagrań ścieżki użytkownika jako plików 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.

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

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

Aby dowiedzieć się więcej o różnicach między tymi opcjami, zapoznaj się z dokumentacją.

Opcje eksportowania w panelu Dyktafon

Problem z Chromium: 1257499

Wyświetlanie warstw kaskadowych w panelu Styl

Warstwy kaskadowe umożliwiają bardziej wyraźną kontrolę nad plikami CSS, aby 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 koloru 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 najciekawsze momenty

Oto kilka istotnych poprawek w tej wersji:

  • Pamięć podręczna stanu strony internetowej wyświetla teraz identyfikator rozszerzenia, które zablokowało bfcache, jeśli 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)
  • Ponownie włącz obsługę klawisza Alt (Opcje) w panelu Źródła do wielokrotnego zaznaczania. (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 np. analizować interakcje użytkowników za pomocą raportów okresu. Otwórz tę stronę demonstracyjną. 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 zastosowania, zalety 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 jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. 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ędziech deweloperskich.