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

Sofia Emelianova
Sofia Emelianova

Aktualizacje Dyktafonu

Obsługa rozszerzeń odtwarzania ponownie

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 Pole wyboru. Pierce w sekcji Typy selektorów do nagrywania. Zarejestruj interakcję z elementami w modelu shadow DOM i sprawdź odpowiedni krok.

ustawienie Dyktafonu tak, aby używał selektorów pierce; Selektor przekłuwania ciała w działaniu.

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. 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. 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? Elementy > W panelu Style wyświetla się teraz krótki opis, gdy najedziesz 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 Pole wyboru. Nie pokazuj.

Aby je ponownie włączyć, kliknij Ustawienia. Ustawienia > Ustawienia > Elementy > Pole wyboru. 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:

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 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ń.

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, przycisk Skonfiguruj przekieruje Cię do Ustawienia. Ustawienia > Lista ignorowanych. Możesz też ukryć ignorowane źródła w drzewie plików, klikając Menu z 3 kropkami. > Ukryj źródła z listy ignorowanych Funkcja eksperymentalna..

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.

Baner wycofania u góry narzędzia do profilowania.

Zamiast Profiler do profilowania procesora używaj panelu Profiler.

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 sekcji „Emuluj wady wzroku” funkcji.

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 > Ustawienia. > Puste pole wyboru. 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 Ustawienia. 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:

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   Więcej > 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.