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. Ułatwia to udostępnianie ścieżek użytkowników i może się przydać przy zgłaszaniu błędów.

Pobierz na przykład ten plik JSON. Możesz go zaimportować za pomocą przycisku importowania i ponownie odtworzyć proces użytkownika.

Oprócz tego możesz wyeksportować nagranie. Po zarejestrowaniu wzorca przeglądania kliknij przycisk eksportowania. Dostępne są 3 opcje eksportu:

  • Wyeksportuj jako plik JSON. Pobierz nagranie jako plik JSON.
  • Wyeksportuj jako skrypt @puppeteer/replay. pobrać nagranie jako skrypt Puppeteer Replay.
  • Wyeksportuj jako skrypt Puppeteer . pobrać nagranie jako skrypt Puppeteer.

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

Opcje eksportu w panelu Dyktafon

Problem w Chromium: 1257499

W panelu Style możesz wyświetlić warstwy kaskadowe

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 oraz zarządzania stylami innych firm w aplikacjach.

W tym przykładzie zdefiniowano 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ą dokładność, dlatego tło box jest zielone.

W panelu Style możesz wyświetlić warstwy kaskadowe

Problem w Chromium: 1240596

Obsługa funkcji kolorów hwb()

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

W panelu Style przytrzymaj klawisz Shift i kliknij dowolny podgląd koloru, aby zmienić format koloru. Zostanie dodany format kolorów HWB.

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

Funkcja kolorów hwb()

Ulepszono wyświetlanie właściwości prywatnych

Narzędzia deweloperskie poprawnie oceniają i wyświetlają prywatne akcesoria. Wcześniej w konsoli i panelu Źródła nie można było rozwijać zajęć z użyciem prywatnych akcesorów.

usługi prywatne w konsoli

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

Różne wyróżnienia

Oto kilka ważnych 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).
  • Poprawiono obsługę autouzupełniania obiektów tablicowych, nazw klas CSS, tagów map.get i tagów HTML. (1297101, 1297491, 1293807, 1296983)
  • Naprawiliśmy nieprawidłowe podświetlenia występujące podczas dwukrotnego klikania słów i cofania autouzupełniania. (1298437, 1298667)
  • Naprawiono skrót klawiszowy komentarza w panelu Źródła. (1296535).
  • Włącz ponownie obsługę klawisza Alt (Opcje) w przypadku wielokrotnego wyboru w panelu Źródła. (1304070).

[Funkcja eksperymentalna] Nowy tryb zakresu czasu i migawki w panelu Lighthouse

Oprócz dotychczasowego trybu nawigacji panel Lighthouse obsługuje teraz 2 kolejne tryby pomiaru przepływu użytkowników: Czas i Podsumowanie.

Możesz na przykład użyć raportów okres do analizowania interakcji użytkowników. Otwórz tę stronę demo. Wybierz tryb Zakres czasu i kliknij Rozpocznij okres. Na stronie kliknij kawę i zamknij przedział czasu. Przeczytaj raport, aby sprawdzić wartości Całkowity czas blokowania i Skumulowane przesunięcie układu, które były spowodowane daną interakcją.

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

Tryb czasu i migawki w panelu Lighthouse

Problem w Chromium: 772558

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 w Narzędziach deweloperskich.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o 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.