Nowości w Narzędziach dla deweloperów (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Obsługa debugowania WebAssembly

W Narzędziach deweloperskich włącz Ustawienia. Ustawienia > Eksperymenty > Pole wyboru. Debugowanie WebAssembly: domyślnie włącz obsługę DWARF. Więcej informacji znajdziesz w artykule Debugowanie WebAssembly za pomocą nowoczesnych narzędzi.

Ten eksperyment umożliwia wstrzymanie wykonywania i debugowania kodu w językach C i C++ w aplikacjach Wasm. Dzięki temu masz dostęp do wszystkich informacji na potrzeby debugowania:

  • Oryginalny kod źródłowy zmapowany przy użyciu danych debugowania DWARF.
  • Zrozumiałe nazwy funkcji w stosie wywołań.
  • Obsługa punktów przerwania i inne funkcje.

Aplikacja Wasm została wstrzymana w Debugerze.

Aby przetestować debugowanie Wasm, zainstaluj rozszerzenie Obsługa narzędzi deweloperskich w C/C++ (DWARF) i postępuj zgodnie z kodem podanym w wersji demonstracyjnej Mandelbrota.

Problem z Chromium: 1414289.

Ulepszone zbieranie kroków w aplikacjach Wasm

Zrób krok. Przejście w pierwotnym kodzie pozwala teraz uniknąć wstrzymywania demontażu (plik .wasm). Wcześniej był on wstrzymywany w tym miejscu.

Krokowanie kończy się jednak, gdy trafi poza funkcję, w której się rozpoczęła, np. po powrocie z funkcji.

To zachowanie jest domyślnie włączone w Ustawienia. Ustawienia > Preferencje > Źródła.

Kliknij „Preferencje”, a następnie „Źródła”.

Problem z Chromium: 1418938.

Debuguj autouzupełnianie za pomocą panelu Elementy i karty Problemy

Autouzupełnianie w Chrome automatycznie wypełnia formularze przy użyciu zapisanych informacji, takich jak adresy i dane karty. Aby ułatwić Ci debugowanie problemów związanych z autouzupełnianiem, w panelu Elementy możesz teraz wyróżniać je za pomocą czerwonych podkreśleń zakręconych.

Aby wypróbować tę funkcję, włącz Ustawienia. Ustawienia > Eksperymenty > Pole wyboru. Wyróżnia węzeł lub atrybut naruszający zasady w drzewie DOM panelu Elementy i sprawdź tę stronę demonstracyjną.

Problemy z autouzupełnianiem wyróżnione w panelu Elementy i zgłoszone w panelu Problemy.

Najedź kursorem na zaznaczony problem w drzewie DOM i kliknij Wyświetl problem, aby otworzyć kartę Problemy z listą wszystkich wykrytych problemów i wskazówkami na temat tego, co poszło nie tak.

Problem z Chromium: 1399414.

Asercje w Dyktafonie

W panelu Dyktafon możesz teraz dodawać asercje bezpośrednio podczas nagrywania i korzystać ze wszystkich danych czasu działania.

Aby dodać asercję, rozpocznij nowe nagranie, wejdź w interakcję ze swoją stroną i kliknij Dodaj asercję. Dyktafon wstawia krok o typie waitForElement, który możesz dostosować na bieżąco. Obejrzyj film, aby zobaczyć, jak działają asercje – w prezentacji dotyczącej wózka z kawą.

Z tego filmu dowiesz się, jak potwierdzić:

  • atrybutów HTML, np. class elementu.
  • Właściwości JavaScript w formacie JSON, np. .innerText.

Możesz też skonfigurować kroki, aby rejestrować na przykład instrukcje warunkowe w JavaScript, liczbę elementów podrzędnych węzła (count), widoczność elementów i inne. Więcej informacji znajdziesz w artykule Etapy konfiguracji.

Dodatkowo Dyktafon zapamiętuje teraz preferowany format skryptu w widoku kodu obok siebie i menu wyświetlanym po kliknięciu prawym przyciskiem myszy.

Problem z Chromium: 1423624.

Lighthouse 10.1.1

Panel Lighthouse działa teraz w Lighthouse w wersji 10.1.1, w związku z którą ważną zmianą wprowadziliśmy w wersji 10.1.0. Wszystkie audyty dotyczące adresów URL są teraz pogrupowane według jednostek i zagregowane statystyki liczbowe, takie jak rozmiar czy czas trwania. Popularne firmy zewnętrzne są również oznaczane tagami z uwzględnieniem ich kategorii, więc łatwiej jest określić ich cel na stronie.

Pogrupowane audyty według jednostek.

Podstawowe informacje na temat korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Zwiększona wydajność

performance.mark() pokazuje czas po najechaniu kursorem na stronę Skuteczność > Czasy

Metodaperformance.mark() pokazuje teraz czas działania, gdy najedziesz kursorem na odpowiedni znak w sekcji Skuteczność > Czas. Czas jest podawany w odniesieniu do poprzedniego zdarzenia nawigacji.

Wyskakujące okienko z informacjami o czasie po najechaniu kursorem w sekcji Czas.

Problem z Chromium: 1426762.

Polecenie profile() uzupełnia dane z sekcji Wydajność > Główny.

Polecenia profile() i profileEnd() w konsoli uruchamiają teraz i zatrzymują profilowanie procesora w głównym wątku panelu Wydajność.

Polecenie Console() tworzy profil w panelu Wydajność.

Problem z Chromium: 1429191.

Ostrzeżenie o powolnym działaniu

Przy interakcjach użytkownika dłuższych niż 200 milisekund na karcie Skuteczność > Podsumowanie wyświetla się ostrzeżenie Interakcja z następnym wyrenderowaniem (INP).

Ostrzeżenie INP.

Dodatkowo identyfikator interakcji został przeniesiony z etykietki do sekcji Podsumowanie.

Problemy z Chromium: 1432512, 1432509.

Ścieżka Web Vitals została przeniesiona

Z panelu Skuteczność usunięto te ścieżki:

  • Ścieżka wskaźników internetowych. Zamiast tego po najechaniu kursorem na odpowiednią pozycję znajdują się na ścieżce Czasy.
  • Ścieżka podrzędna Długie zadania. Odpowiednie zadania znajdziesz na ścieżce Głównej w kolorze czerwonym i czerwonym.

Zarówno ścieżki Web Vitals, jak i Long Tasks zawierały informacje zduplikowane w innym miejscu. Były też nieinteraktywne w porównaniu z lepszymi alternatywami, które po kliknięciu dostarczały bardziej szczegółowych informacji.

Przed przeniesieniem wskaźników internetowych do ścieżki czasu i po ich przeniesieniu.

Oprócz tego nazwa ścieżki Eksperymenty została zmieniona na Przesunięcia układu, by trafniej odzwierciedlić jej użycie.

Dowiedz się więcej o wskaźnikach internetowych.

Wycofanie programu profilującego JavaScript: faza trzecia

Już w Chrome 58 zespół Narzędzi deweloperskich planował ostatecznie wycofać narzędzie JavaScript Profiler, a deweloperzy korzystający z Node.js i Deno mogli korzystać z panelu Performance (Wydajność) do profilowania wydajności procesora JavaScript.

W Narzędziach deweloperskich w wersji 114 rozpoczyna się trzeci etap wycofywania czterofazowego narzędzia JavaScript Profiler. Na tym etapie usuniemy panel JavaScript Profiler z Narzędzi deweloperskich, ale nadal możesz go tymczasowo włączyć, klikając Ustawienia. Ustawienia > Eksperymenty i otwierając go za pomocą menu z 3 kropkami Menu z 3 kropkami..

JavaScript profilerujący JavaScript po kliknięciu Ustawienia, a następnie Eksperymenty.

Aby profilować wydajność procesora, użyj panelu Wydajność.

Problem z Chromium: 1428026.

Różne wyróżnienia

Oto kilka ważnych poprawek w tej wersji:

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.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 82 został anulowany.

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