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

Nowa sekcja właściwości niestandardowych w sekcji Elementy > Style

Panel Elementy obsługuje teraz regułę@property w CSS. Umożliwia definiowanie właściwości niestandardowych CSS i rejestrowanie ich w arkuszu stylów bez uruchamiania kodu JavaScript.

Aby sprawdzić zarejestrowane usługi niestandardowe, w sekcji Elementy > Style najedź kursorem na nazwę usługi, aby wyświetlić jej opis w wyskakującym okienku. W skrótce kliknij link, aby wyświetlić zarejestrowaną usługę w sekcji @property.

Problemy z Chromium: 1471102, 1471103, 1471105.

Więcej ulepszeń dotyczących zastępowania wartości lokalnych

W ciągle rozwijanej poprzedniej wersji zastąpień lokalnych pojawiły się następujące zmiany:

• Gdy w sekcji Źródła > Strona klikniesz prawym przyciskiem myszy plik z mapowaniem źródeł i wybierzesz Zastąp zawartość, w Narzędziach deweloperskich pojawi się okno, które przeniesie Cię do pierwotnego źródła. Treści zmapowanych plików źródłowych nie można zastąpić.

  

• Panel Sieć zawiera nową kolumnę Z zastąpieniami i odpowiednio filtr has-overrides:[content|headers|yes|no]. Aby wyświetlić kolumnę Z zastąpieniami, kliknij prawym przyciskiem myszy nagłówek tabeli i go wybierz.

  

• W sekcji Źródła > Zastąpienia opcja menu Usuń wszystkie zastąpienia została zastąpiona opcją Usuń z dokładnym działaniem.

  

Poprzednia opcja Usuń wszystkie zastąpienia była myląca, ponieważ usuwała tylko zastąpienia aktywne w bieżącej sesji, oznaczone ikoną w kolorze fioletowym.

Nowa opcja Usuń najpierw wyświetla komunikat ostrzegawczy i wymaga potwierdzenia, a potem usuwa folder, na który kliknięto, wraz z całą jego zawartością.

Aby przywrócić poprzednią opcję, zaznacz Włącz „Tymczasowe usuwanie wszystkich zastąpień” w sekcji Ustawienia > Eksperymenty.

Problemy z Chromium: 1472952, 1416338, 1472580, 1473681 1475668.

Ulepszone wyszukiwanie

Wyniki wyszukiwania zawierają teraz wpis dla każdego dopasowania znalezionego w linii kodu. Wcześniej wyświetlano tylko pierwsze dopasowanie w każdym wierszu kodu. Nowe zachowanie jest szczególnie przydatne podczas wyszukiwania w zminiaturyzowanych plikach. Gdy klikniesz wynik wyszukiwania, otworzy się plik w edytorze, a dopasowanie będzie widoczne nie tylko w kierunku pionowym, ale też poziomym.

Dodatkowo wyszukiwarka została przyspieszona. W następnym filmie możesz zobaczyć porównanie stanu przed (po lewej) i po (po prawej).

Na koniec: wyszukiwanie obsługuje teraz ignorowanie list i nie wyświetla wyników z ignorowanych plików.

Problemy z Chromium: 1468875, 1472019.

Ulepszony panel Źródła

Uproszczony obszar roboczy w panelu Źródła

Funkcja workspace w panelu Źródła została uproszczona:

• Spójny system nazewnictwa. Najważniejsza zmiana dotyczy panelu Źródła > System plików, który został przemianowany na Obszar roboczy. Teksty w tym panelu są teraz bardziej czytelne i nie zawierają zbędnych informacji.
• Ulepszona konfiguracja. wyświetlać lepsze wskazówki dotyczące przeciągania i upuszczania folderów lub klikać link, aby wybrać folder.

Źródła > Obszar roboczy umożliwia synchronizowanie zmian wprowadzonych w Narzędziach deweloperskich bezpośrednio z plikami źródłowymi.

Zobacz, jak działa nowa konfiguracja i nowy proces:

Problemy z Chromium: 1473771, 1473880, 1473963, 1474686, 1474687.

Zmienianie kolejności paneli w sekcji Źródła

Możesz teraz zmieniać kolejność paneli po lewej stronie panelu Źródła, przeciągając i upuszczając je, podobnie jak możesz zmieniać kolejność innych paneli, kart i paneli.

Problemy z Chromium: 1473758.

Wyróżnianie składni i ładne formatowanie w przypadku większej liczby typów skryptów

W panelu Źródła możesz teraz:

• Zastosuj formatowanie stylistyczne do kodu JavaScript wbudowanego w typy skryptów: module, importmap, speculationrules.
• Wyróżnij składnię typów skryptów importmap i speculationrules, które zawierają kod JSON.

Więcej informacji o regułach spekulacji znajdziesz w artykule Przedwstępna renderyzacja stron w Chrome na potrzeby natychmiastowego przełączania się między stronami.

Problem z Chromium: 1473875.

Emuluj funkcję mediów „prefers-reduced-transparency”

Chrome 118 obsługuje teraz prefers-reduced-transparencyfunkcję multimediów. Ta funkcja umożliwia deweloperom dostosowanie treści internetowych do wybranych przez użytkownika ustawień zmniejszonej przejrzystości w systemie operacyjnym, takich jak ustawienie Zmniejsz przejrzystość w systemie macOS.

Aby emulować tę funkcję multimediów, otwórz kartę Wyświetlanie i przewiń w dół.

Problem z Chromium: 1424879.

Lighthouse 11

Panel Lighthouse korzysta teraz z wersji Lighthouse 11. Najważniejsze zmiany to usunięcie starszej nawigacji, dodanie nowych audytów ułatwień dostępu i zmianę sposobu przyznawania punktów w kategorii ułatwień dostępu.

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.

Ulepszenia ułatwień dostępu

Narzędzia programistyczne obsługują teraz więcej kombinacji klawiszy nawigacyjnych:

• Przegląd CSS: strzałki w górę i w dół umożliwiają poruszanie się po sekcjach na pasku bocznym po lewej stronie.
• Pamięć: w lewym panelu ustaw kursor na przycisku Zapisz obok zrzutów ekranu za pomocą klawisza Tab i naciśnij Enter, aby wybrać folder.

Dodatkowo naprawiliśmy kilka problemów z ogłoszeniami w czytnikach ekranu.

Problemy z Chromium: 1470401, 1471301, 1474108, 1468631.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

• Sieć: nowe ikony popularnych typów zasobów: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
• W wielu elementach interfejsu (zwłaszcza w panelach Elementy i Wydajność) kolory zostały zmienione na kolory Material 3 (1456690, 1472243).
• Problemy: teraz problemy z plikami cookie są zachowywane w całym oknie nawigacji (1466601).
• Ulepszenia dotyczące Aplikacja > Wczytywanie wstępne, w tym sortowalne siatki i zmienione szczegóły zestawu reguł (1410709).
• Wprowadzono różne ulepszenia edytora poleceń w monitorze protokołów, w tym przede wszystkim ostrzeżenia o nieprawidłowym wejściu, edycję wysłanego polecenia, edytor parametrów obiektu bez wstępnie zdefiniowanych kluczy, obsługę typów zdefiniowanych przez odwołania, obiektów bez odwołania do typu oraz filtrowanie poleceń według dopasowań podciągów znaków (1448050).
• Skuteczność: wykres płomienisty z obramowaniem wokół pola Ogółem na wykresie kołowym (1470147).
• Źródła nie traktują już myślników jako znaków w słowie w CSS (1471354).
• Autouzupełnianie zawsze sortuje słowa kluczowe z uwzględnieniem CSS na końcu.
• Filtry wyrażeń regularnych obsługują teraz spacje (1346936).
• Elements: rozwiązano problem z wykrywaniem funkcji zapytań multimedialnych (1472693).

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ędziech deweloperskich.