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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Obsługa debugowania WebAssembly

Narzędzia deweloperskie umożliwiają Ustawienia. Ustawienia > Eksperymenty > Pole wyboru. Debugowanie WebAssembly: włącz obsługę DWARF domyślnie. Więcej informacji znajdziesz w artykule Debugowanie WebAssembly za pomocą nowoczesnych narzędzi.

Ten eksperyment umożliwia wstrzymywanie wykonywania i debugowanie kodu C i C++ w aplikacjach Wasm z dostępem do wszystkich informacji debugowania:

  • Oryginalny kod źródłowy, mapowany za pomocą informacji debugowania DWARF.
  • zrozumiałe nazwy funkcji w stosie wywołań;
  • obsługa punktów przełamania,

Wstrzymana w debugerze aplikacja Wasm.

Aby przetestować debugowanie w Wasm, zainstaluj rozszerzenie DevTools dla C/C++ (DWARF) i przejdź przez kod w demonstracji Mandelbrota.

Problem z Chromium: 1414289.

Ulepszone działanie kroków w aplikacjach Wasm

Przejdź dalej. Przejście przez kod w oryginalnym kodzie nie powoduje już pauzy w rozpakowaniu (plik .wasm). Wcześniej wstrzymywał się tam.

Jednak krokowanie kończy się, gdy pętla kończy się poza funkcją, w której się rozpoczęła, na przykład po powrocie z funkcji.

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

Nowe ustawienie znajdziesz w sekcji Ustawienia – Źródła.

Problem z Chromium: 1418938.

Debugowanie autouzupełniania za pomocą panelu Elementy i karty Problemy

Autouzupełnianie w Chrome wypełnia formularze automatycznie za pomocą zapisanych informacji, takich jak adresy czy dane karty. Aby ułatwić debugowanie problemów związanych z autouzupełnianiem, w panelu Elementy można teraz wyróżnić je czerwonymi podkreśleniami klamrowymi.

Aby wypróbować tę funkcję, włącz Ustawienia. Ustawienia > Eksperymenty > Pole wyboru. Podświetla węzeł lub atrybut powodujący naruszenie w drzewie DOM w panelu Elementy i sprawdź stronę demonstracyjną.

Problemy z automatycznym wypełnianiem są wyróżnione w panelu Elementy i raportowane w panelu Problemy.

Na drzewie DOM najedź kursorem na wyróżniony problem i kliknij Wyświetl problem, aby otworzyć kartę Problemy z listą wszystkich wykrytych problemów i wskazówkami dotyczącymi tego, co poszło nie tak.

Problem z Chromium: 1399414.

Twierdzenia w Dyktafonie

Panel Nagrywarka umożliwia teraz dodawanie stwierdzeń bezpośrednio podczas nagrywania, z dostępem do wszystkich danych dotyczących działania.

Aby dodać twierdzenie, rozpocznij nowe nagrywanie, wykonaj czynności na stronie i kliknij Dodaj twierdzenie. Nagrywarka wstawia krok o typie waitForElement, który możesz dostosować na bieżąco. Obejrzyj film, aby zobaczyć, jak działają stwierdzenia na przykładzie demonstracji koszyka z kawą.

Z tego filmu dowiesz się, jak:

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

Możesz też skonfigurować kroki, aby określić na przykład instrukcje warunkowe w JavaScript, liczbę elementów podrzędnych węzła (count) czy widoczność elementu. Więcej informacji znajdziesz w artykule Konfigurowanie kroków.

Dodatkowo nagrywarka zapamiętuje preferowany format skryptu w widoku kodu obok siebie i menu kroku dostępnego po kliknięciu prawym przyciskiem myszy.

Problem z Chromium: 1423624.

Lighthouse 10.1.1

Panel Lighthouse korzysta teraz z wersji 10.1.1, w której wprowadzono ważną zmianę w wersji 10.1.0. Wszystkie audyty dotyczące adresów URL są teraz grupowane według podmiotu i statystyk liczbowych, takich jak rozmiar lub czas trwania. Popularne strony firm zewnętrznych są też otagowane kategorią, aby ułatwić identyfikację ich przeznaczenia na stronie.

Kontrole pogrupowane według typu obiektu.

Podstawy korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Ulepszenia wydajności

performance.mark() wyświetla czas trwania po najechaniu kursorem na element w sekcji Wydajność > Czas trwania.

Metoda performance.mark() wyświetla teraz czas wykonania, gdy najedziesz kursorem na odpowiedni znacznik w sekcji Skuteczność > Czas wykonania. Czas jest tu podawany w sygnaturze czasowej w stosunku do poprzedniego zdarzenia nawigacji.

Wyświetlane po najechaniu kursorem na sekcję Czasy wyświetlania okienko.

Problem z Chromium: 1426762.

profile() polecenie wypełnia sekcję Skuteczność > Główne

Polecenia profile() i profileEnd() w Konsoli umożliwiają teraz uruchamianie i zatrzymywanie profilowania procesora w głównym wątku w panelu Wydajność.

Polecenie console() tworzy profil w panelu Skuteczność.

Problem z Chromium: 1429191.

Ostrzeżenie o powolnym tempie interakcji użytkowników

Interakcje użytkowników trwające dłużej niż 200 ms powodują wyświetlenie ostrzeżenia Interakcja do kolejnego wyrenderowania (INP) na karcie Skuteczność > Podsumowanie.

Ostrzeżenie dotyczące INP.

Dodatkowo identyfikator interakcji został przeniesiony z opisu na stronę Podsumowanie.

Problemy z Chromium: 1432512, 1432509.

Śledzenie podstawowych wskaźników internetowych zostało przeniesione

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

Zarówno metryki Web Vitals, jak i długie zadania zawierały informacje powielane w innych miejscach. Nie były też interaktywne w stosunku do bardziej rozbudowanych alternatyw, które po kliknięciu wyświetlają bardziej szczegółowe informacje.

Przed i po przeniesieniu wskaźników Web Vitals na kartę Czas.

Dodatkowo ścieżka Wrażenia została przemianowana na Zmiany układu, aby trafniej odzwierciedlała jej zastosowanie.

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

Wycofanie programu profilującego JavaScript: faza 3

Już w Chrome 58 zespół narzędzi dla deweloperów planował wycofanie profilatora JavaScriptu i zachęcenie deweloperów Node.js i Deno do korzystania z panelu Wydajność do profilowania wydajności procesora JavaScript.

Wersja DevTools 114 rozpoczyna fazę 3 czteroetapowego wycofywania programu profilującego JavaScript. W tej fazie panel Profilowanie JavaScriptu jest usuwany z DevTools, ale możesz go tymczasowo włączyć, klikając Ustawienia. Ustawienia > Eksperymenty i otwierając go z menu z 3 kropkami Menu z 3 kropkami..

Zaznacz pole wyboru programu profilującego JavaScript w sekcji Ustawienia, a potem Eksperymenty.

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

Problem z Chromium: 1428026.

Inne najciekawsze momenty

Oto kilka istotnych poprawek w tej wersji:

  • Selektor kolorów wykrywa teraz wartości HWB, które są poza gamą, gdy są przycięte (1429271).
  • Panel Źródła:
  • Konsola umożliwia teraz obliczanie niekompletnych wyrażeń JavaScript za pomocą kombinacji klawiszy Ctrl + Enter i wyświetlanie błędów składni (1314700).
  • Okno edycji punktu kontrolnego ma teraz przycisk zamykania. Wcześniej trzeba było nacisnąć Enter lub odznaczyć okno (1412980).

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej przeglądarki Chrome w wersji Canary, Dev lub Beta. 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 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 omawianych w cyklu artykułów Co nowego w Narzędziech deweloperskich.