Nowości w Narzędziach deweloperskich w Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Nowy panel autouzupełniania

W tej wersji w Narzędziach deweloperskich pojawił się nowy panel Autouzupełnianie. Autouzupełnianie w Chrome to wygodny sposób automatycznego wypełniania formularzy na stronach internetowych za pomocą zapisanych adresów. Nowy panel Autouzupełnianie umożliwia sprawdzenie mapowania pól formularza, przewidywanych wartości autouzupełniania i zapisanych danych.

Wypróbuj nowy panel na tej stronie demonstracyjnej z danymi testowymi:

  1. W sekcji Autouzupełnianie profilu kliknij dowolny z przycisków Wypełnij formularz…, a potem kliknij Prześlij. W oknie dialogowym Zapisz adres? kliknij Zapisz i wróć na stronę z formularzem.
  2. Otwórz DevTools i wywołaj zdarzenie autouzupełniania: wybierz pole formularza i wybierz adres z listy.

Automatycznie otworzy się panel Autouzupełnianie, w którym wyświetlą się wykryte pola formularza, pola wywnioskowane przez autouzupełnianie oraz zapisane wartości.

Panel Autouzupełnianie.

Więcej informacji znajdziesz w artykułach Formy i Autouzupełnianie.

Ulepszone ograniczanie wykorzystania sieci w przypadku WebRTC

Dzięki niedawnemu dodaniu parametrów związanych z pakietami do niestandardowych profili ograniczania przepustowości sieci możesz teraz ograniczać przepustowość aplikacji WebRTC bezpośrednio w DevTools. Jest to przydatne do testowania implementacji komunikacji w czasie rzeczywistym bez konieczności korzystania z oprogramowania innych firm.

Nowe parametry to: utrata pakietów (w procentach), długość kolejki pakietów (liczba pakietów) oraz flaga uporządkowania pakietów.

Dodawanie nowych opcji związanych z pakietami do profili ograniczania przepustowości.

Aby ograniczyć połączenie WebRTC, określ parametry związane z pakietami w profilu niestandardowym w  Ustawienia > Ograniczanie i wybierz go w panelu Sieć.

Wypróbuj nowe parametry na tej stronie demonstracyjnej. Najpierw zezwól stronie na korzystanie z kamery. Następnie w panelu Sieć wybierz skonfigurowany profil niestandardowy, a potem na tej samej stronie kliknij Rozpocznij i Zadzwoń.

Problem z Chromium: 41175925.

Obsługa animacji sterowanych przewijaniem w panelu Animacje

W panelu Animacje możesz teraz sprawdzać animacje uruchamiane przez przewijanie.

Wypróbuj tę funkcję na stronie demonstracyjnej. Otwórz panel Animacje i załaduj ponownie stronę, aby zarejestrować animacje uruchamiane przez przewijanie.

Grupa animacji sterowanych przez przewijanie oznaczonych ikoną myszy.

W sekcji Przegląd pojawia się grupa animacji oznaczona ikoną . Możesz teraz go sprawdzić. Grupa wyświetla wartości pikseli zamiast milisekund na osi czasu.

Ulepszona obsługa zagnieżdżania CSS w sekcji Elementy > Style

Karta Elementy > Style zapewnia lepszą obsługę zagnieżdżania CSS i teraz pokazuje style zagnieżdżone z wcięciem i w nawiasach klamrowych. Zespolone reguły CSS to sposób na grupowanie reguł CSS i ułatwianie ich czytelności i strukturyzacji.

Przed i po dodaniu wcięcia oraz ujęciu ujętych w nawiasy stylów.

Problem z Chromium: 40166888.

Panel Wyższa skuteczność

Ta wersja zawiera kilka ulepszeń panelu Wydajność.

Ukrywanie funkcji i ich elementów podrzędnych na wykresie płomienistym

Aby odfiltrować nieistotne informacje z wykresu słupkowego w sekcji Wydajność > Główna, możesz teraz ukryć nieistotne funkcje i ich podrzędne. Na wykresie słupkowym kliknij prawym przyciskiem myszy funkcję i wybierz opcję z menu kontekstowego.

Stan przed i po dodaniu menu kontekstowego, które umożliwia ukrywanie funkcji i ich elementów.

Funkcje z ukrytymi elementami podrzędnymi mają po prawej stronie przycisk Drop-down. Najedź na niego kursorem, aby zobaczyć liczbę ukrytych elementów, i kliknij, aby je ponownie wyświetlić. Aby powrócić do początkowego stanu wykresu płomienia, kliknij funkcję prawym przyciskiem myszy i wybierz Resetuj śledzenie.

Strzałki od wybranych inicjatorów do zdarzeń, które zainicjowali

Wcześniej, gdy wybierano zdarzenie na ścieżce Główna, na ścieżce wyświetlała się strzałka od inicjatora do wybranego zdarzenia. Teraz ścieżka zawiera też strzałkę od wybranego zdarzenia do zdarzenia, które je wywołało (jeśli takie istnieje).

strzałki przed i po pokazujące przejście z wybranego do zainicjowanego zdarzenia oraz nazwane linki zamiast opcji Reveal (Ujawnij).

Dodatkowo na karcie Podsumowanie wszyscy inicjatorzy mają teraz pola Initiator for, a pola Initiator for i Initiated by mają nazwane linki zamiast opcji Pokaż.

Problemy z Chromium: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

Panel Lighthouse korzysta teraz z wersji Lighthouse 11.6.0. Zobacz pełną listę zmian.

Jedną z najważniejszych zmian jest nowe ustawienie Włącz próbkowanie JS. To ustawienie jest domyślnie wyłączone.

Przed i po dodaniu ustawienia próbkowania JS z opcją dołączenia

Włączenie próbkowania kodu JS powoduje dodanie do śledzenia wydajności szczegółowych sterowników wywołania JavaScriptu, ale może spowolnić generowanie raportów.

Ślad wydajności bez (po lewej) i z (po prawej) próbkowaniem JS.

Ślad jest dostępny w menu Narzędzia > Wyświetl nieograniczony ślad po wygenerowaniu raportu Lighthouse.

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

Problem z Chromium: 772558.

Etykiety kategorii specjalnych w sekcji Pamięć > Zrzuty sterty

Obrazy sterty w panelu Pamięć zawierają specjalne grupy obiektów, które nie są oparte na konstruktorach. Gdy najedziesz kursorem na takie obiekty, w panelu Wspomnienie pojawi się teraz dymek z krótkim opisem i linkiem do dłuższego opisu w dokumentacji.

Przed i po – opisowa etykietka dla specjalnych grup obiektów.

Problem z Chromium: 41490331.

Aplikacja > Aktualizacje miejsca na dane

Ta wersja zawiera kilka zmian w sekcji Aplikacja > Pamięć.

Bajty wykorzystane na współdzielone miejsce na dane

W sekcji Aplikacja > Miejsce na dane > Współdzielone miejsce na dane możesz teraz sprawdzić liczbę bajtów wykorzystanych przez źródło.

Dane przed i po pokazujące, ile bajtów zostało użytych na potrzeby wspólnego miejsca na dane.

Współdzielone miejsce na dane zapewnia nieograniczony dostęp do zapisu w miejscu w ramach współdzielonego miejsca na dane oraz dostęp do odczytu, który chroni prywatność.

Problem z Chromium: 324464353.

Interfejs Web SQL został całkowicie wycofany.

Chrome wycofał Web SQL w wersji 119 i usunął token wycofania w tej wersji, więc nie możesz już używać Web SQL.

W związku z tym w Narzędziach deweloperskich usunięto sekcję Web SQL z panelu Aplikacja.

Problem z Chromium: 327254049.

Ulepszenia panelu zasięgu

Ta wersja zawiera kilka uaktualnień panelu Pokrycie:

  • Pasek stanu oblicza teraz prawidłowo statystyki użytkowania w przypadku odfiltrowanych adresów URL. Wcześniej zamiast sumowania danych użytkowania dzieci, które pasowały do filtra, sumował dane ich rodzica.

Przed i po prawidłowo obliczonych statystykach dopasowania dzieci.

  • Kolor użytego kodu jest teraz szary, a nie zielony, co poprawia widoczność, zwłaszcza w przypadku zaburzeń rozpoznawania barw typu zielono-czerwony.

Stan przed i po zmianie koloru użytego kodu na szary.

Problem z Chromium: 41494198, 329253687.

Panel Warstwy może zostać wycofany.

Panel Warstwy może wkrótce zostać wycofany z powodu niskiej częstotliwości używania. U góry panelu wyświetla się teraz baner ostrzegawczy.

Baner z ostrzeżeniem o potencjalnym wycofaniu u góry panelu Warstwy.

Zanim zespół podejmie ostateczną decyzję o wycofaniu panelu, podziel się swoimi przemyśleniami i wątpliwościami.

Wycofanie programu profilującego JavaScript: faza czwarta, ostatnia

W tej wersji panel Profilowanie JS został całkowicie wycofany i nie można go już ponownie włączyć.

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

Problem z Chromium: 40262073.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Sieć:
    • Usunięto błąd polegający na nieprawidłowym parsowaniu plików cookie wielowierszowych (325410304).
    • Naprawiono podgląd wywołań w kolumnie Inicjator (327665602).
  • Monitorowanie wydajności: pola wyboru śledzenia są teraz takie same jak w pozostałych częściach interfejsu (1467464).
  • Źródła: dodano wyróżnianie składni w dokumentach XHTML (327940244).
  • Ustawienia > Urządzenia: starszy model Galaxy Fold został zastąpiony nowszym modelem Galaxy Z Fold 5 (40113439).
  • Wydajność: wszystkie pasujące wyniki wyszukiwania są teraz wyróżnione podczas wyszukiwania za pomocą Ctrl/Cmd + F (1523279).
  • Zasoby dla programistów: teraz wyświetlane są też zasoby wczytywane przez rozszerzenia językowe, takie jak rozszerzenie Chrome C/C++ DevTools (DWARF) (40746829).
  • Wydajność: usunięty z karty Podsumowanie ścięty stos wywołań i nieprawidłowe rozmieszczenie (325314708).
  • Menu: przyciski zamknij są teraz dostępne do skupienia, dzięki czemu panele można zamykać za pomocą klawiatury.

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.