Ta strona została przetłumaczona przez Cloud Translation API.

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

Sofia Emelianova

Nowa sekcja właściwości niestandardowych w sekcji Elementy > 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 przejrzeć zarejestrowane właściwości niestandardowe, w sekcji Elementy > Style najedź kursorem na nazwę usługi i zobacz jej deskryptory w etykietce. 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. 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 dokładnym 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 opcję „Usuń wszystkie zastąpienia tymczasowo” 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 przeszukiwania zminifikowanych plików. Gdy klikniesz wynik wyszukiwania, plik zostanie otwarty w edytorze i przewijane dopasowanie, aby było widoczne nie tylko w pionie, lecz także w poziomie.

Zapytania przed i po wyszukiwaniu zawierają wszystkie dopasowania w wierszu.

Dodatkowo funkcja wyszukiwarki została przyspieszona. 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. Najważniejsza nazwa panelu Źródła > 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 > Obszar roboczy 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, które obsługują kod JSON.

Przed i po drukowaniu ładunkowym oraz wyróżnianie składni typu skryptu reguł spekulacyjnych.

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 Material 3 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 ulepszenia w sekcji Aplikacja > Wstępne wczytywanie, w tym przede wszystkim możliwość sortowania siatek oraz poprawione 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.
Opublikuj tweeta na stronie @ChromeDevTools.
Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Wizualizacja danych o skuteczności w panelu Skuteczność
Podświetl węzły tekstowe w drzewie DOM
Kopiowanie ścieżki JS do węzła DOM
Aktualizacje panelu kontroli, w tym nowa kontrola wykrywająca biblioteki JS i nowe słowa kluczowe umożliwiające dostęp do panelu Kontrole z poziomu menu poleceń
Dodatkowa wskazówka: sprawdzaj zapytania o multimedia w trybie urządzenia (film)

Chrome 71

Najedź kursorem na wynik Live Expression, aby podświetlić węzeł DOM.
Przechowywanie węzłów DOM jako zmiennych globalnych
Inicjator i informacje o priorytetach są teraz dostępne w importach i eksportach HAR
Otwieranie menu poleceń z menu głównego
Punkty przerwania obrazu w obrazie
Dodatkowa wskazówka: użyj metody monitorEvents(), aby zarejestrować w konsoli zdarzenia uruchomione przez węzeł (film)