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

Sofia Emelianova

Jecelyn Yeen

Obsługa debugowania WebAssembly

Narzędzia deweloperskie domyślnie włączają Ustawienia > Eksperymenty > Debugowanie WebAssembly: włącz obsługę DWARF. Więcej informacji znajdziesz w artykule Debugging WebAssembly with modern tools (Debugowanie WebAssembly za pomocą nowoczesnych narzędzi).

To eksperymentalne narzędzie umożliwia wstrzymywanie wykonywania i debugowanie kodu C i C++ w aplikacjach Wasm z dostępem do wszystkich informacji na potrzeby debugowania:

• Oryginalny kod źródłowy z mapowaniem przy użyciu informacji debugowania DWARF.
• Zrozumiałe nazwy funkcji w stosie wywołań.
• obsługę punktów przerwania i inne funkcje.

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

Problem w Chromium: 1414289.

Ulepszone działanie kroku w aplikacjach Wasm

Przejście w oryginalnym kodzie nie powoduje już wstrzymania w asemblerze (plik .wasm). Wcześniej w tym miejscu wstrzymywał odtwarzanie.

Krokowe wykonywanie kodu kończy się jednak, gdy program wyjdzie poza funkcję, w której się rozpoczął, np. po powrocie z funkcji.

To zachowanie jest domyślnie włączone w  Ustawieniach > Preferencjach > Źródłach.

Problem w Chromium: 1418938.

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

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

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

Najedź kursorem na wyróżniony problem w drzewie DOM i kliknij Wyświetl problem, aby otworzyć kartę Problemy, na której znajdziesz listę wszystkich wykrytych problemów i wskazówki dotyczące tego, co poszło nie tak.

Problem w Chromium: 1399414.

Asercje w Dyktafonie

W panelu Rejestrator możesz teraz dodawać asercje bezpośrednio podczas rejestrowania, mając do dyspozycji wszystkie dane środowiska wykonawczego.

Aby dodać asercję, rozpocznij nowe nagrywanie, wejdź w interakcję ze stroną i kliknij Dodaj asercję. Rejestrator wstawia krok waitForElement, który możesz dostosować na bieżąco. Obejrzyj film, aby zobaczyć asercje w działaniu w wersji demonstracyjnej wózka z kawą.

Z tego filmu dowiesz się, jak potwierdzić:

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

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

Dodatkowo Rejestrator zapamiętuje teraz preferowany format skryptu w widoku kodu obok siebie i menu kroków po kliknięciu prawym przyciskiem myszy.

Problem w Chromium: 1423624.

Lighthouse 10.1.1

Panel Lighthouse działa teraz w wersji 10.1.1. W wersji 10.1.0 wprowadziliśmy ważną zmianę. Wszystkie audyty dotyczące adresów URL są teraz grupowane według podmiotu i zawierają zbiorcze statystyki liczbowe, takie jak rozmiar czy czas trwania. Popularne podmioty zewnętrzne są też oznaczane kategorią, co ułatwia określenie ich przeznaczenia na stronie.

Podstawowe informacje o korzystaniu z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem w Chromium: 772558.

Zwiększona wydajność

performance.mark() wyświetla czas po najechaniu kursorem w sekcji Skuteczność > Czasy

Metoda performance.mark() wyświetla teraz czas po najechaniu kursorem na odpowiedni znacznik w sekcji Skuteczność > Czasy. Czas jest tu sygnaturą czasową względną w stosunku do poprzedniego zdarzenia nawigacji.

Problem w Chromium: 1426762.

Polecenie profile() wypełnia sekcję Skuteczność > Główna.

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

Problem z Chromium: 1429191.

Ostrzeżenie o powolnych interakcjach użytkownika

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

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

Problemy z Chromium: 1432512, 1432509.

Ścieżka Wskaźniki internetowe została przeniesiona

Z panelu Skuteczność usunęliśmy te ścieżki:

• Ścieżka Podstawowe wskaźniki internetowe. Zamiast tego zobacz odpowiednie czasy w sekcji Czasy po najechaniu kursorem.
• Ścieżka podrzędna Długie zadania. Takie zadania znajdziesz już na głównej ścieżce, która jest zacieniona na czerwono i ma czerwony trójkąt.

Zarówno ścieżka Web Vitals, jak i Long Tasks zawierały informacje, które były już dostępne w innych miejscach. Były też nieinteraktywne w porównaniu z bardziej zaawansowanymi alternatywami, które po kliknięciu wyświetlały więcej szczegółowych informacji.

Dodatkowo ścieżka Experiences została zmieniona na Layout Shifts, aby dokładniej odzwierciedlać jej zastosowanie.

Dowiedz się więcej o Web Vitals.

Wycofywanie programu profilującego JavaScript: faza trzecia

Już w Chrome 58 zespół narzędzi deweloperskich planował wycofać profiler JavaScriptu i zachęcić programistów Node.js i Deno do korzystania z panelu Wydajność do profilowania wydajności procesora JavaScript.

Wersja 114 Narzędzi deweloperskich rozpoczyna trzecią fazę czterofazowego procesu wycofywania programu profilującego JavaScript. W tym czasie panel profilera JavaScriptu zostanie usunięty z Narzędzi deweloperskich, ale możesz go tymczasowo włączyć, klikając  Ustawienia > Eksperymenty i otworzyć go z menu z 3 kropkami .

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

Problem w Chromium: 1428026.

Różne wyróżnione informacje

Oto niektóre z najważniejszych poprawek w tej wersji:

• Selektor kolorów wykrywa teraz wartości HWB, które po przycięciu są poza gamą (1429271).
• Panel Źródła:
  • Włączono wyróżnianie składni JSON w przypadku map źródeł (1385374).
  • Przestaliśmy wyświetlać komunikaty „Wykryto mapę źródeł”, gdy ręcznie wyłączysz mapy źródeł (1423718).
• W konsoli możesz teraz oceniać niekompletne wyrażenia JavaScript, naciskając Ctrl + Enter, i wyświetlać błędy składni (1314700).
• Okno edycji punktu przerwania ma teraz przycisk zamykania. Wcześniej trzeba było nacisnąć Enter lub cofnąć fokus z okna (1412980).

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.