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

Jecelyn Yeen

Rejestrowanie zdarzeń dwukrotnego i prawego kliknięcia w panelu Rejestrator

Panel Rejestrator może teraz rejestrować zdarzenia dwukrotnego kliknięcia 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 Rejestrator zarejestrował te zdarzenia, rozwiń poszczególne kroki:

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

Problemy z Chromium: 1300839, 1322879, 1299701, 1323688

Nowy tryb okresu i migawki w panelu Lighthouse

Za pomocą Lighthouse możesz teraz mierzyć wydajność witryny nie tylko pod kątem szybkości wczytywania strony.

Panel Lighthouse obsługuje teraz 3 tryby pomiaru przepływu użytkowników:

• Raporty Nawigacja analizują ładowanie pojedynczej strony. Najpopularniejszym typem raportu jest nawigacja. Wszystkie raporty Lighthouse sprzed bieżącej wersji to raporty nawigacyjne.
• Raporty okresów analizują dowolne okresy, zwykle obejmujące interakcje z użytkownikiem.
• Raporty Migawki analizują stronę w konkretnym stanie, zwykle po interakcji z użytkownikiem.

Zmierzmy na przykład skuteczność dodawania produktów do koszyka na tej stronie demonstracyjnej. Wybierz tryb Przedział czasu i kliknij Rozpocznij przedział czasu. Przewiń widok i dodaj kilka produktów do koszyka. Gdy skończysz, kliknij Zakończ przedział czasu, aby wygenerować raport Lighthouse dotyczący interakcji użytkownika.

Więcej informacji o unikalnych przypadkach użycia, zaletach i ograniczeniach każdego trybu znajdziesz w artykule Przepływy użytkowników w Lighthouse.

Problem w Chromium: 1291284

Aktualizacje statystyk wydajności

Ulepszona kontrola powiększenia w panelu Statystyki wydajności

Narzędzia deweloperskie będą teraz powiększać widok na podstawie położenia kursora myszy, a nie pozycji głowicy odtwarzania.Dzięki najnowszej funkcji powiększania opartej na kursorze możesz przesunąć mysz w dowolne miejsce na ścieżce i od razu powiększyć wybrany obszar.

Więcej informacji o tym, jak uzyskać przydatne statystyki i zwiększyć wydajność witryny za pomocą tego panelu, znajdziesz w sekcji Statystyki wydajności.

Problem w Chromium: 1313382

Potwierdź usunięcie nagrania występu

Narzędzia deweloperskie wyświetlają teraz okno z prośbą o potwierdzenie przed usunięciem nagrania wydajności.

Problem w Chromium: 1318087

Zmiana kolejności paneli w panelu Elementy

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

Na przykład po otwarciu Narzędzi deweloperskich na wąskim ekranie panel Ułatwienia dostępu jest ukryty pod przyciskiem Pokaż więcej. Jeśli często debugujesz problemy z ułatwieniami dostępu, możesz teraz przeciągnąć panel na wierzch, aby mieć do niego łatwiejszy dostęp.

Problem w Chromium: 1146146

Wybieranie koloru poza przeglądarką

Narzędzia deweloperskie obsługują teraz wybieranie kolorów poza przeglądarką. Wcześniej można było wybrać kolor tylko 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 w Chromium: 1245191

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

Debuger wyświetla teraz prawidłowo podgląd wartości w tekście.

W tym przykładzie funkcja double ma parametr wejściowy a i zmienną x. Ustaw punkt przerwania w wierszu return i uruchom kod. Podgląd w tekście prawidłowo wyświetla wartości a i x. Wcześniej debugger nie wyświetlał wartości x w podglądzie w tekście.

Problem z Chromium: 1316340

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

Na karcie WebAuthn pojawiło się nowe pole wyboru Obsługuje duże obiekty blob w przypadku wirtualnych uwierzytelniaczy.

Domyślnie to pole wyboru jest wyłączone. Możesz ją włączyć tylko w przypadku uwierzytelniaczy z protokołem ctap2, które obsługują klucze rezydentne.

Problem w Chromium: 1321803

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

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

• Włączanie i wyłączanie paska bocznego nawigacji (po lewej stronie) za pomocą klawiszy Control / Command + Shift + Y
• Włączanie i wyłączanie paska bocznego debuggera (po prawej stronie) za pomocą klawiszy Control / Command + Shift + H

Problemy z Chromium: 1226363

Ulepszenia map źródłowych

Wcześniej deweloperzy mogli napotkać losowe błędy podczas:

• Debugowanie na przykładzie Codepen
• Określanie lokalizacji źródłowej problemów z wydajnością w przykładzie Codepen
• Brak karty Komponent, gdy włączone są Narzędzia deweloperskie React

Oto kilka poprawek w mapach źródła, które poprawiają ogólną jakość debugowania:

• Prawidłowe mapowanie lokalizacji i przesunięcia w przypadku skryptów wbudowanych i lokalizacji źródłowej
• Używanie informacji zastępczych dotyczących lokalizacji tekstu w ramce
• Prawidłowe rozwiązywanie względnych adresów URL za pomocą adresu URL ramki

Problemy z Chromium: 1319828, 1318635, 1305475

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię 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 w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.