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ąpiła lokalna wersja zastąpień, która:

  • 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 wyszukiwanie 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

Teraz możesz 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ę 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ół 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ść) kolory zostały zmienione na kolory z Material 3 (1456690, 1472243).
  • Problemy: teraz problemy z plikami cookie są zachowywane w całym interfejsie 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 słów 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 przeglądarki Chrome w wersji Canary, Dev lub Beta. 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.