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

Jecelyn Yeen

Przechwytuj zdarzenia kliknięcia dwukrotnie lub prawym przyciskiem myszy w panelu Dyktafon

Panel Dyktafon może teraz przechwytywać zdarzenia kliknięcia 2 razy lub prawym przyciskiem myszy.

W tym przykładzie rozpocznij nagrywanie i spróbuj wykonać te czynności:

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

Aby dowiedzieć się, jak Dyktafon przechwytuje te zdarzenia, rozwiń poniższe kroki:

• Dwukrotne kliknięcie jest rejestrowane jako type: doubleClick.
• Zdarzenie kliknięcia prawym przyciskiem jest rejestrowane jako type: click, ale właściwość button ma wartość secondary. Wartość button zwykłego kliknięcia myszy wynosi primary.

Problemy z Chromium: 1300839, 1322879, 1299701, 1323688

Nowy tryb zakresu czasu i zrzutu w panelu Lighthouse

Możesz teraz używać Lighthouse, aby mierzyć skuteczność witryny poza wczytaniem strony.

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

• Raporty nawigacji analizują pojedyncze wczytanie strony. Nawigacja jest najpopularniejszym typem raportu. Wszystkie raporty Lighthouse przed bieżącą wersją to raporty nawigacji.
• Raporty Przedziały czasu analizują dowolny okres, który zwykle obejmuje interakcje użytkowników.
• Raporty Zrzuty dysku analizują stronę w konkretnym stanie, zwykle po interakcji użytkownika z nią.

Zmierzmy np. skuteczność dodawania produktów do koszyka na tej stronie demonstracyjnej. Wybierz tryb Zakres czasu i kliknij Rozpocznij okres. Przewiń i dodaj kilka produktów do koszyka. Gdy skończysz, kliknij Zakończ okres, aby wygenerować raport Lighthouse dotyczący interakcji użytkowników.

Zapoznaj się z artykułem Przepływ użytkowników w Lighthouse, aby poznać unikalne przypadki użycia, zalety i ograniczenia poszczególnych trybów.

Problem z Chromium: 1291284

Aktualizacje Statystyk wydajności

Ulepszona kontrola powiększenia w panelu Statystyki wydajności

Powiększenie zależy teraz od kursora myszy, a nie od pozycji suwaka odtwarzania.Dzięki najnowszym powiększeniu opartym na kursorach możesz przesunąć mysz w dowolne miejsce na ścieżce i od razu powiększyć wybrany obszar.

Zobacz Statystyki wydajności, aby dowiedzieć się, jak uzyskiwać przydatne statystyki i zwiększać wydajność witryny za pomocą panelu.

Problem z Chromium: 1313382

Potwierdź, aby usunąć nagranie wykonania

Przed usunięciem nagrania wydajności w Narzędziach deweloperskich wyświetla się teraz okno z potwierdzeniem.

Problem w Chromium: 1318087

Zmiana 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 Narzędzia deweloperskie 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 wierzch, aby mieć do niego łatwiejszy dostęp.

Problem z Chromium: 1146146

Wybieranie koloru poza przeglądarką

Narzędzia deweloperskie obsługują teraz wybieranie koloru 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 zakraplacza, aby wybrać kolor z dowolnego miejsca.

Problem z Chromium: 1245191

Ulepszony podgląd wartości wbudowanej podczas debugowania

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

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

Problem z Chromium: 1316340

Obsługuj duże bloby na potrzeby wirtualnych uwierzytelniających

Karta WebAuthn zawiera teraz nowe pole wyboru Obsługuje duże blob dla wirtualnych uwierzytelniających.

Domyślnie to pole jest wyłączone. Możesz ją włączyć tylko w przypadku aplikacji uwierzytelniających z protokołem ctap2, który obsługuje kluczyki dla mieszkańców.

Problem z Chromium: 1321803

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

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

• Możesz przełączać pasek boczny nawigacji (w lewo) za pomocą kombinacji klawiszy Control / Command + Shift + Y
• Przełącz pasek boczny debugera (po prawej) za pomocą klawiszy Control / Command + Shift + H

Problemy z Chromium: 1226363

Ulepszenia map źródłowych

Wcześniej deweloperzy występujący w przypadku awarii występowały w czasie:

• Przykład debugowania za pomocą narzędzia Codepen
• Identyfikowanie lokalizacji źródłowej problemów z wydajnością w przykładzie narzędzia Codepen
• Brak karty Komponent, gdy włączone są Narzędzia deweloperskie React

Oto kilka poprawek dotyczących map źródeł, które poprawiają ogólne działanie debugowania:

• Prawidłowe mapowanie lokalizacji i przesunięcia w przypadku wbudowanych skryptów i lokalizacji źródłowej
• Użyj informacji zastępczych o lokalizacji tekstu w ramce
• Prawidłowo rozpoznawaj względne adresy URL za pomocą adresu URL ramki

Problemy z Chromium: 1319828, 1318635, 1305475

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   > 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.