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 CSS. Umożliwia jawne definiowanie niestandardowych właściwości CSS i rejestrowanie ich w arkuszu stylów bez uruchamiania kodu JavaScript.

Aby sprawdzić zarejestrowane właściwości niestandardowe, w sekcji Elementy > Style najedź kursorem na nazwę właściwości i wyświetl jej deskryptory w dymku. W dymku kliknij link, aby wyświetlić zarejestrowaną usługę w rozwijanej sekcji @property.

Problemy z Chromium: 1471102, 1471103, 1471105.

Więcej ulepszeń dotyczących zastąpień lokalnych

Kontynuując ulepszenia wprowadzone w poprzedniej wersji, lokalne zastąpienia teraz:

• W sekcji Źródła > Strona, gdy klikniesz prawym przyciskiem myszy plik z mapowaniem źródła i wybierzesz Zastąp zawartość, Narzędzia deweloperskie wyświetlą okno, które przeniesie Cię do oryginalnego źródła. Nie można zastąpić zawartości zmapowanych plików źródłowych.

  

• W panelu Sieć pojawi się nowa kolumna Ma zastąpienia i odpowiedni filtr has-overrides:[content|headers|yes|no]. Aby wyświetlić kolumnę Ma zastąpienia, kliknij prawym przyciskiem myszy nagłówek tabeli i wybierz ją.

  

• W sekcji Źródła > Zastąpienia opcja menu Usuń wszystkie zastąpienia została zastąpiona opcją Usuń o precyzyjnym działaniu.

  

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

Nowa opcja Usuń najpierw wyświetla ostrzeżenie i prosi o potwierdzenie, a następnie usuwa kliknięty folder wraz z całą jego zawartością.

Aby przywrócić poprzednią opcję, zaznacz pole  Włącz „Tymczasowo usuń wszystkie zastąpienia” w  Ustawienia > Eksperymenty.

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

Ulepszone wyszukiwanie

Wyniki wyszukiwania zawierają teraz wpis dla każdego dopasowania znalezionego w wierszu kodu. Wcześniej wyświetlał tylko pierwsze dopasowanie w każdej linii kodu. Nowe działanie jest szczególnie przydatne podczas wyszukiwania w zminimalizowanych plikach. Gdy klikniesz wynik wyszukiwania, plik otworzy się w edytorze, a dopasowanie zostanie przewinięte do widoku nie tylko w pionie, ale też w poziomie.

Dodatkowo wyszukiwanie działa teraz szybciej. W następnym filmie zobaczysz porównanie stanu przed (po lewej) i po (po prawej).

Wyszukiwarka Search obsługuje teraz ignorowanie listy 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 obszaru roboczego w panelu Źródła została uproszczona:

• Spójne nazewnictwo Przede wszystkim panel Źródła > System plików został zmieniony na Obszar roboczy. Różne teksty w interfejsie tego panelu są teraz bardziej przejrzyste i nie zawierają zbędnych informacji.
• Ulepszona konfiguracja Zobacz lepsze wskazówki dotyczące przeciągania i upuszczania folderów lub kliknij link, aby wybrać folder.

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

Zobacz, jak działają nowe ustawienia i przepływ pracy:

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

Zmiana kolejności paneli w Źródłach

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

Problemy z Chromium: 1473758.

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

Panel Źródła może teraz:

• Zastosuj formatowanie stylistyczne wbudowanego kodu JavaScript w przypadku tych typów 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 Wstępne renderowanie stron w Chrome w celu natychmiastowego przechodzenia do nich.

Problem w Chromium: 1473875.

Emulowanie funkcji multimedialnej prefers-reduced-transparency

Chrome 118 obsługuje teraz prefers-reduced-transparency funkcję multimedialną. Ta funkcja umożliwia deweloperom dostosowywanie treści internetowych do preferencji użytkownika dotyczących zmniejszonej przezroczystości w systemie operacyjnym, np. ustawienia Zmniejsz przezroczystość w systemie macOS.

Aby emulować tę funkcję multimedialną, otwórz kartę Renderowanie i przewiń w dół.

Problem w Chromium: 1424879.

Latarnia morska 11

Panel Lighthouse działa teraz w oparciu o Lighthouse 11. Najważniejsze zmiany to usunięcie starszej nawigacji, dodanie nowych testów ułatwień dostępu oraz zmiana sposobu oceniania kategorii ułatwień dostępu.

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 z Chromium: 772558.

Ulepszenia ułatwień dostępu

Narzędzia deweloperskie obsługują teraz więcej skrótów klawiszowych do nawigacji:

• Omówienie usług porównywania cen: użyj strzałek w górę i w dół, aby poruszać się po sekcjach na pasku bocznym po lewej stronie.
• Pamięć: w lewym pasku bocznym wybierz przycisk Zapisz obok migawek z kartą i naciśnij Enter, aby wybrać folder.

Rozwiązaliśmy też kilka problemów z odczytywaniem informacji przez czytniki ekranu.

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

Różne wyróżnione informacje

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

• Sieć: nowe ikony popularnych typów zasobów: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
• Aktualizacje kolorów w przypadku kolorów Material 3 w wielu elementach interfejsu, zwłaszcza w panelach Elementy i Skuteczność (1456690, 1472243).
• Panel Problemy zachowuje teraz problemy z plikami cookie podczas nawigacji (1466601).
• Różne ulepszenia Aplikacji > Wstępne wczytywanie, w tym sortowalne siatki i zmienione szczegóły zestawu reguł (1410709).
• Różne ulepszenia edytora poleceń w monitorze protokołu, w tym ostrzeżenia o nieprawidłowych danych wejściowych, edytowanie wysłanego polecenia, edytor parametrów obiektów bez predefiniowanych kluczy, obsługa wyliczeń niezdefiniowanych przez odwołania, obiektów bez odwołania do typu, filtrowanie poleceń według dopasowań podciągów i inne (1448050).
• Wykres płomieniowy Skuteczność ma obramowanie wokół pola wartości łącznych na wykresie kołowym (1470147).
• Źródła nie traktują już myślników jako znaków słów w CSS (1471354).
• Autouzupełnianie zawsze sortuje słowa kluczowe związane z CSS na końcu.
• Filtry wyrażeń regularnych obsługują teraz spacje (1346936).
• Wykrywanie funkcji zapytania o media stałe elements (1472693).

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.