Nowości w Narzędziach dla deweloperów (Chrome 115)

Sofia Emelianova
Sofia Emelianova
GitHub

Ulepszenia elementów

Nowa plakietka subgridu usługi porównywania cen

Panel Elementy ma teraz nową plakietkę subgrid dla subgrid. Ta funkcja jest obecnie eksperymentalna w Chrome Canary.

Aby sprawdzić i przetestować zagnieżdżoną siatkę, która jest siatką podrzędną, a zatem dziedziczy liczbę i rozmiar ścieżek od siatki nadrzędnej, kliknij plakietkę. Włącza nakładkę, która pokazuje kolumny, wiersze i ich numery nad elementem w widoku.

Plakietka subgridu i nakładka w widocznym obszarze.

Listę wszystkich plakiet w panelu Elementy znajdziesz w dokumentacji plakiet.

Problem z Chromium: 1442536.

Specyfikalność selektora w etykiecie

W sekcji Elementy > Style najedź kursorem na nazwę selektora, aby wyświetlić w informacjach kontekstowych jego wagę specyficzności.

Etykieta z ciężarem specyficzności selektora.

Problem z Chromium: 1204932.

Wartości niestandardowych właściwości CSS w tooltipach

W sekcji Elementy > Style najedź kursorem na nazwę niestandardowej właściwości CSS, aby wyświetlić jej wartość w skrótce informacyjnej.

Etykieta z wartością niestandardowej właściwości CSS.

Zespół DevTools dziękuje 一丝 i Suyan za wdrożenie tej poprawki.

Problem z Chromium: 1380779.

Ulepszenia źródeł

Podświetlanie składni CSS

W panelu Źródła panelu Źródła uzyskuje się te informacje o plikach przetworzonego kodu CSS, takich jak SASS, SCSS i LESS:

Ulepszone podświetlanie składni CSS i obsługa edytorów wbudowanych w źródle.

Problemy z Chromium: 1302261, 1392085.

Skrót do ustawiania warunkówowych punktów przerwania

Teraz możesz szybciej ustawiać punkty kontrolne warunkowe za pomocą skrótu. Aby otworzyć okno punktu przerwania, przytrzymaj Command (MacOS) lub Control (Windows / Linux) i kliknij numer wiersza w lewym okienku Źródła > Edytor.

Numer wiersza w kolumnie po lewej stronie i w oknie punktu przerwania.

Problem z Chromium: 1405767.

Aplikacja > Łagodzenie śledzenia przekierowań

Eksperyment Zwalczanie śledzenia powrotów w Chrome umożliwia identyfikowanie i usuwanie stanów witryn, które prawdopodobnie wykonują śledzenie w witrynach za pomocą techniki śledzenia powrotów. W panelu Aplikacja > Usługi w tle pojawia się nowa karta Zapobieganie śledzenia powrotów, która umożliwia ręczne wymuszanie zapobiegania śledzenia i wyświetla listę witryn, których stany zostały usunięte.

Zapoznaj się z tą funkcją zabezpieczeń:

  1. Blokuj pliki cookie innych firm w Chrome. Otwórz Menu z 3 kropkami. > Ustawienia > Zabezpieczenia. Prywatność i bezpieczeństwo > Pliki cookie i inne dane witryn > Zaznaczony przycisk opcji. Blokuj pliki cookie innych firm.
  2. W chrome://flags ustaw eksperyment Łagodzenie śledzenia przekierowań na Włączony z usunięciem.
  3. Sprawdź tę stronę demonstracyjną, otwórz Aplikacja > Usługi w tle > Zapobieganie powrotom, kliknij link powrotu na stronie, odczekaj (10 sekund), aż Chrome zarejestruje powroty, i kliknij Wymuś uruchomienie, aby natychmiast usunąć stan.

Łagodzenie śledzenia przekierowań zawiera listę stanów do usunięcia.

Dodatkowo na karcie Problemy pojawi się ostrzeżenie o nadchodzącym usunięciu stanu.

Problem z Chromium: 1432303.

Lighthouse 10.2.0

Panel Lighthouse korzysta teraz z wersji Lighthouse 10.2.0. Najważniejsze jest to, że w przypadku sprawdzania największego wyrenderowania treści pojawia się tabela z obliczeniami fazy dla symulowanego i ograniczonego działania DevTools. Zobacz też pełną listę zmian.

Tabela faz LCP.

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

Problem z Chromium: 772558.

Ignorowanie domyślnie skryptów treści

Opcja Ustawienia. Ustawienia > Lista ignorowania > Pole wyboru. Skrypty treści wstrzykiwane przez rozszerzenia jest teraz domyślnie włączona.

Gdy to ustawienie jest włączone:

  • Debuger ignoruje takie skrypty i nie zatrzymuje się na zgłoszonych przez nie wyjątkach.
  • Panel Źródła > Stos wywołań pomija ignorowane ramki. Aby wyłączyć pomijanie, zaznacz Pole wyboru. Pokaż ramki z listy ignorowanych.
  • Konsola zbiera ignorowane ramki w śladach pakietu. Kliknij Pokaż N dodatkowych klatek, aby rozwinąć, i Pokaż mniej, aby zwinąć.

Skrypty treści wstrzykiwane przez rozszerzenia są domyślnie włączone. Aby to zrobić, otwórz Ustawienia, a następnie listę ignorowanych.

Ponadto pola wyboru na liście Ignorowanie mają teraz bardziej czytelny tekst.

Problemy z Chromium: 1440958, 1364501.

Sieć > Domyślne ładne drukowanie odpowiedzi

Na karcie Sieć > Odpowiedź skompresowane odpowiedzi są teraz domyślnie wyświetlane w ładnym formacie, podobnie jak na karcie Źródła.

Włączanie ładnego drukowania w oknie Odpowiedź na karcie Sieć.

Dodatkowo pliki SVG są wyróżniane pod względem składni.

Podświetlanie składni SVG.

Problemy z Chromium: 1382752, 1385374.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Ustawienia. Ustawienia > Urządzenia: dodano Facebooka na Androida w wersji 407 na Pixelu 6 do listy ciągów znaków agenta.
  • Sieć: dodano skrót Wyczyść dziennik sieci (1444991):
    • macOS: Command + K
    • Windows/Linux: Control + L
  • Usunięto opcję Nagrywarka > Nagrywanie N > Panel Statystyki wydajności (1414773).
  • Arkusze stylów, których nie udało się wczytać, są teraz ukryte w drzewie nawigatora (1386059).
  • Skuteczność: rozwiązano problem z nieprawidłowym wyświetlaniem rozszerzalnego wykresu Interakcje (1432510).
  • Elements: arkusze stylów, które nie udało się wczytać, są teraz podkreślone falowanymi liniami (1440626).
  • Debuger nie przechodzi automatycznie do kodu WebAssembly, gdy nie ma wtyczki dla danego języka (1443342).
  • Przywracamy skrót, który przesuwa kursor o jedno słowo, w przypadku plików CSS w sekcji Źródła > Edytor (1241848):
    • macOS: Alt + strzałka
    • Windows/Linux: Ctrl + strzałka

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.