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ę plików 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 DWARF Support (Wsparcie dla narzędzi deweloperskich w C/C++) i wykonaj podane czynności, korzystając z 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.

Takie zachowanie jest domyślnie włączone w Ustawienia. Ustawienia > Ustawienia > Ź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 sekcję Skuteczność > Czasy

Metodaperformance.mark() pokazuje teraz czas działania, gdy najedziesz kursorem na odpowiedni znak w sekcji Skuteczność > Terminy. 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 pole Wydajność > Główne

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 w sekcji Skuteczność > pojawia się ostrzeżenie Interakcja z następnym wyrenderowaniem (INP) Podsumowanie.

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 usuwamy panel JavaScript Profiler z Narzędzi deweloperskich, ale nadal można go tymczasowo włączyć, klikając Ustawienia. Ustawienia > Eksperymenty – otwórz je 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 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.