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 @property CSS at-rule. Umożliwia jawne definiowanie niestandardowych właściwości CSS i rejestrowanie ich w arkuszu stylów bez uruchamiania kodu JavaScript.

Aby przejrzeć zarejestrowane właściwości niestandardowe, w sekcji Elementy > Style najedź kursorem na nazwę usługi, a zobaczysz jej deskryptory w etykietce. W etykietce kliknij link, aby wyświetlić zarejestrowaną właściwość w zwijanej sekcji @property.

Problemy z Chromium: 1471102, 1471103, 1471105.

Więcej ulepszeń lokalnych zastąpień

Korzystając z ulepszeń z poprzedniej wersji, zastąpienia lokalne wykonują teraz te czynności:

Gdy w sekcji Źródła > Strona klikniesz prawym przyciskiem myszy plik mapowany na źródło i wybierzesz Zastąp treść, w Narzędziach deweloperskich pojawi się okno z przejściem do pierwotnego źródła. Zawartości plików zmapowanych na źródło nie można zastąpić.
Panel Sieć otrzyma nową kolumnę Ma zastąpienia i odpowiedni filtr has-overrides:[content|headers|yes|no]. Aby wyświetlić kolumnę Zawiera zastąpienia, kliknij prawym przyciskiem myszy nagłówek tabeli i wybierz go.
W sekcji Źródła > Zastąpienia opcja menu Usuń wszystkie zastąpienia została zastąpiona opcją Usuń w celu zachowania precyzyjnego działania.

Poprzednie ustawienie Usuń wszystkie zastąpienia było mylące, ponieważ usunięto tylko zastąpienia aktywne w bieżącej sesji oznaczone fioletową ikoną .

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

Aby przywrócić poprzednią opcję, zaznacz Włącz „Tymczasowe usuwanie wszystkich zastąpień” w Ustawienia > Eksperymenty.

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

Rozszerzone wyszukiwanie

W wynikach wyszukiwania wyświetla się teraz wpis na wszystkie dopasowania znalezione w wierszu kodu. Wcześniej wyświetlane było tylko pierwsze dopasowanie w każdym wierszu kodu. Nowy sposób działania jest szczególnie przydatny podczas wyszukiwania w zmniejszonych plikach. Gdy klikniesz wynik wyszukiwania, otworzy się plik w edytorze i przewinie odpowiednik, aby wyświetlał się nie tylko w pionie, ale także w poziomie.

Wyniki wyszukiwania „przed” i „po” wyświetlają wszystkie dopasowania w wierszu.

Dodatkowo wyszukiwarka zwiększyła szybkość działania. W następnym filmie zobaczysz porównanie „przed” (po lewej) i „po” (po prawej).

Wyszukiwarka obsługuje teraz listę ignorowanych plików i nie pokazuje wyników pochodzących z ignorowanych plików.

Problemy z Chromium: 1468875, 1472019.

Ulepszony panel Źródła

Uproszczony obszar roboczy w panelu Źródła

Uprościliśmy funkcję obszaru roboczego w panelu Źródła:

Spójne nazwy. Panel Źródła > System plików został zmieniony na Obszar roboczy. Różne teksty interfejsu w tym panelu są teraz bardziej przejrzyste i nie zawierają nadmiarowości.
Ulepszona konfiguracja. Korzystaj 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 działa nowa konfiguracja i przepływ pracy:

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

Zmiana kolejności 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 zmieniaj kolejność innych paneli, kart i paneli.

Problemy z Chromium: 1473758.

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

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

Kod JavaScript wbudowany w kod JavaScript w następujących typach skryptów: module, importmap, speculationrules.
Wyróżnij składnię typów skryptów importmap i speculationrules, ponieważ oba zawierają kod JSON.

Modyfikacja druku i wyróżnianie składni typu skryptu w regułach spekulacyjnych przed i po.

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

Problem z Chromium: 1473875.

Emuluj funkcję multimediów „preferuje” o zmniejszonej przezroczystości

Chrome 118 obsługuje teraz funkcję multimediów prefers-reduced-transparency. Ta funkcja pozwala deweloperom dostosowywać treści internetowe do preferencji użytkownika, aby zmniejszyć przejrzystość w systemie operacyjnym. Dotyczy to na przykład ustawienia Zmniejsz przezroczystość w systemie macOS.

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

Problem z Chromium: 1424879.

Lighthouse 11

W panelu Lighthouse wyświetla się teraz Lighthouse 11. Przede wszystkim ta wersja usuwa starszą nawigację i dodaje nowe kontrole ułatwień dostępu oraz zmienia sposób oceny 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.

Udoskonalone ułatwienia dostępu

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

Przegląd CSS: aby przechodzić między sekcjami na pasku bocznym po lewej stronie, używaj strzałek w górę i w dół.
Pamięć: na pasku bocznym po lewej stronie zaznacz przycisk Zapisz obok zrzutów, naciskając Tab, i naciśnij Enter, aby wybrać folder.

Naprawiliśmy też kilka problemów z odczytywaniem informacji za pomocą czytnika ekranu.

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

Inne ważne informacje

Oto kilka ważnych poprawek i ulepszeń w tej wersji:

Sieć: nowe ikony dla popularnych typów zasobów: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
Zmiany kolorów materiału 3 w wielu elementach interfejsu, zwłaszcza w panelach Elementy i Wydajność (1456690, 1472243).
Opcja Problemy pozwala teraz zachowywać problemy z plikami cookie podczas nawigacji (1466601).
Różne ulepszenia opcji Aplikacja > Wstępne wczytywanie, w szczególności dotyczące siatki z możliwością sortowania i poprawionego szczegółów zestawu reguł (1410709).
Różne ulepszenia edytora poleceń w Monitorze protokołów, w szczególności ostrzeżenia dotyczące nieprawidłowych danych wejściowych, edytowanie wysłanego polecenia, edytor parametrów obiektów bez wstępnie zdefiniowanych kluczy, obsługa wyliczeń niezdefiniowanych według odwołań, obiekty bez odwołania do typu, polecenia filtrowania według dopasowań podłańcuchów i inne ulepszenia (1448050).
Wykres płomieniowy skuteczności otacza pole sumy na wykresie kołowym (1470147).
Źródła nie traktuje teraz myślników jako znaków tekstowych w kodzie CSS (1471354).
Teraz na końcu autouzupełnianie zawsze sortuje słowa kluczowe związane z CSS.
Filtry wyrażeń regularnych obsługują teraz spacje (1346936).
Poprawione wykrywanie funkcji zapytań o multimedia w elementach (1472693).

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

Prześlij nam sugestię lub opinię na stronie crbug.com.
Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
zatweetuj na @ChromeDevTools.
Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

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

101 Chrome

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

Subskrypcja Chrome 82 została anulowana.

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
Skopiuj ścieżkę JS do węzła DOM.
Aktualizacje panelu audytu, w tym nowy audyt, który wykrywa biblioteki JS i nowe słowa kluczowe umożliwiające dostęp do panelu kontroli z menu poleceń.
Dodatkowa wskazówka: sprawdzaj zapytania o multimedia w trybie urządzenia (film)

Chrome 71

Najedź kursorem na wynik wyrażenia aktywnego, aby wyróżnić węzeł DOM.
Zapisywanie węzłów DOM jako zmiennych globalnych
Informacje o inicjatorze i priorytetach teraz w importach i eksportach plików HAR
Otwórz menu poleceń z menu głównego
Punkty przerwania obrazu w obrazie
Dodatkowa wskazówka: użyj pola monitorEvents() do rejestrowania zdarzeń wywoływanych przez węzeł w konsoli (film)