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

Jecelyn Yeen

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

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 najpopularniejszy typ 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 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 zakresu czasu

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 skuteczności

Ulepszona kontrola powiększenia 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 z 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 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 do przodu, 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ć 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.

Wybieranie koloru poza przeglądarką

Problem z Chromium: 1245191

Ulepszona podgląd wartości 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ądowa wartość 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 uwierzytelniania.

Domyślnie to pole jest 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:

  • Możesz przełączać pasek boczny nawigacji (w lewo) za pomocą kombinacji klawiszy 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:

  • 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 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 rozpoznawaj względne adresy URL za pomocą adresu URL ramki

Problemy z Chromium: 1319828, 1318635, 1305475

Pobieranie kanałów podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. 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 ds. 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, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.