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

Jecelyn Yeen

rejestrować zdarzenia dwukrotnego kliknięcia i kliknięcia prawym przyciskiem myszy w panelu Rejestrator.

Panel Nagrywarka może teraz rejestrować zdarzenia kliknięcia dwukrotnego i kliknięcia prawym przyciskiem myszy.

rejestrować zdarzenia dwukrotnego kliknięcia i kliknięcia prawym przyciskiem myszy w panelu Rejestrator.

W tym przykładzie rozpocznij nagrywanie i wykonaj te czynności:

  • Kliknij dwukrotnie kartę, aby ją powiększyć
  • Kliknij kartę prawym przyciskiem myszy i wybierz działanie z menu kontekstowego.

Aby dowiedzieć się, jak nagrywarka rejestruje te zdarzenia, rozwiń te czynności:

  • Kliknięcie dwukrotne jest rejestrowane jako type: doubleClick.
  • Zdarzenie kliknięcia prawym przyciskiem myszy jest rejestrowane jako type: click, ale z właściwością button ustawioną na secondary. Wartość button normalnego kliknięcia myszą to primary.

Problemy z Chromium: 1300839, 1322879, 1299701, 1323688

Nowy okres i tryb migawki w panelu Lighthouse

Możesz teraz używać narzędzia Lighthouse do pomiaru wydajności witryny wykraczającej poza wczytywanie strony.

Nowy okres i tryb migawki w panelu Lighthouse

Panel Lighthouse obsługuje teraz 3 tryby pomiaru ścieżki użytkownika:

  • Raporty Nawigacja analizują ładowanie pojedynczej strony. Nawigacja to najczęstszy typ raportu. Wszystkie raporty Lighthouse sprzed bieżącej wersji to raporty nawigacyjne.
  • Raporty Okresy analizują dowolne okresy, zwykle obejmujące interakcje z użytkownikiem.
  • Raporty migawek analizują strony w konkretnym stanie, zwykle po interakcji z użytkownikiem.

Załóżmy na przykład, że chcemy zmierzyć skuteczność dodawania produktów do koszyka na tej stronie demonstracyjnej. Wybierz tryb Przedział czasowy i kliknij Rozpocznij przedział czasowy. Przewiń stronę i dodaj kilka produktów do koszyka. Gdy skończysz, kliknij Zakończ przedział czasowy, aby wygenerować raport Lighthouse o interakcjach użytkownika.

Tryb okresu

Zapoznaj się z przepływami użytkownika w Lighthouse, aby dowiedzieć się więcej o niezwykłych zastosowaniach, zaletach i ograniczeniach poszczególnych trybów.

Problem z Chromium: 1291284

Aktualizacje Statystyk skuteczności

Ulepszone sterowanie powiększeniem w panelu Statystyki wydajności

Narzędzia programistyczne będą teraz powiększać obraz na podstawie kursora myszy, a nie pozycji odtwarzacza.Dzięki najnowszemu powiększaniu na podstawie kursora możesz przesunąć mysz w dowolne miejsce na ścieżce i od razu powiększyć wybrany obszar.

Otwórz Statystyki wydajności, aby dowiedzieć się, jak uzyskiwać przydatne statystyki i poprawiać wydajność witryny za pomocą tego panelu.

Problem z Chromium: 1313382

Potwierdź, że chcesz usunąć nagranie występu

DevTools wyświetla teraz okno potwierdzenia przed usunięciem nagrania wydajności.

Potwierdź, że chcesz usunąć nagranie występu

Problem z Chromium: 1318087

Zmienianie kolejności paneli w panelu Elementy

Możesz teraz zmieniać kolejność paneli w panelu Elementy zgodnie ze swoimi preferencjami.

Jeśli na przykład otworzysz DevTools na wąskim ekranie, panel Ułatwienia dostępu będzie ukryty pod przyciskiem Pokaż więcej. Jeśli często debugujesz problemy z ułatwieniami dostępu, możesz teraz przeciągnąć panel na pierwszy plan, aby mieć do niego łatwiejszy dostęp.

Zmienianie kolejności paneli w panelu Elementy

Problem z Chromium: 1146146

Wybieranie koloru poza przeglądarką

Narzędzia dla deweloperów obsługują teraz wybieranie kolorów poza przeglądarką. Wcześniej można było wybrać tylko kolor w przeglądarce.

W panelu Style kliknij dowolny podgląd koloru, aby otworzyć selektor kolorów. Użyj pipety, aby wybrać kolor z dowolnego miejsca.

Wybieranie koloru poza przeglądarką

Problem z Chromium: 1245191

Ulepszona podglądowa wartość w tekście podczas debugowania

Debuger wyświetla teraz prawidłowo podgląd wartości wbudowanych.

W tym przykładzie funkcja double ma parametr wejściowy a i zmienną x. Umieść punkt przerwania na wierszu return i uruchom kod. Podgląd w linii prawidłowo wyświetla wartości a i x. Wcześniej w podglądzie wbudowanym debuger nie wyświetlał wartości x.

Ulepszona podgląd wartości w tekście podczas debugowania

Problem z Chromium: 1316340

Obsługa dużych blobów w przypadku wirtualnych mechanizmów uwierzytelniających

Na karcie WebAuthn znajduje się teraz nowe pole wyboru Obsługuje duże bloby dotyczące wirtualnych narzędzi uwierzytelniających.

To pole wyboru jest domyślnie wyłączone. Możesz go włączyć tylko w przypadku uwierzytelniania z protokołem ctap2, który obsługuje klucze rezydenta.

Obsługa dużych blobów w przypadku wirtualnych mechanizmów uwierzytelniających

Problem z Chromium: 1321803

Nowe skróty klawiszowe w panelu Źródła

W panelu Źródła są teraz dostępne 2 nowe skróty klawiszowe:

  • przełączanie panelu nawigacji (po lewej stronie) za pomocą Control / Command + Shift + Y,
  • Przełącz panel debugera (po prawej stronie) za pomocą klawiszy Control / Command + Shift + H.

Nowe skróty klawiszowe w panelu źródeł

Problemy z Chromium: 1226363

Ulepszenia map źródłowych

Wcześniej deweloperzy doświadczali losowych awarii podczas:

Oto kilka poprawek map źródeł, które poprawiają ogólne wrażenia podczas debugowania:

  • Prawidłowe mapowanie między lokalizacją a przesunięciem w przypadku osadzonych skryptów i źródłowej lokalizacji
  • Używanie informacji zastępczych do określenia lokalizacji tekstu w ramce
  • Prawidłowo rozwiązywać adresy URL względne za pomocą adresu URL ramki

Problemy z Chromium: 1319828, 1318635, 1305475

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ędziach deweloperskich.