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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Pomoc dotycząca 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 WASM, zainstaluj rozszerzenie DevTools dla C/C++ (DWARF) i przetestuj kod w demonstracji Mandelbrota.

Problem z Chromium: 1414289.

Ulepszone działanie funkcji kroków w aplikacjach Wasm

Wykonaj. Przeskoczenie 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ę zaczęła, np. 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 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 wykrytymi problemami i wskazówkami dotyczącymi błędów.

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

Polecenie profile() 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 wolnych interakcjach 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 porównaniu z bardziej rozbudowanymi alternatywami, 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 114 DevTools rozpoczyna fazę 3 czteroetapowego procesu wycofywania programu profilującego JavaScript. W tej fazie panel Profilowanie JavaScriptu jest usuwany z DevTools, ale możesz go tymczasowo włączyć, korzystając z Ustawienia. Ustawień > Eksperymenty i otwierając go z menu z 3 kropkami Menu z 3 kropkami..

Pole wyboru programu profilującego JavaScript w sekcji Ustawienia > 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 wersji Canary, Dev lub Beta przeglądarki Chrome. 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ędziach deweloperskich.