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

Ulepszenia elementów

Nowa plakietka podsieci CSS

W panelu Elementy pojawi się nowa plakietka subgrid dla subgrid. Ta funkcja jest obecnie w wersji eksperymentalnej w Chrome Canary.

Aby sprawdzić i debugować zagnieżdżoną siatkę, która jest podsiatką, a zatem dziedziczy liczbę i rozmiar ścieżek z elementu nadrzędnego, kliknij plakietkę. Włącza nakładkę, która wyświetla kolumny, wiersze i ich numery na elemencie w obszarze widoku.

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

Problem z Chromium: 1442536.

Specyficzność selektora w etykietkach

W sekcji Elementy > Style najedź kursorem na nazwę selektora, aby w dymku zobaczyć jego wagę specyficzności.

Problem w 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 dymku.

Zespół Narzędzi deweloperskich dziękuje 一丝 i Suyan za wprowadzenie tej zmiany.

Problem w Chromium: 1380779.

Ulepszenia źródeł

Podświetlanie składni CSS

Panel Źródła zawiera te informacje o wstępnie przetworzonych plikach CSS, takich jak SASS, SCSS i LESS:

• Wyróżnianie składni.
• Obsługa edytorów wbudowanych. Są one podobne do edytorów w sekcji Elementy > Style, np. selektora kolorów i edytora funkcji przejścia.

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 Command (macOS) lub Control (Windows / Linux) i kliknij numer wiersza w lewej kolumnie Źródła > Edytor.

Problem w Chromium: 1405767.

Aplikacja > Łagodzenie śledzenia przekierowań

Eksperyment Bounce Tracking Mitigations w Chrome umożliwia identyfikowanie i usuwanie stanu witryn, które prawdopodobnie śledzą użytkowników w różnych witrynach za pomocą techniki śledzenia przez przekierowanie. W panelu Aplikacja > Usługi w tle pojawi się nowa karta Ograniczenia śledzenia odbić, która umożliwia ręczne wymuszanie ograniczeń śledzenia i wyświetla listę witryn, których stany zostały usunięte.

Sprawdź 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 i włącz tę opcję.
2. W sekcji chrome://flags ustaw eksperyment Łagodzenie śledzenia przekierowań na Włączone z usuwaniem.
3. Sprawdź tę stronę demonstracyjną, otwórz Aplikacja > Usługi działające w tle > Ograniczenia śledzenia odbić, kliknij na stronie link do odbicia, poczekaj (10 sekund), aż Chrome zarejestruje odbicie, i kliknij Wymuś uruchomienie, aby natychmiast usunąć stan.

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

Problem w Chromium: 1432303.

Lighthouse 10.2.0

Panel Lighthouse działa teraz w wersji 10.2.0. Przede wszystkim test największego wyrenderowania treści zawiera tabelę z obliczeniami faz dla symulowanego ograniczania przepustowości i ograniczania przepustowości w Narzędziach deweloperskich. Zobacz też pełną listę zmian.

Podstawowe informacje o korzystaniu z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem w Chromium: 772558.

Domyślne ignorowanie skryptów treści

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

Gdy to ustawienie jest włączone:

• Debugger ignoruje takie skrypty i nie zatrzymuje się na zgłoszonych przez nie wyjątkach.
• Panel Źródła > Stos wywołań pomija zignorowane ramki. Aby wyłączyć pomijanie, zaznacz pole  Pokaż ramki z listy ignorowanych.
• Konsola zwija ignorowane ramki w śladach stosu. Aby rozwinąć, kliknij Pokaż N kolejnych klatek, a aby ponownie zwinąć, kliknij Pokaż mniej.

Dodatkowo pola wyboru na liście ignorowania mają teraz bardziej czytelny tekst.

Problemy z Chromium: 1440958, 1364501.

Sieć > Domyślne formatowanie odpowiedzi

Panel Sieć > Odpowiedź domyślnie formatuje teraz skompresowane treści odpowiedzi, podobnie jak panel Źródła.

Dodatkowo pliki SVG mają wyróżnianie składni.

Problemy z Chromium: 1382752, 1385374.

Różne wyróżnione informacje

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

• Ustawienia > Urządzenia: do listy ciągów agenta dodano Facebook na Androida w wersji 407 na Pixelu 6.
• Sieć: dodano skrót Wyczyść dziennik sieci (1444991):
  • macOS: Command + K.
  • Windows/Linux: Ctrl + L
• Usunęliśmy opcję menu Rejestrator > Nagranie N > Panel Statystyki wydajności (1414773).
• Arkusz stylów, którego nie udało się wczytać, jest teraz ukryty w drzewie nawigatora (1386059).
• Skuteczność: naprawiono nieprawidłowe wyświetlanie rozwijanej ścieżki Interakcje (1432510).
• Elementy: arkusze stylów, których nie udało się wczytać, są teraz podkreślone falistą linią (1440626).
• Debugger nie wchodzi automatycznie w WebAssembly, gdy nie ma wtyczki dla danego języka (1443342).
• W przypadku plików CSS w sekcji Źródła > Edytor przywróciliśmy skrót klawiszowy, który przesuwa kursor o jedno słowo (1241848):
  • macOS: Alt + strzałka
  • Windows/Linux: Ctrl + strzałka

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię 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.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.