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

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

Sofia Emelianova

Jecelyn Yeen

Aktualizacje Dyktafonu

Obsługa rozszerzeń do ponownego odtwarzania

Dyktafon wprowadza obsługę niestandardowych opcji odtwarzania, które możesz umieścić w Narzędziach deweloperskich za pomocą rozszerzenia.

Wypróbuj przykładowe rozszerzenie. Wybierz nową opcję niestandardowego ponownego odtwarzania, aby otworzyć interfejs niestandardowego ponownego odtwarzania.

Niestandardowy interfejs ponownego odtwarzania.

Aby dostosować Dyktafon do swoich potrzeb i zintegrować go ze swoimi narzędziami, możesz stworzyć własne rozszerzenie: zapoznaj się z chrome.devtools.recorder API i zapoznaj się z bardziej przykładami rozszerzeń.

Problem z Chromium: 1400243.

Nagrywaj z użyciem selektora pierce

Oprócz selektorów niestandardowych, CSS, ARIA, tekstowych i XPath możesz teraz nagrywać za pomocą selektorów pierce. Te selektory działają jak selektory CSS, ale mogą również przebijać się przez rdzenie cienia.

Rozpocznij nowe nagranie na stronie, używając modelu shadow DOM i zaznacz Pierce w sekcji Typy selektorów do nagrywania. Zarejestruj interakcję z elementami w modelu shadow DOM i sprawdź odpowiedni krok.

Ustawienie w Dyktafonie korzystania z selektorów pierce i selektora pierce'a w akcji.

Problem z Chromium: 1411188.

Eksportowanie jako skrypt Puppeteer z analizą Lighthouse

Dyktafon wprowadza nową opcję eksportu: Puppeteer (w tym analiza Lighthouse). Puppeteer pozwala zautomatyzować i kontrolować Chrome. Za pomocą Lighthouse możesz rejestrować i poprawiać skuteczność strony.

Otwórz nagranie, kliknij Eksportuj, wybierz nową opcję i zapisz plik .js.

Eksport Puppeteer (w tym analiza Lighthouse).

Uruchom skrypt Puppeteer, aby pobrać raport Lighthouse w pliku flow.report.html.

Otwarto raport Lighthouse w Chrome.

Pobierz rozszerzenia

Zapoznaj się z opcjami dostosowania dyktafonu, np. za pomocą niestandardowych opcji eksportu. Pobierz rozszerzenia dla Dyktafonu, klikając Eksportuj > Pobierz rozszerzenia w nagraniu.

Opcja Pobierz rozszerzenia w menu Eksportuj.

Możesz dodać własne rozszerzenie do rozszerzeń Dyktafonu. Cieszymy się, że Twoja organizacja pojawi się na liście.

Problemy z Chromium: 1417104, 1413168.

Elementy > Aktualizacje stylów

Dokumentacja CSS

Ile razy dziennie wyszukujesz dokumentację dotyczącą właściwości CSS? W panelu Elementy > Style wyświetla się teraz krótki opis po najechaniu kursorem na usługę.

Etykietka z dokumentacją właściwości CSS.

Etykietka zawiera też link Więcej informacji, który prowadzi do odnośnika CSS MDN tej usługi.

Jeśli dobrze znasz CSS, etykietki mogą być uciążliwe. Aby wyłączyć wszystkie, zaznacz Nie pokazuj.

Aby je ponownie włączyć, kliknij Ustawienia > Preferencje > Elementy > Pokaż etykietkę dokumentacji CSS.

Problem z Chromium: 1401107.

Obsługa zagnieżdżania CSS

Panel Elementy > Style rozpoznaje teraz składnię Zagnieżdżanie CSS i stosuje style zagnieżdżone do odpowiednich elementów.

Problem z Chromium: 1172985.

Oznaczanie punktów logowania i warunkowych punktów przerwania w konsoli

Ulepszając ulepszony interfejs punktu przerwania, Konsola oznacza teraz wiadomości aktywowane przez te punkty:

console.* wywołań w warunkowych punktach przerwania z pomarańczowym znakiem zapytania ?
Komunikaty punktów logowania z różowymi 2 kropkami ..

Zmiany w sposobie wyświetlania w konsoli wiadomości wywoływanych przez punkty przerwania: z ikonami i odpowiednim linkiem do źródła.

Konsola udostępnia teraz prawidłowe linki zakotwiczające do punktów przerwania w plikach źródłowych zamiast skryptów VM<number>, które Chrome tworzy w celu uruchamiania dowolnego fragmentu kodu JavaScript w V8.

Kliknij link obok komunikatu o punkcie przerwania, aby przejść bezpośrednio do edytora punktów przerwania.

Link do kotwicy obok komunikatu z punktu logowania, który otwiera edytor punktów przerwania.

Problem z Chromium: 1027458.

Ignoruj nietrafne skrypty podczas debugowania

Aby łatwiej skoncentrować się na najważniejszych częściach kodu, możesz teraz dodać nietrafne skrypty do listy ignorowanych bezpośrednio z drzewa plików w panelu Źródła > Strona.

Kliknij prawym przyciskiem myszy dowolny skrypt lub folder i wybierz jedną z opcji związanych z ignorowaniem. Możesz zobaczyć opcje umożliwiające dodanie skryptu lub folderu do listy bądź usunięcie go z listy. Debuger ignoruje skrypty dodane do listy i pomija je w stosie wywołań.

Menu kontekstowe folderu i skryptu z opcjami związanymi z ignorowaniem.

Wszystkie skrypty i foldery znajdujące się na liście ignorowanych są wyszarzone w drzewie plików.

Zignorowane skrypty i foldery są wyszarzone. Możesz je ukryć, korzystając z eksperymentalnej opcji dostępnej w menu Więcej opcji.

Jeśli wybierzesz ignorowany skrypt, po kliknięciu przycisku Skonfiguruj przejdziesz do Ustawienia > Lista ignorowanych. Zignorowane źródła możesz też ukryć w drzewie plików, klikając > Ukryj ignorowane źródła .

Problem z Chromium: 883325.

Rozpoczęcie wycofywania programu profilującego JavaScript

Już w Chrome 58 zespół Narzędzi deweloperskich planował ostatecznie wycofać narzędzie JavaScript Profiler, a deweloperzy korzystający z Node.js i Deno mogli korzystać z panelu Performance (Wydajność) do profilowania wydajności procesora JavaScript.

Ta wersja Narzędzi deweloperskich (112) rozpoczyna czteroetapowe wycofywanie JavaScript Profiler. W panelu JavaScript Profiler jest wyświetlany odpowiedni baner ostrzegawczy.

Zamiast Profilera do profilowania procesora używaj panelu Wydajność.

Więcej informacji i przesłanie opinii znajdziesz w odpowiednich dokumentach RFC i crbug.com/1354548.

Problem z Chromium: 1417647.

Emuluj zmniejszony kontrast

Na karcie Renderowanie na liście Emuluj wady wzroku pojawi się nowa opcja Zmniejszony kontrast. Dzięki tej opcji możesz sprawdzić, jak Twoja strona wygląda w przypadku osób o niższej czułości kontrastu.

Opcja zmniejszonego kontrastu wybrana w funkcji „Emuluj wady wzroku”.

Zwróć uwagę, że opcje listy zostały zaktualizowane, by można było lepiej zrozumieć, jaką niewrażliwość kolorów reprezentują poszczególne opcje.

Za pomocą Narzędzi deweloperskich możesz jednocześnie znaleźć i rozwiązać wszystkie problemy z kontrastem. Więcej informacji znajdziesz w artykule Tworzenie bardziej czytelnej witryny.

Problemy z Chromium: 1412719, 1412721.

Latarnia morska 10

Panel Lighthouse korzysta teraz z Lighthouse 10.0.1. Więcej informacji znajdziesz w artykule Co nowego w Lighthouse 10.0.1.

Podstawowe informacje na temat korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Lighthouse > > Starsza wersja nawigacji jest teraz domyślnie wyłączona. Ta opcja w trybie nawigacji korzysta ze starszej konfiguracji Lighthouse.

Wyłączono starszą nawigację.

Lighthouse 10 używa teraz Moto G Power jako domyślnego urządzenia do emulacji. Narzędzia deweloperskie dodały to urządzenie do sekcji Ustawienia > Urządzenia.

Moto G Power na liście urządzeń.

Problem z Chromium: 772558.

Ostrzeżenie w konsoli z prośbą o usunięcie modułu obsługi pobierania instancji roboczej usługi bezobsługowej

Chrome 112 pomija moduły obsługi pobierania mechanizmów Service Worker bez działania, ponieważ mogą one spowalniać nawigację, ale nie spełniają swojego celu. Takie moduły obsługi nie są już wymagane, aby witryna mogła być kwalifikowana jako progresywna aplikacja internetowa.

Konsola wyświetli ostrzeżenie, jeśli wykryje w witrynie moduł obsługi pobierania bez wykonywania operacji. Spróbuj go usunąć.

Moduł obsługi pobierania bez działań i odpowiednie ostrzeżenie w konsoli.

Problem z Chromium: 1347319.

Różne wyróżnienia

Oto kilka ważnych poprawek w tej wersji:

W panelu Źródła > Punkty przerwania wyświetlają się teraz różne ścieżki plików obok niejednoznacznych nazw plików (1403924).
W sekcji Główne na wykresie płomieniowym w panelu Skuteczność CpuProfiler::StartProfiling występuje teraz jako Profiler Overhead (1358602).
Ulepszone autouzupełnianie w Narzędziach deweloperskich:
- Źródła: powtarzające się uzupełnianie dowolnego słowa (1320204).
- Konsola: Arrow down wybiera pierwszą sugestię i sugestie otrzymują wskazówki Tab (1276960).
W Narzędziach deweloperskich dodano punkt przerwania detektora zdarzeń, który umożliwia wstrzymywanie okna obrazu w obrazie dokumentu (1315352).
W Narzędziach deweloperskich skonfigurowano obejście, które prawidłowo wyświetla artefakty pakietu internetowego Vue2 jako JavaScript (1416562).
Ustawienie Console otrzymuje lepszą nazwę: Automatycznie rozwijaj wiadomości Console.trace(). (1139616).

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)