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

Jecelyn Yeen

Przechwytuj zdarzenia dwukrotnego kliknięcia i kliknięcia prawym przyciskiem myszy w panelu Dyktafon

Panel Dyktafonu może teraz rejestrować zdarzenia dwukrotnego kliknięcia lub kliknięcia prawym przyciskiem myszy.

Przechwytuj zdarzenia dwukrotnego kliknięcia i kliknięcia prawym przyciskiem myszy w panelu Dyktafon

W tym przykładzie rozpocznij nagrywanie i spróbuj wykonać 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ę, w jaki sposób Dyktafon rejestruje te zdarzenia, rozwiń kroki:

  • Funkcja dwukrotnego kliknięcia jest rejestrowana jako type: doubleClick.
  • Zdarzenie kliknięcia prawym przyciskiem myszy jest rejestrowane jako type: click, ale z właściwością button ma wartość secondary. Wartość button normalnego kliknięcia myszą wynosi primary.

Problemy z Chromium: 1300839, 1322879, 1299701, 1323688

Nowy tryb czasowy i tryb migawki w panelu Lighthouse

Za pomocą Lighthouse możesz teraz mierzyć wydajność witryny po wczytaniu strony.

Nowy tryb czasowy i tryb migawki w panelu Lighthouse

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

  • Raporty nawigacyjne analizują wczytanie pojedynczej strony. Nawigacja to najczęstszy typ raportów. Wszystkie raporty Lighthouse przed obecną wersją to raporty nawigacyjne.
  • Raporty Przedziały czasu analizują dowolny przedział czasu, zwykle zawierający interakcje użytkowników.
  • Raporty Zrzuty analizują stronę w określonym stanie, zwykle po interakcji użytkownika.

Mierzmy na przykład skuteczność dodawania produktów do koszyka na tej stronie demonstracyjnej. Wybierz tryb Zakres czasu i kliknij Rozpocznij okres. Przewiń stronę i dodaj kilka produktów do koszyka. Gdy skończysz, kliknij Zakończ okres, aby wygenerować raport Lighthouse z interakcjami użytkowników.

Tryb zakresu czasu

Przeczytaj artykuł Przepływy użytkowników w Lighthouse, aby poznać unikalne przypadki użycia oraz korzyści i ograniczenia każdego trybu.

Problem z Chromium: 1291284

Aktualizacje statystyk skuteczności

Ulepszone sterowanie powiększeniem w panelu Statystyki wydajności

Narzędzia deweloperskie powiększają teraz widok na podstawie kursora myszy, a nie pozycji suwaka odtwarzania.Dzięki najnowszemu powiększaniu opartemu na kursorze możesz przesunąć mysz w dowolne miejsce na ścieżce i od razu powiększyć odpowiedni obszar.

Zapoznaj się ze statystykami skuteczności, aby dowiedzieć się, jak za pomocą panelu uzyskać przydatne statystyki i zwiększyć wydajność witryny.

Problem z Chromium: 1313382

Potwierdź, aby usunąć nagranie występu

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

Potwierdź, aby usunąć nagranie występu

Problem z Chromium: 1318087

Zmienianie kolejności paneli w panelu Elementy

Kolejność paneli w panelu Elementy możesz teraz zmieniać 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 początek, by mieć do niego łatwiejszy dostęp.

Zmienianie kolejności paneli w panelu Elementy

Problem z Chromium: 1146146

Wybieranie koloru poza przeglądarką

Narzędzia deweloperskie umożliwiają teraz wybór koloru poza przeglądarką. Wcześniej można było wybrać kolor tylko w przeglądarce.

W panelu Style kliknij podgląd dowolnego 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 wyświetla teraz podgląd wartości wbudowanych.

W tym przykładzie funkcja double ma parametr wejściowy a i zmienną x. Umieść punkt przerwania w wierszu return i uruchom kod. W podglądzie w treści strony wyświetlają się prawidłowo wartości a i x. Wcześniej debuger nie wyświetlał wartości x w podglądzie wbudowanym.

Ulepszony podgląd wartości wbudowanej podczas debugowania

Problem z Chromium: 1316340

Obsługuj duże obiekty blob dla wirtualnych uwierzytelniania

Karta WebAuthn zawiera teraz nowe pole wyboru Obsługuje duże obiekty blob dla wirtualnych uwierzytelniania.

To pole jest domyślnie wyłączone. Możesz go włączyć tylko w przypadku uwierzytelniania z protokołem ctap2, które obsługują klucze rezydentne.

Obsługuj duże obiekty blob dla wirtualnych uwierzytelniania

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:

  • Aby przełączyć nawigacyjny pasek boczny (w lewo), naciśnij Control / Command + Shift + Y
  • Aby przełączyć pasek boczny debugger (po prawej), naciśnij Control / Command + Shift + H

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

Problemy z Chromium: 1226363

Ulepszenia map źródeł

Wcześniej deweloperzy doświadczali awarii w tych sytuacjach:

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 skryptów wbudowanych i lokalizacji źródłowej.
  • Użyj informacji zastępczych dla lokalizacji tekstu ramki
  • Poprawne rozpoznawanie względnych adresów URL za pomocą adresu URL ramki

Problemy z Chromium: 1319828, 1318635, 1305475

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

101 Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Subskrypcja Chrome 82 została anulowana.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59