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

Sofia Emelianova
Sofia Emelianova
GitHub

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ąpień 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 wyświetli się okno, które przekieruje Cię do pierwotnego źródła. Treści zmapowanych plików źródłowych nie można zastąpić.

    Okno, które przekierowuje do oryginalnego kodu zamiast pliku zmapowanego źródła.

  • 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 wybierz ją.

    Filtrowanie według wartości „has-overrides:yes” w kolumnie „Has overrides”.

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

    Przed i po zastąpieniu opcji „Usuń wszystkie zastąpienia” opcją „Usuń”.

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 Zapisano..

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 Pole wyboru. Włącz opcję „Tymczasowe usuwanie wszystkich zastąpień” w sekcji Ustawienia. Ustawienia > Eksperymenty.

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

Wyniki wyszukiwania zawierają teraz wpis dla każdego dopasowania znalezionego w linii kodu. Wcześniej wyświetlano tylko pierwsze dopasowanie na wiersz kodu. Nowe zachowanie jest szczególnie przydatne podczas wyszukiwania w skompresowanych plikach. Gdy klikniesz wynik wyszukiwania, otworzy się plik w edytorze, a dopasowanie będzie widoczne nie tylko w pionie, ale i w poziomie.

Przed i po przeprowadzeniu wyszukiwania wyświetlane są wszystkie dopasowania na linii.

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

Na koniec warto wspomnieć, że wyszukiwarka obsługuje teraz ignorowanie plików 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 je i zrzucając, 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 w ramach tych typów skryptów: module, importmap, speculationrules.
  • Wyróżnij składnię typów skryptów importmap i speculationrules, które zawierają kod JSON.

Przed i po ładnym wydrukowaniu oraz podświetleniu składni reguł spekulacji typu skryptu

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ę multimedialną „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.

Ułatwienia dostępu

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

  • Przegląd CSS: strzałki w górę i w dół służą do poruszania się po sekcjach w panelu 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ść) wprowadzono zmiany kolorów 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 przede wszystkim sortowanie siatek i poprawione 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.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziech deweloperskich.