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

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.

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.

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.

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:

• podświetlanie składni;
• Wbudowane edytory Te edytory są podobne do tych w sekcji Elementy > Style, np. Selektor kolorów i Edytor wypełnienia.

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.

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 > Ustawienia > Prywatność i bezpieczeństwo > Pliki cookie i inne dane witryn > 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.

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.

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 > Lista ignorowania > 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 Pokaż ramki z listy ignorowanych.
• Konsola zbiera ignorowane ramki w śladach pakietu. Kliknij Pokaż N dodatkowych klatek, aby rozwinąć, i Pokaż mniej, aby zwinąć.

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.

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

Problemy z Chromium: 1382752, 1385374.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

• 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.

• Przesyłaj opinie i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

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