Nowości w Narzędziach deweloperskich: Chrome 129

Sofia Emelianova
Sofia Emelianova
GitHub

Dyktafon obsługuje eksport do Puppeteer dla Firefoxa

W ramach obsługi WebDriver BiDi panel Dyktafon może teraz eksportować nagrania do Puppeteer dla Firefoxa. Dzięki obsługi Firefoxa przez Puppeteer możesz teraz nagrywać przepływy danych użytkownika za pomocą panelu Dyktafon w Narzędziach deweloperskich w Chrome, eksportować je i uruchamiać w Firefoxie i Chrome.

Widok przed i po dodaniu opcji „Puppeteer for Firefox” do menu eksportowania w Recorderze.

Więcej informacji znajdziesz w artykule WebDriver BiDi – przyszłość automatyzacji w różnych przeglądarkach.

Ulepszenia panelu wydajności

Ta wersja zawiera wiele ulepszeń panelu Wydajność.

Obserwacje dotyczące danych na żywo

Panel Wydajność wyświetla teraz obserwacje na żywo dotyczące podstawowych wskaźników internetowych, zarówno na komputerze lokalnym, jak i na podstawie danych z pól w raporcie na temat użytkowania Chrome. Dzięki temu możesz wykrywać problemy z wydajnością bez konieczności rejestrowania śladów wydajności i sprawdzać, na ile Twoje wrażenia są reprezentatywne w porównaniu z tymi użytkowników.

Aby zobaczyć bieżące obserwacje dotyczące LCP i CLS, otwórz panel Skuteczność. Aby zobaczyć INP, wejdź w interakcję ze stroną. Aby porównać dane lokalne z danymi dotyczącymi wygody korzystania z raportu na temat użytkowania Chrome, dodaj dane z pól: w sekcji Dane z pól po prawej stronie kliknij Skonfiguruj, a potem w oknie dialogowym kliknij OK. Najedź kursorem na wartość danych, aby wyświetlić etykietę z dodatkowymi informacjami.

obserwacje na żywo dotyczące danych w panelu Skuteczność.

Panel Wydajność wskazuje dane, które można ulepszyć, oraz zawiera statystyki i sugestie dotyczące dopasowania wrażeń lokalnych do wrażeń użytkowników. Możesz na przykład ograniczyć moc procesora lub przepustowość sieci. Aby to zrobić, na tym samym ekranie otwórz sekcję Ustawienia nagrywania po prawej stronie.

Pole Wyszukaj w panelu Wydajność działa teraz również na ścieżce Sieć, dzięki czemu możesz znajdować żądania za pomocą skrótu klawiszowego Ctrl / Cmd + F.

Żądanie sieciowe znalezione w wyszukiwarce.

Wyświetlanie zrzutów stosu wywołań performance.mark i performance.measure

Na karcie Podsumowanie w panelu Skuteczność wyświetlane są teraz ścieżki wywołań funkcji performance.mark i performance.measure. Za pomocą tych wywołań możesz rozszerzyć ślad skuteczności o dane niestandardowe.

Przed i po pokazujące ścieżki wywołań dla wywołań performance.mark i performance. measure.

Więcej informacji znajdziesz w artykule Dostosowanie danych o skuteczności za pomocą interfejsu API umożliwiającego rozszerzanie.

Używanie danych adresu testowego w panelu autouzupełniania

Panel Autouzupełnianie zawiera teraz dane testowe do formularzy adresowych. Dzięki temu łatwiej będzie Ci testować formularze adresowe w Twojej witrynie, gdy nie masz zapisanych żadnych adresów w Chrome lub używasz profilu gościa.

Aby wypełnić formularze adresowe danymi testowymi, otwórz panel Autouzupełnianie, włącz Pokaż adresy testowe w menu autouzupełniania, kliknij prawym przyciskiem myszy formularz adresowy na stronie i wybierz jedną z opcji w menu Narzędzia dla programistów.

Opcje testowych danych autouzupełniania w menu pola formularza adresu przed dodaniem i po dodaniu

Ulepszenia panelu Elementy

Ta wersja zawiera kilka ulepszeń panelu Elementy.

Wymuś więcej stanów dla konkretnych elementów

Sekcja :hov w sekcji Elementy > Style zawiera teraz więcej pseudoklas, które możesz włączyć. Nowy zestaw opcji znajduje się w menu Wymuś konkretny element i dotyczy wybranych przez Ciebie elementów. Na przykład <label> i <input> mają różne zestawy opcji.

Stan przed i po dodaniu możliwości wymuszania konkretnych stanów elementów.

Problem z Chromium: 40280012.

W sekcji Elementy > Style można teraz automatycznie wypełniać więcej właściwości siatki

Karta Elementy > Style zawiera teraz opcje autouzupełniania, które są dostępne podczas edytowania nazw obszaru siatki i linii.

Przykłady nazw linii siatki przed dodaniem opcji autouzupełniania i po ich dodaniu.

Więcej informacji znajdziesz w artykule Sprawdzanie układów siatki CSS , a w szczególności w sekcji Pokaż nazwy linii.

Lighthouse 12.2.0

Panel Lighthouse korzysta teraz z wersji Lighthouse 12.2.0.

Ta aktualizacja zawiera kilka poprawek błędów. Zobacz pełną listę zmian.

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

Problem z Chromium: 772558.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Elementy:
    • Poprawiono błąd polegający na nieprawidłowym renderowaniu przeciążonych właściwości długości 357020613.
    • position-try-options zmienił nazwę na position-try-fallbacks zgodnie ze specyfikacją.
    • Odświeżenie strony przywraca teraz wybrany węzeł nawet wewnątrz elementu iframe 40719145.
    • Ułatwienia dostępu: czytniki ekranu będą teraz ogłaszać przycisk Pokaż element 357382536.
  • Skuteczność > Sieć: opcja menu Pokaż w sekcji Sieć otwiera teraz kartę Nagłówki odpowiedniego żądania sieci.
  • Konsola:
    • Błędy z rozszerzenia C/C++ nie otwierają już przymusowo Konsoli 356320158.
    • Naprawiliśmy błąd polegający na tym, że funkcja import.meta w module JS nie była wykonywana podczas pauzy 40743793.
  • Pamięć: usunięto błąd polegający na tym, że opcja Przywróć zignorowane elementy zachowujące nie wyświetlała się po zignorowaniu elementu zachowującego 327337527.

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.