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.

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.

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.

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.

Aby dowiedzieć się, jak korzystać z panelu Statystyki wydajności, aby uzyskiwać przydatne statystyki i poprawiać wydajność witryny,

Problem z Chromium: 1313382

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

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

Problem z Chromium: 1318087

Zmienianie kolejności paneli w panelu Elementy

Teraz możesz zmieniać kolejność paneli w panelu Elementy zgodnie ze swoimi preferencjami.

Jeśli na przykład otworzysz Narzędzia programistyczne 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 do przodu, aby mieć do niego łatwiejszy dostęp.

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.

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.

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.

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.

Problemy z Chromium: 1226363

Ulepszenia map źródłowych

Wcześniej deweloperzy doświadczali losowych awarii podczas:

• Debugowanie na przykładzie Codepen
• Identyfikowanie źródła problemów ze skutecznością na przykładzie Codepen
• Brak karty Składnik, gdy włączone są Narzędzie deweloperskie React

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.

• Przesyłaj opinie i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi.
• Wyślij tweeta do @ChromeDevTools.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziech deweloperskich.