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 wprowadziliśmy nowy panel Autouzupełnianie. Autouzupełnianie w Chrome to wygodny sposób na automatyczne wypełnianie formularzy na stronach internetowych z zapisanymi adresami. Nowy panel Autouzupełnianie umożliwia sprawdzanie mapowania między polami formularza, prognozowanymi wartościami autouzupełniania i zapisanymi danymi.

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

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

Automatycznie otworzy się panel Autouzupełnianie, w którym zobaczysz wykryte pola formularzy oraz pola, które zostały ustalone przez autouzupełnianie, i zapisane wartości.

Panel autouzupełniania

Więcej informacji znajdziesz w artykułach Nauka korzystania z Formularzy i Autouzupełnianie.

Ulepszone ograniczanie sieci dla WebRTC

Dzięki dodaniu parametrów związanych z pakietami do niestandardowych profili ograniczania przepustowości sieci możesz ograniczać działanie aplikacji WebRTC bezpośrednio w Narzędziach deweloperskich. Jest to przydatne do przetestowania implementacji komunikacji w czasie rzeczywistym bez konieczności używania oprogramowania innych firm.

Nowe parametry to: Packet Loss (Procentowa utrata pakietów), Długość kolejki pakietów (liczba pakietów) oraz flaga check_box Packet Reordering (Zmiana kolejności pakietów).

Informacje o dodaniu do niestandardowych profili ograniczania nowych opcji związanych z pakietami przed i po dodaniu nowych opcji związanych z pakietami.

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

Wypróbuj nowe parametry na tej stronie demonstracyjnej. Najpierw zezwól stronie na dostęp do aparatu. Następnie w panelu Sieć wybierz skonfigurowany przez siebie profil niestandardowy i ponownie kliknij na stronie Rozpocznij i Zadzwoń.

Problem z Chromium: 41175925.

Obsługa animacji przewijanych w panelu Animacje

Panel Animacje umożliwia teraz sprawdzanie animacji wywoływanych przez przewijanie.

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

Grupa animacji przewijanych oznaczonych ikoną myszy.

Grupa animacji oznaczona ikoną myszy mysz pojawia się w widoku Przegląd. Możesz go teraz sprawdzić. Grupa pokazuje na osi czasu wartości w pikselach, a nie w milisekundach.

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

Karta Elementy > Style ulepsza obsługę zagnieżdżania CSS i wyświetla teraz style zagnieżdżone z wcięciami i w nawiasach klamrowych. Zagnieżdżanie CSS to sposób grupowania reguł CSS, dzięki czemu są one mniej szczegółowe i bardziej uporządkowane.

Określenie „przed” i „po” oraz dodanie wcięcia i zamknięcie stylów zagnieżdżonych w nawiasach klamrowych.

Problem z Chromium: 40166888.

Panel Ulepszona wydajność

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

Ukryj funkcje i ich elementy podrzędne na wykresie płomieniowym

Aby odfiltrować zakłócenia z wykresu płomieniowego w sekcji Skuteczność > 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.

Dodano menu kontekstowe przed i po, które pozwala ukryć funkcje i ich elementy podrzędne.

Funkcje z ukrytymi elementami podrzędnymi mają po prawej stronie przycisk arrow_drop_down Menu. Najedź na nią kursorem, aby zobaczyć liczbę ukrytych elementów podrzędnych, i 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 z wybranych inicjatorów do zainicjowanych przez nich zdarzeń

Wcześniej po wybraniu zdarzenia i zdarzenia na ścieżce głównej ścieżka wyświetlała strzałkę od inicjatora do tego zdarzenia. Teraz ścieżka będzie też zawierać strzałkę od wybranego zdarzenia do zdarzenia, które zostało zainicjowane, o ile takie zdarzenie zostało zainicjowane.

Przed i po zamiast przycisku Pokaż strzałki od wybranych do zainicjowanych zdarzeń i nazwane linki są pokazywane.

Dodatkowo na karcie Podsumowanie wszystkie inicjatory mają teraz pola Inicjator dla, a pola Inicjator dla i Zainicjowane przez mają nazwane linki, a nie ujawnienie.

Problemy z Chromium: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

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

Jedną z ważnych zmian jest wprowadzenie nowego ustawienia check_box_outline_blank Włącz próbkowanie JS. Domyślnie to ustawienie jest wyłączone.

Przed dodaniem opcjonalnego ustawienia próbkowania JS i po nim.

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

Zrzut wydajności bez próbkowania JS (po lewej) i (po prawej).

Śledzenie jest dostępne w more_vert menu Narzędzia > View Unthrottled Trace (Wyświetl niethrottled Trace) po wygenerowaniu raportu Lighthouse.

Podstawowe informacje na temat korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Etykietka kategorii specjalnych w sekcji Pamięć > Zrzuty sterty

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

Wyświetlana etykietka opisowa przed i po specjalnych grupach obiektów.

Problem z Chromium: 41490331.

Aplikacja > Aktualizacje miejsca na dane

W tej wersji wprowadziliśmy kilka aktualizacji do sekcji Aplikacja > Pamięć wewnętrzna.

Bajty wykorzystywane na potrzeby pamięci współdzielonej

Sekcja Aplikacja > Pamięć > Pamięć współdzielona pokazuje teraz liczbę bajtów używanych przez źródło.

Wartość przed i po pokazuje, ile bajtów jest używanych na potrzeby pamięci współdzielonej.

Pamięć współdzielona zapewnia nielimitowany dostęp do pamięci z możliwością zapisu w różnych witrynach z ochroną prywatności w celu odczytu.

Problem z Chromium: 324464353.

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

W wersji 119 Chrome wycofał Web SQL i usunął token wycofania wersji próbnej, więc nie można już korzystać z Web SQL.

W następnej kolejności Narzędzia deweloperskie usunęły sekcję Web SQL z panelu Aplikacja.

Problem z Chromium: 327254049.

Ulepszenia panelu Pokrycie

W tej wersji wprowadziliśmy kilka aktualizacji w panelu Stan:

  • Pasek stanu poprawnie oblicza teraz statystyki użytkowania pod kątem odfiltrowanych adresów URL. Wcześniej zamiast danych o korzystaniu z elementów podrzędnych, które pasowały do filtra, były dodawane dane o elementach nadrzędnych.

Informacje „przed” i „po” prawidłowym obliczaniu pasujących statystyk podrzędnych.

  • Kolor wykorzystanego kodu jest teraz szary zamiast zielonego, aby poprawić widoczność, zwłaszcza w przypadku osób z wadą wzroku przy barwie zielonej.

Zmiana koloru używanego kodu na szary.

Problem z Chromium: 41494198, 329253687.

Panel Warstwy może zostać wycofany

Panel Warstwy może zostać wkrótce wycofany z powodu niewielkiego wykorzystania. U góry panelu wyświetli się baner ostrzegawczy.

Baner ostrzegawczy informujący o potencjalnym wycofaniu u góry panelu Warstwy.

Podziel się swoimi przemyśleniami i wątpliwościami, zanim zespół podejmie ostateczną decyzję o wyłączeniu panelu.

Wycofanie programu profilującego JavaScript: faza czwarta, finał

W tej wersji panel JS Profiler został w pełni wycofany i nie można go już ponownie włączyć.

Aby profilować wydajność procesora, skorzystaj z panelu Wydajność.

Problem z Chromium: 40262073.

Różne wyróżnienia

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

  • Sieć:
    • Poprawiliśmy błąd związany z nieprawidłową analizą wielowierszowych plików cookie (325410304).
    • Poprawiono podgląd stosu wywołań w kolumnie Inicjator (327665602).
  • Monitorowanie wydajności: pola wyboru śledzenia są teraz takie same jak w pozostałej części interfejsu (1467464).
  • Źródła: dodano wyróżnianie składni dokumentów XHTML (327940244).
  • Ustawienia > Urządzenia: Stary Galaxy Fold został zastąpiony nowszym Galaxy Z Fold 5 (40113439).
  • Skuteczność: podczas wyszukiwania za pomocą klawiszy Ctrl/Cmd+F (1523279) wszystkie dopasowane wyniki wyszukiwania są teraz wyróżnione.
  • Zasoby dla deweloperów: teraz wyświetlane są też zasoby wczytane za pomocą rozszerzeń językowych, takie jak rozszerzenie do Chrome obsługujące Narzędzia deweloperskie w C/C++ (DWARF) (40746829).
  • Skuteczność: poprawiono przycięty stos wywołań i zły układ jego układu na karcie Podsumowanie (325314708).
  • Panel: przyciski zamknij zamknij można teraz zaznaczyć, więc panele można zamykać za pomocą klawiatury.

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

  • Prześlij nam sugestię lub opinię na crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59