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

Nowa sekcja właściwości niestandardowych w Elementach > Style

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

Aby sprawdzić zarejestrowane właściwości niestandardowe, w sekcji Elementy > Style. Najedź kursorem na nazwę właściwości, aby zobaczyć jej deskryptory. 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:

• W sekcji Źródła > Strona, gdy klikniesz prawym przyciskiem myszy plik zmapowany na źródło i wybierzesz Zastąp treść, w Narzędziach deweloperskich pojawi się okno, które przekieruje Cię do oryginalnego źródła. Nie można zastąpić zawartości plików mapowanych na źródło.

  

• W panelu Sieć pojawią się nowe kolumny Ma zastąpienia i odpowiadający im filtr has-overrides:[content|headers|yes|no]. Aby wyświetlić kolumnę Ma zastąpienia, 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 precyzyjnym działaniem.

  

Poprzednie rozwiązanie Usuń wszystkie zastąpienia było mylące, ponieważ usuwało tylko zastąpienia aktywne w bieżącej sesji, oznaczone ikoną fioletowej kropki .

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

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

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

Rozszerzone wyszukiwanie

Wyniki wyszukiwania wyświetlają teraz wpis dla wszystkich dopasowań znalezionych w wierszu kodu. Wcześniej wyświetlało się tylko pierwsze dopasowanie na wiersz kodu. Nowe zachowanie jest szczególnie przydatne podczas wyszukiwania zminimalizowanych plików. Po kliknięciu wyniku wyszukiwania plik otworzy się w edytorze i wygląda dopasowanie nie tylko w pionie, lecz także w poziomie.

Dodatkowo wyszukiwarka stała się szybsza. W następnym filmie zobaczysz porównanie „przed” (po lewej) i „po” (po prawej).

Wyszukiwarka obsługuje teraz ignorowanie listy i nie pokazuje wyników z ignorowanych plików.

Problemy z Chromium: 1468875, 1472019.

Ulepszony panel Źródła

Uproszczony obszar roboczy w panelu Źródła

Uproszczona funkcja obszaru roboczego w panelu Źródła:

• Spójne nazwy. Głównie w sekcji Źródła > Nazwa panelu System plików została zmieniona na Workspace. Różne teksty interfejsu w tym panelu są teraz bardziej przejrzyste i niepotrzebne.
• Ulepszona konfiguracja. Skorzystaj z lepszych wskazówek dotyczących przeciągania i upuszczania folderów lub kliknij link, aby wybrać folder.

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

Zobacz, jak wygląda nowy proces konfiguracji i przepływu pracy:

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

Zmień kolejność paneli w Źródłach

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

Problemy z Chromium: 1473758.

Wyróżnianie składni i dodawanie ładnego drukowania w przypadku większej liczby typów skryptów

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

• Umieść kod JavaScript bezpośrednio w tekście tego typu: module, importmap, speculationrules.
• Wyróżnij składnię skryptów importmap i speculationrules, z których oba zawierają kod JSON.

Więcej informacji o regułach spekulacyjnych znajdziesz w artykule Wstępne renderowanie stron w Chrome na potrzeby natychmiastowej nawigacji.

Problem w Chromium: 1473875.

Emuluj funkcję multimediów „prefers-redudued-przejrzystość”

Chrome 118 obsługuje teraz funkcję multimediów prefers-reduced-transparency. Ta funkcja pozwala deweloperom dostosowywać treści z internetu do preferencji użytkownika w celu zapewnienia mniejszej przejrzystości systemu operacyjnego, np. w przypadku ustawienia Zmniejsz przezroczystość w systemie macOS.

Aby emulować tę funkcję multimediów, otwórz kartę Renderowanie i przewiń do niej.

Problem z Chromium: 1424879.

Latarnia morska 11

Panel Lighthouse działa teraz w 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.

Udoskonalone 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ęć: na lewym pasku bocznym obok zrzutów za pomocą klawisza Tab zaznacz przycisk Zapisz i naciśnij Enter, aby wybrać folder.

Rozwiązaliśmy też kilka problemów z komunikatami czytnika ekranu.

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

Różne wyróżnienia

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 materiału w 3 kolorach w wielu elementach interfejsu, zwłaszcza w panelach Elementy i Wydajność (1456690, 1472243).
• Karta Problemy pozwala teraz zachować problemy z plikami cookie w różnych sekcjach nawigacyjnych (1466601).
• Różne aplikacje > Ulepszenia wstępnego wczytywania, w szczególności możliwe do sortowania siatki i zmienione szczegóły zestawu reguł (1410709).
• Różne ulepszenia edytora poleceń w Monitorze protokołów, w szczególności ostrzeżenia dotyczące błędnych danych wejściowych, edytowanie wysłanego polecenia, edytor parametrów obiektów bez wstępnie zdefiniowanych kluczy, obsługa wyliczeniowych niezdefiniowanych przez odwołania, obiekty bez odwołania do typu, polecenia filtrowania według dopasowań podłańcucha i inne (1448050).
• Wykres płomieniowy Skuteczność obramuje całą ramkę na wykresie kołowym (1470147).
• Źródła nie traktuje teraz myślników jako znaków słownych 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).

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

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