Nowości w Narzędziach deweloperskich: Chrome 129

Sofia Emelianova
Sofia Emelianova
GitHub

Dyktafon obsługuje eksportowanie do Puppeteer w przypadku przeglądarki Firefox

W ramach obsługi WebDriver BiDi panel Rejestrator może teraz eksportować nagrania do Puppeteer dla przeglądarki Firefox. Dzięki obsłudze Firefoksa przez Puppeteer możesz teraz nagrywać ścieżki użytkownika za pomocą panelu Dyktafon w Narzędziach deweloperskich w Chrome, eksportować je i uruchamiać w przeglądarkach Firefox i Chrome.

Przed i po dodaniu opcji „Puppeteer for Firefox” do menu eksportu Rejestratora.

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

Ulepszenia panelu wydajności

Ta wersja wprowadza szereg ulepszeń w panelu Wydajność.

Obserwacje danych na żywo

Panel Wydajność wyświetla teraz na żywo obserwacje dotyczące podstawowych wskaźników internetowych zarówno na komputerze lokalnym, jak i na podstawie danych z raportu 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ć, jak reprezentatywne są Twoje wrażenia w porównaniu z wrażeniami użytkowników.

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

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

Panel Skuteczność zawiera wyróżnione dane, które można poprawić, oraz informacje i sugestie dotyczące dopasowania lokalnych wrażeń do wrażeń użytkowników. Możesz na przykład ograniczyć wykorzystanie procesora lub sieci. Możesz to zrobić na tym samym ekranie w sekcji Ustawienia nagrywania po prawej stronie.

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

Żądanie sieciowe znalezione podczas wyszukiwania.

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

Na karcie Podsumowanie w panelu Skuteczność są teraz wyświetlane ślady stosu wywołań performance.mark i performance.measure. Możesz używać tych wywołań, aby rozszerzać ślad wydajności o własne dane.

Przed i po pokazaniu śladów stosu wywołań performance.mark i performance. measure.

Więcej informacji znajdziesz w artykule Dostosowywanie danych o skuteczności za pomocą interfejsu API do rozszerzania.

Używanie danych adresów testowych w panelu autouzupełniania

Panel Autouzupełnianie zawiera teraz dane testowe do formularzy adresowych. Ułatwia to testowanie formularzy adresowych w witrynie, gdy nie masz zapisanych adresów w Chrome lub korzystasz z profilu gościa.

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

Menu z opcjami przed i po dodaniu danych testowych autouzupełniania do pola formularza adresu.

Ulepszenia panelu Elementy

W tej wersji wprowadziliśmy kilka ulepszeń w panelu Elementy.

Wymuszanie większej liczby stanów w przypadku konkretnych elementów

Sekcja :hov w Elementy > Style zawiera teraz więcej klas pozornych, które możesz włączyć na stałe. Nowy zestaw opcji znajduje się w menu stanu Wymuś konkretny element i jest specyficzny dla wybranych elementów. Na przykład <label> i <input> mają różne zestawy opcji.

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

Problem z Chromium: 40280012.

Elementy > Style teraz automatycznie uzupełniają więcej właściwości siatki

Karta Elementy > Style zawiera teraz opcje autouzupełniania podczas edytowania obszaru siatki i nazw linii.

Widok przed i po dodaniu opcji autouzupełniania podczas edytowania nazw linii siatki.

Więcej informacji znajdziesz w artykule Sprawdzanie układów siatki CSS , a w szczególności w sekcji Wyświetlanie nazw linii.

Lighthouse 12.2.0

Panel Lighthouse działa teraz w wersji 12.2.0.

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

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

Problem z Chromium: 772558.

Różne wyróżnione informacje

Oto kilka ważnych poprawek i ulepszeń w tej wersji:

  • Elementy:
    • Rozwiązanie problemu z nieprawidłowym renderowaniem przeciążonych właściwości długości 357020613.
    • position-try-options zmienił(a) nazwę na position-try-fallbacks zgodnie ze specyfikacją.
    • Odświeżenie strony przywraca teraz wybrany węzeł nawet w elemencie iframe 40719145.
    • Ułatwienia dostępu: czytniki ekranu będą teraz odczytywać przycisk Pokaż element 357382536.
  • Skuteczność > Sieć: opcja menu Pokaż w sieci otwiera teraz kartę Nagłówki odpowiedniego żądania sieciowego.
  • Konsola:
    • Błędy z rozszerzenia C/C++ nie otwierają już wymuszenie konsoli 356320158.
    • Naprawiliśmy błąd polegający na tym, że funkcja import.meta w module JS nie była obliczana po wstrzymaniu 40743793.
  • Pamięć: usunęliśmy błąd, który powodował, że po zignorowaniu elementu zachowującego nie wyświetlała się opcja Przywróć zignorowane elementy zachowujące 327337527.

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.

Co nowego w Narzędziach deweloperskich

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