Nowości w Narzędziach deweloperskich w Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Nowy panel autouzupełniania

W tej wersji dodaliśmy do Narzędzi deweloperskich nowy panel Autouzupełnianie. Autouzupełnianie w Chrome to wygodny sposób na automatyczne wypełnianie formularzy na stronach internetowych za pomocą zapisanych adresów. Nowy panel Autouzupełnianie umożliwia sprawdzanie mapowania między polami formularza, przewidywanymi wartościami autouzupełniania i zapisanymi danymi.

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

  1. W sekcji Autouzupełnianie profilu kliknij dowolny przycisk Wypełnij formularz…, a następnie Prześlij. W oknie dialogowym Zapisać adres? kliknij Zapisz i wróć na stronę z formularzem.
  2. Otwórz Narzędzia deweloperskie i wywołaj zdarzenie autouzupełniania: wybierz pole formularza i kliknij adres na liście.

Panel Autouzupełnianie otworzy się automatycznie i wyświetli wykryte pola formularza, pola, które zostały wywnioskowane przez autouzupełnianie, oraz zapisane wartości.

Panel autouzupełniania.

Więcej informacji znajdziesz w sekcjach Poznaj Formularze i Autouzupełnianie.

Ulepszone ograniczanie wykorzystania sieci w przypadku WebRTC

Dzięki nowym parametrom związanym z pakietami w niestandardowych profilach ograniczania przepustowości sieci możesz teraz ograniczać przepustowość aplikacji WebRTC bezpośrednio w Narzędziach deweloperskich. 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) i flaga Zmiana kolejności pakietów.

Przed i po dodaniu nowych opcji związanych z pakietami do niestandardowych profili ograniczania przepustowości.

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

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

Problem w Chromium: 41175925.

Obsługa animacji opartych na przewijaniu w panelu Animacje

Panel Animacje umożliwia teraz sprawdzanie animacji sterowanych przewijaniem.

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

Grupa animacji wywoływanych przewijaniem oznaczona ikoną myszy.

W przeglądzie pojawi się grupa animacji oznaczona ikoną . Możesz teraz sprawdzić ten element. W osi czasu grupa wyświetla wartości pikseli zamiast milisekund.

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

Karta Elementy > Style ma ulepszoną obsługę zagnieżdżania CSS i wyświetla teraz zagnieżdżone style z wcięciami i w nawiasach klamrowych. Zagnieżdżanie CSS to sposób na grupowanie reguł CSS, dzięki któremu kod jest mniej rozwlekły i bardziej uporządkowany.

Przed dodaniem wcięcia i umieszczeniem zagnieżdżonych stylów w nawiasach klamrowych.

Problem w Chromium: 40166888.

Panel Ulepszona wydajność

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

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

Aby odfiltrować szum z wykresu płomieniowego w sekcji Wydajność > Główny, możesz teraz ukryć nieistotne funkcje i ich elementy podrzędne. Na wykresie płomieniowym kliknij funkcję prawym przyciskiem myszy i wybierz opcję z menu kontekstowego.

Menu przed i po dodaniu menu kontekstowego, które umożliwia ukrywanie funkcji i ich elementów podrzędnych.

Funkcje z ukrytymi elementami podrzędnymi mają po prawej stronie przycisk Menu. Najedź na nią kursorem, aby zobaczyć liczbę ukrytych elementów podrzędnych, a następnie kliknij ją, aby ponownie je wyświetlić. Aby wrócić do początkowego stanu wykresu płomieniowego, kliknij funkcję prawym przyciskiem myszy i wybierz Resetuj ślad.

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

Wcześniej, gdy na ścieżce Głównej wybierano zdarzenie, ścieżka pokazywała strzałkę od inicjatora do wybranego zdarzenia. Ścieżka zawiera teraz też strzałkę od wybranego zdarzenia do zdarzenia, które ono zainicjowało (jeśli takie istnieje).

Wcześniej i później – strzałki wskazujące wybrane i inicjowane zdarzenia oraz nazwane linki zamiast opcji Odkryj.

Dodatkowo wszystkie inicjatory mają teraz pola Inicjator na karcie Podsumowanie, a pola Inicjator i Inicjowane przez mają nazwane linki zamiast Odkryj.

Problemy z Chromium: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

Panel Lighthouse działa teraz w wersji 11.6.0. Zobacz pełną listę zmian.

Wśród ważnych zmian jest nowe ustawienie Włącz próbkowanie JS, które wymaga zgody użytkownika. To ustawienie jest domyślnie wyłączone.

Przed i po dodaniu ustawienia próbkowania JS opartego na zgodzie użytkowników.

Włączenie próbkowania JS dodaje do śladu wydajności szczegółowe stosy wywołań JavaScriptu, ale może spowolnić generowanie raportów.

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

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

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

Problem z Chromium: 772558.

Etykietki specjalnych kategorii w sekcji Pamięć > Zrzuty sterty

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

Obraz przed i po pokazujący opis w dymku dla specjalnych grup obiektów.

Problem z Chromium: 41490331.

Aplikacja > Aktualizacje miejsca na dane

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

Bajty wykorzystane na pamięć współdzieloną

W sekcji Aplikacja > Pamięć > Pamięć współdzielona wyświetla się teraz liczba bajtów wykorzystanych przez pochodzenie.

Przed i po: liczba bajtów wykorzystanych na potrzeby pamięci współdzielonej.

Wspólne miejsce na dane umożliwia nieograniczony dostęp do zapisu danych w różnych witrynach z zachowywaniem prywatności i dostępem do odczytu.

Problem w Chromium: 324464353.

Usługa Web SQL została całkowicie wycofana

Chrome wycofał bazę danych Web SQL w wersji 119 i usunął w niej token wersji próbnej wycofania, więc nie możesz już używać tej bazy danych.

W związku z tym w Narzędziach deweloperskich usunęliśmy sekcję Web SQL z panelu Aplikacja.

Problem z Chromium: 327254049.

Ulepszenia panelu pokrycia

W tej wersji wprowadziliśmy kilka zmian w panelu Pokrycie:

  • Pasek stanu prawidłowo oblicza teraz statystyki wykorzystania dla odfiltrowanych adresów URL. Wcześniej zamiast sumować dane o wykorzystaniu przez dzieci, które pasowały do filtra, sumował dane ich rodziców.

Przed i po prawidłowym obliczeniu statystyk dotyczących pasujących dzieci.

  • Kolor użytego kodu jest teraz szary zamiast zielonego, co poprawia widoczność, zwłaszcza w przypadku osób z zaburzeniem rozpoznawania barw, które nie widzą zielonego.

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 popularności. U góry panelu pojawi się teraz baner z ostrzeżeniem.

Baner ostrzegawczy informujący o możliwym wycofaniu u góry panelu Warstwy.

Zanim zespół podejmie ostateczną decyzję o wycofaniu panelu, możesz podzielić się swoimi przemyśleniami i wątpliwościami.

Wycofywanie programu profilującego JavaScript: etap czwarty, ostatni

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

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

Problem w Chromium: 40262073.

Różne wyróżnione informacje

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

  • Sieć:
    • Rozwiązaliśmy błąd związany z nieprawidłową analizą plików cookie wielowierszowych (325410304).
    • Poprawiono podgląd stałej listy wywołań w kolumnie Inicjator (327665602).
  • Monitorowanie wydajności: pola wyboru są teraz takie same jak w pozostałej części interfejsu (1467464).
  • Źródła: dodaliśmy wyróżnianie składni dokumentów XHTML (327940244).
  • Ustawienia > Urządzenia: stary Galaxy Fold został zastąpiony nowszym Galaxy Z Fold 5 (40113439).
  • Wydajność: wszystkie pasujące wyniki wyszukiwania są teraz wyróżniane podczas wyszukiwania za pomocą klawiszy Ctrl/Cmd+F (1523279).
  • Zasoby dla programistów: teraz wyświetla też zasoby wczytane przez rozszerzenia językowe, takie jak rozszerzenie Chrome C/C++ DevTools Support (DWARF) (40746829).
  • Skuteczność: naprawiono przycięty stos wywołań i jego nieprawidłowy układ na karcie Podsumowanie (325314708).
  • Panel: przyciski Zamknij można teraz zaznaczać, dzięki czemu panele można zamykać za pomocą klawiatury.

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.

Co nowego w Narzędziach deweloperskich

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