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

Ulepszenia elementów

Nowa plakietka podsiatki CSS

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

Aby sprawdzić i debugować zagnieżdżoną siatkę, która jest siatką podrzędną, a tym samym dziedziczy liczbę i rozmiar ścieżek z elementu nadrzędnego, kliknij plakietkę. Przełącza nakładkę, która wyświetla kolumny, wiersze i ich numery na górze elementu w widocznym obszarze.

Listę wszystkich plakietek w panelu Elementy znajdziesz w artykule Informacje o plakietkach.

Problem z Chromium: 1442536.

Szczegółowość selektora w etykietkach

W sekcji Elementy > Style, najedź kursorem na nazwę selektora, aby wyświetlić wagę właściwy w etykietce.

Problem z Chromium: 1204932.

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

W sekcji Elementy > Style, najedź kursorem na nazwę niestandardowej właściwości CSS, aby zobaczyć jej wartość w etykietce.

Zespół Narzędzi deweloperskich chce podziękować 丝 i Suyanowi za wprowadzenie tych ulepszeń.

Problem z Chromium: 1380779.

Ulepszenia źródeł

Wyróżnianie składni CSS

W przypadku wstępnie przetworzonych plików CSS, takich jak SASS, SCSS i LESS, panel Źródła uzyskuje te informacje:

• Wyróżnianie składni.
• Obsługa wbudowanych edytorów. Są one podobne do edytorów w sekcji Elementy > Style, na przykład Selektor kolorów i Edytor wygładzania.

Problemy z Chromium: 1302261, 1392085.

Skrót do ustawiania warunkowych punktów przerwania

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

Problem z Chromium: 1405767.

Aplikacja > Łagodzenie śledzenia przekierowań

Eksperyment Łagodzenie śledzenia przekierowań w Chrome pozwala identyfikować i usuwać stan witryn, które prawdopodobnie śledzą witryny za pomocą techniki śledzenia odrzuceń. Aplikacja > W panelu Usługi w tle pojawia się nowa karta Ograniczanie śledzenia przekierowań, na której możesz ręcznie wymusić stosowanie środków ograniczających śledzenie, a także wyświetlić listę witryn, których stany zostały usunięte.

Wypróbuj tę funkcję zabezpieczeń:

1. Blokuj pliki cookie innych firm w Chrome. Przejdź do aplikacji i włącz ją > Ustawienia > Prywatność i bezpieczeństwo > Pliki cookie i inne dane witryn > Blokuj pliki cookie innych firm.
2. W usłudze chrome://flags ustaw dla eksperymentu Ograniczanie śledzenia przekierowań wartość Włączono z usunięciem.
3. Sprawdź tę stronę demonstracyjną, otwórz Aplikacja > Usługi w tle > Ograniczanie śledzenia przekierowań, kliknij znajdujący się na stronie link do odesłania, poczekaj 10 sekund, aż Chrome zarejestruje odrzucenie, a następnie kliknij Wymuś uruchomienie, aby od razu usunąć stan.

Dodatkowo karta Problemy ostrzega o nadchodzącym usunięciu stanu.

Problem z Chromium: 1432303.

Lighthouse 10.2.0

Panel Lighthouse korzysta teraz z Lighthouse w wersji 10.2.0. W szczególności test Największe wyrenderowanie treści zawiera tabelę z obliczeniami fazowymi symulowanego i ograniczania narzędzi deweloperskich. Zobacz też pełną listę zmian.

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

Problem z Chromium: 772558.

Domyślnie ignoruj skrypty treści

Ustawienia > Lista ignorowanych > Skrypty treści wstrzykiwane przez rozszerzenia są teraz domyślnie włączone.

Po włączeniu tego ustawienia:

• Debuger ignoruje takie skrypty i nie zatrzymuje się na zgłoszonych przez nie wyjątkach.
• Źródła > Panel Stosu wywołań pomija ignorowane klatki. Aby wyłączyć pomijanie, zaznacz Pokaż klatki z listy ignorowanych.
• Konsola zwija ignorowane klatki w zrzutach stosu. Kliknij Pokaż więcej ramek, aby rozwinąć widok, lub Pokaż mniej, aby ponownie zwinąć.

Dodatkowo pola wyboru na liście ignorowanych stały się bardziej zrozumiałe.

Problemy z Chromium: 1440958, 1364501.

Sieć > Domyślne formatowanie odpowiedzi

Sieć > W panelu Odpowiedzi domyślnie wyświetlają się zminimalizowane treści odpowiedzi w formie ładunkowej, podobnie jak w przypadku panelu Źródła.

Dodatkowo pliki SVG otrzymują podświetlenie składni.

Problemy z Chromium: 1382752, 1385374.

Różne wyróżnienia

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

• Ustawienia > Urządzenia: do listy ciągów agentów dodaliśmy Facebooka na Androidzie w wersji 407 na Pixelu 6.
• Sieć: dodano skrót Wyczyść dziennik sieci (1444991):
  • MacOS: Command + K
  • Windows/Linux: Control + L
• Dyktafon został usunięty > Nagrywanie N > Opcja Panel Statystyki skuteczności (1414773).
• Arkusze stylów, których nie udało się wczytać, są ukryte w drzewie nawigacji (1386059).
• Skuteczność: poprawiliśmy nieprawidłowe wyświetlanie rozwijanej ścieżki Interakcje (1432510).
• Elementy: arkusze stylów, których nie udało się wczytać, są teraz podkreślane falistymi liniami (1440626).
• Debuger nie wykonuje automatycznie czynności w WebAssembly, gdy nie ma wtyczki dla danego języka (1443342).
• Skrót przesuwający kursor o jedno słowo jest przywracany w przypadku plików CSS w sekcji Źródła > Edytujący (1241848):
  • MacOS: Alt + strzałka
  • Windows/Linux: Ctrl + strzałka

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   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o 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.