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

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.

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

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.

Nowy tryb zakresu czasu i zrzutu w panelu Lighthouse

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.

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

Potwierdź, aby usunąć nagranie wykonania

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.

Zmiana kolejności paneli w panelu Elementy

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.

Wybieranie koloru poza przeglądarką

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 wyświetla wartości a i x. Wcześniej debuger nie wyświetlał wartości x we wbudowanym podglądzie.

Ulepszony podgląd wartości wbudowanej podczas debugowania

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

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.

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

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

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

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   Więcej > 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.