Nowości w Narzędziach deweloperskich: Chrome 129

Sofia Emelianova
Sofia Emelianova
GitHub

Dyktafon obsługuje eksportowanie do Puppeteer w przeglądarce Firefox

W ramach obsługi WebDriver BiDi panel Dyktafon może teraz eksportować nagrania do Puppeteer w przeglądarce Firefox. 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.

Opcje przed i po dodaniu opcji „Puppeteer dla przeglądarki Firefox” do menu eksportowania Dyktafonu.

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 zrzutów wydajności oraz sprawdzać, jak reprezentatywne są wrażenia użytkowników w porównaniu z innymi użytkownikami.

Aby zobaczyć bieżące obserwacje dotyczące LCP i CLS, otwórz panel Skuteczność. Aby zobaczyć wartość INP, wykonaj interakcję na stronie. 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 Skuteczność zawiera dane, które można poprawić, oraz statystyki i sugestie, dzięki którym możesz dopasować lokalne wrażenia do oczekiwań użytkowników. Możesz na przykład ograniczyć wykorzystanie procesora lub sieci, co możesz zrobić na tym samym ekranie w sekcji Ustawienia nagrywania po prawej stronie.

Pole wyszukiwania w panelu Skuteczność działa teraz także w odniesieniu do ścieżki Sieć, więc możesz znaleźć żądania za pomocą skrótu 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ść widoczne są teraz zrzuty stosu wywołań funkcji performance.mark i performance.measure. Za pomocą tych wywołań możesz rozszerzyć śledzenie wydajności o swoje dane niestandardowe.

Zrzuty stosu przed i po pokazane w zapisach stosu wydajności.Marka i performance. Pomiar wywołań.

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

Użyj testowych danych adresowych w panelu Autouzupełnianie

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

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

Opcje danych testowych autouzupełniania przed i po dodaniu do menu rozwijanego pola formularza adresu.

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 stanu Wymuś użycie określonego elementu i dotyczy tylko określonych 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.

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

Na karcie Elementy > Style są teraz dostępne opcje autouzupełniania podczas edytowania nazw obszarów 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 Lighthouse w wersji 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.

Różne wyróżnienia

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

  • Elementy:
    • Poprawiliśmy błąd związany z nieprawidłowym renderowaniem właściwości przeciążonej długości 357020613.
    • Nazwa position-try-options została zmieniona 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 informować o przycisku Pokaż element 357382536.
  • Wydajność > Sieć: opcja menu Pokaż w sieci otwiera teraz kartę Nagłówki odpowiedniego żądania sieciowego.
  • Konsola:
    • Błędy z rozszerzenia C/C++ teraz nie powodują już wymuszonego otwierania 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ęć: naprawiono błąd polegający na tym, że po ignorowaniu elementu zachowającego 327337527 nie wyświetlały się ignorowane elementy zachowujące.

Pobierz kanały podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych i pomagają w wykrywaniu problemów w witrynie przed użytkownikami.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne informacje związane z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.