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

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.

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.

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.

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

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.

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? Elementy > W panelu Style wyświetla się teraz krótki opis, gdy najedziesz kursorem na usługę.

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 > Ustawienia > Elementy > Pokaż etykietkę dotyczącą dokumentacji CSS.

Problem z Chromium: 1401107.

Obsługa zagnieżdżania CSS

Elementy > Panel Style rozpoznaje teraz składnię Zagnieżdżania CSS i stosuje zagnieżdżone style 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 ..

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.

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 sekcji Źródła > Okienko 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ń.

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

Jeśli wybierzesz ignorowany skrypt, przycisk Skonfiguruj przekieruje Cię do Ustawienia > Lista ignorowanych. Możesz też ukryć ignorowane źródła w drzewie plików, klikając > Ukryj źródła z listy ignorowanych .

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.

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.

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

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ąć.

Problem z Chromium: 1347319.

Różne wyróżnienia

Oto kilka ważnych poprawek w tej wersji:

• Źródła > W panelu Punkty przerwania obok niejednoznacznych nazw plików (1403924) wyświetlane są teraz różne ścieżki plików.
• W sekcji Główne na wykresie płomieniowym w panelu Skuteczność wartość CpuProfiler::StartProfiling to teraz Profiler Overhead (1358602).
• Narzędzia deweloperskie ulepszyły autouzupełnianie:
  • Ź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 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.