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 w 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. Kliknij link w etykietce, aby wyświetlić zarejestrowaną właściwość w zwijanej sekcji @property.

Problemy z Chromium: 1471102, 1471103, 1471105.

Więcej ulepszeń lokalnych zastąpień

Kontynuujemy wprowadzanie ulepszeń w poprzedniej wersji, dlatego zastąpienia lokalne:

  • Gdy klikniesz prawym przyciskiem myszy plik zmapowany na źródło i wybierzesz Zastąp treść w sekcji Źródła > Strona, w Narzędziach deweloperskich pojawi się okno przekierowujące do oryginalnego źródła. Treści zmapowanych plików źródłowych nie można zastąpić.

    Okno, które prowadzi do oryginalnego kodu zamiast do pliku mapowanego na źródło.

  • 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świetlało się tylko pierwsze dopasowanie na wiersz kodu. Nowe zachowanie jest szczególnie przydatne podczas przeszukiwania zminifikowanych plików. Gdy klikniesz wynik wyszukiwania, otworzy się plik w edytorze, a dopasowanie będzie widoczne nie tylko w kierunku pionowym, ale też poziomym.

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ójne nazwy. Najważniejsza zmiana dotyczy panelu Źródła > System plików, który został przemianowany na Obszar roboczy. Różne teksty interfejsu w tym panelu są teraz bardziej przejrzyste i niepotrzebne.
  • 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 w ramach tych typów skryptów: module, importmap, speculationrules.
  • Wyróżnij składnię skryptów importmap i speculationrules, z których oba zawierają kod JSON.

Przed i po ładnym wydrukowaniu oraz podświetleniu składni reguł spekulacji w skrypcie

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 w 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ń dotyczących zmniejszenia przezroczystości w systemie operacyjnym, takich jak ustawienie Zmniejsz przezroczystość 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. W szczególności ta wersja usuwa starszą wersję nawigacji i dodaje nowe audyty ułatwień dostępu oraz zmienia sposób oceny kategorii ułatwień dostępu.

Zobacz też pełną listę zmian. Podstawowe informacje na temat 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 deweloperskie obsługują teraz więcej kombinacji klawiszy nawigacyjnych:

  • Przegląd CSS: aby poruszać się po sekcjach na lewym pasku bocznym, użyj strzałek w górę i w dół.
  • 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.

Różne wyróżnienia

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, obiekty bez odwołania do typu, filtrowanie poleceń według dopasowania podciągów znaków i inne (1448050).
  • Wykres płomieniowy Skuteczność obramuje całą ramkę 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 teraz słowa kluczowe zgodne z CSS na końcu.
  • Filtry wyrażeń regularnych obsługują teraz spacje (1346936).
  • Naprawiono wykrywanie funkcji zapytań o media w Elementach (1472693).

Pobieranie kanałów podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. 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

Użyj poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne informacje związane z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.