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

Sofia Emelianova
Sofia Emelianova

Aktualizacje Dyktafonu

Obsługa rozszerzeń odtwarzania

Dyktafon obsługuje niestandardowe opcje odtwarzania, które możesz osadzić w Narzędziach deweloperskich za pomocą rozszerzenia.

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

Niestandardowy interfejs odtwarzania.

Aby dostosować Dyktafon do swoich potrzeb i zintegrować go z używnymi narzędziami, rozważ stworzenie własnego rozszerzenia: zapoznaj się z interfejsem chrome.devtools.recorder API i zobacz więcej przykładów rozszerzeń.

Problem z Chromium: 1400243.

Nagrywanie z selektorami przebijania

Oprócz selektorów niestandardowych, selektorów CSS, selektorów ARIA, selektorów tekstowych i selektorów XPath możesz teraz nagrywać za pomocą selektorów przebijających. Te selektory działają jak selektory arkusza CSS, ale mogą też przebijać korzenie cienia.

Rozpocznij nowe nagrywanie na stronie z cieniami DOM i zaznacz Pole wyboru. Przeciwko w sekcji Typy selektorów do nagrania. Zapisz swoje interakcje z elementami w cieniach DOM i sprawdź odpowiedni krok.

Konfigurowanie Dyktafonu do używania selektorów przebijania; selektor przebijania w działaniu.

Problem z Chromium: 1411188.

Eksportowanie jako skryptu Puppeteer z analizą Lighthouse

dyktafonie dostępna jest nowa opcja eksportu: Puppeteer (w tym analiza Lighthouse). Za pomocą Puppeteer możesz automatyzować Chrome i nim zarządzać. Za pomocą Lighthouse możesz sprawdzać i ulepszać skuteczność witryny.

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

Eksportowanie Puppeteer (w tym analizy Lighthouse).

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

Raport Lighthouse otwarty w Chrome.

Pobieranie rozszerzeń

Poznaj opcje dostosowywania nagrywania, np. za pomocą niestandardowych opcji eksportowania. Aby uzyskać rozszerzenia dla nagrywarki, kliknij Eksportuj. Eksportuj > Pobierz rozszerzenia w nagraniu.

Opcja Pobierz rozszerzenia w menu eksportowania.

Możesz dodać własne rozszerzenie do listy rozszerzeń Recordera. Czekamy na Twoją opinię.

Problemy z Chromium: 1417104, 1413168.

Elementy > Aktualizacje stylów

Dokumentacja CSS

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

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

Wskazówka zawiera też link Więcej informacji, który prowadzi do dokumentacji CSS MND dotyczącej tej usługi.

Jeśli dobrze znasz CSS, samouczki mogą Ci przeszkadzać. Aby je wszystkie wyłączyć, zaznacz Pole wyboru. Nie pokazuj.

Aby je ponownie włączyć, zaznacz Ustawienia. Ustawienia > Preferencje > Elementy > Pole wyboru. Pokaż opis wtyczki dokumentacji CSS.

Problem z Chromium: 1401107.

Obsługa zagnieżdżania CSS

Panel Elementy > 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

Aby jeszcze bardziej ulepszyć wrażenia użytkownika związane z punktami kontrolnymi, w Konsoli dodaliśmy oznaczenia wiadomości wywoływanych przez punkty kontrolne:

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

Konsola zawiera teraz prawidłowe linki do punktów przerwania w plikach źródłowych zamiast skryptów VM<number>, które Chrome tworzy, aby uruchomić dowolny fragment kodu JavaScript w obiekcie V8.

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

Link kotwiczy obok wiadomości punktu logowania, który otwiera edytor punktów przełamania.

Problem z Chromium: 1027458.

Ignorowanie nieistotnych skryptów podczas debugowania

Aby ułatwić Ci skupienie się na najważniejszych częściach kodu, możesz teraz dodawać nieistotne skrypty do listy ignorowanych bezpośrednio z drzewa plików w panelu Źródła > Strona.

Kliknij prawym przyciskiem myszy skrypt lub folder i wybierz jedną z opcji związanych z ignorowaniem. Możesz zobaczyć opcje dodawania i usuwania skryptu lub folderu z listy. Debuger ignoruje skrypty dodane do listy i pomija je w zbiorze wywołań.

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

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

Skrypty i foldery na liście ignorowanych są wyszarzone. Możesz je ukryć, korzystając z opcji eksperymentalnej w menu Więcej opcji.

Jeśli wybierzesz ignorowany skrypt, przycisk Konfiguruj przeniesie Cię do Ustawienia. Ustawień > Listy ignorowanych. Ignorowane źródła możesz też ukryć 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 dla deweloperów planował wycofanie profilatora JavaScriptu i zachęcenie deweloperów Node.js i Deno do korzystania z panelu Wydajność do profilowania wydajności procesora JavaScript.

Ta wersja DevTools (112) rozpoczyna 4-etapowy proces wycofywania profilującego JavaScript. W panelu Program profilujący JavaScript wyświetla się teraz odpowiedni baner ostrzegawczy.

Baner o wycofaniu u góry narzędzia Profilowanie.

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

Aby dowiedzieć się więcej i przekazać opinię, odwiedź odpowiedni dokument RFCcrbug.com/1354548.

Problem z Chromium: 1417647.

Emulacja zmniejszonego kontrastu

Na karcie Wyświetlanie dodano nową opcję na liście Emulacja zaburzeń widzenia – Zmniejszony kontrast. Dzięki tej opcji możesz sprawdzić, jak Twoja witryna wygląda dla osób o obniżonej czułości na kontrast.

Opcja zmniejszonego kontrastu wybrana w ramach funkcji „Naśladowanie zaburzeń widzenia”.

Pamiętaj, że opcje listy zostały zaktualizowane, aby informować o nieczułości na kolor.

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

Problemy z Chromium: 1412719, 1412721.

Lighthouse 10

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

Podstawy korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Lighthouse > Ustawienia. > Puste pole wyboru Stara nawigacja jest teraz domyślnie wyłączona. Ta opcja używa w trybie nawigacji starszej konfiguracji Lighthouse.

Wyłączenie starszej nawigacji.

Lighthouse 10 używa teraz telefonu Moto G Power jako domyślnego urządzenia do emulacji. DevTools dodał to urządzenie do Ustawienia. Ustawienia > Urządzenia.

Moto G Power na liście Urządzenia.

Problem z Chromium: 772558.

Ostrzeżenie w konsoli o konieczności usunięcia niedziałającego przetwarzającego elementu obsługi pobierania usługi

Chrome 112 pomija bezczynne (niewykonujące żadnej operacji) przetwarzanie obsługiwanych przez skrypt service workera, ponieważ może to spowolnić nawigację, a nie przynosi żadnego efektu. Takie moduły nie są już wymagane, aby witryna mogła kwalifikować się jako progresywna aplikacja internetowa.

Konsola wyświetla teraz ostrzeżenie, jeśli znajdzie w Twojej witrynie niedziałający moduł obsługi pobierania. Rozważ usunięcie tego elementu.

Obsługa pobierania bez operacji i odpowiednie ostrzeżenie w Konsoli.

Problem z Chromium: 1347319.

Inne najciekawsze momenty

Oto kilka istotnych poprawek w tej wersji:

  • W panelu Źródła > Punkty przerwania obok niejednoznacznych nazw plików wyświetlane są teraz ścieżki do tych plików (1403924).
  • Główna sekcja na wykresie płomienia w panelu Wydajność określa teraz CpuProfiler::StartProfiling jako Profiler Overhead (1358602).
  • Ulepszenia autouzupełniania w Narzędziach deweloperskich:
    • Źródła: spójne uzupełnienia dowolnego słowa (1320204).
    • Konsola: Arrow down wybiera pierwszą sugestię, a sugestie otrzymują Tab podpowiedzi (1276960).
  • W Narzędziach deweloperskich dodano punkt przerwania detektora zdarzeń, który pozwala wstrzymać działanie podczas otwierania okna dokumentu w trybie obrazu w obrazie (1315352).
  • Narzędzia programistyczne skonfigurowały obejście, które prawidłowo wyświetla artefakty Vue2 webpack jako JavaScript (1416562).
  • Ustawienie Konsoli ma teraz lepszą nazwę: automatycznie rozwijaj wiadomości console.trace(). (1139616).

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.