Nowości w Narzędziach deweloperskich: Chrome 129

Sofia Emelianova

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

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 Skuteczność.

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 jest Twoje doświadczenie w porównaniu z doświadczeniami 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.

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.

Żądania wyszukiwania na ścieżce Sieć

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.

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.

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 używasz profilu gościa.

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

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.

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.

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:
  • Poprawiony błąd związany 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.

Skontaktuj się 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.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami 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.