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.

Poza tym możesz też wyeksportować nagranie. Po nagraniu ś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()

Ulepszyliśmy wyświetlanie obiektów prywatnych.

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)

[Eksperymentalnie] 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żytkownika: 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 przeglądarki Chrome w wersji Canary, Dev lub Beta. 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.