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

Sofia Emelianova
Sofia Emelianova

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.

Plakietka podrzędnej siatki i nakładka 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.

Etykietka z masą specyficzności selektora.

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.

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

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:

Ulepszone podświetlanie składni CSS i obsługa wbudowanych edytorów w sekcji Źródła.

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.

Numer wiersza w lewej kolumnie oraz okno z punktem przerwania.

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 Menu z 3 kropkami. i włącz ją > Ustawienia > Zabezpieczenia. Prywatność i bezpieczeństwo > Pliki cookie i inne dane witryn > Zaznaczono opcję. 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.

Łagodzenie śledzenia przekierowań informuje o usunięciu stanu.

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.

Tabela etapów LCP.

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. Ustawienia > Lista ignorowanych > Pole wyboru. 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 Pole wyboru. 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ąć.

Skrypty treści wstrzykiwane przez włączone domyślnie rozszerzenia. Aby go znaleźć, otwórz Ustawienia, a potem listę Ignoruj.

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.

Włączono drukowanie ładunkowe w oknie odpowiedzi na karcie Sieć.

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

Wyróżnianie składni SVG.

Problemy z Chromium: 1382752, 1385374.

Różne wyróżnienia

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

  • Ustawienia. 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   Więcej > 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.