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

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.

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 Przeciwko w sekcji Typy selektorów do nagrania. Zapisz swoje interakcje z elementami w cieniach DOM i sprawdź odpowiedni krok.

Problem z Chromium: 1411188.

Eksportowanie jako skryptu Puppeteer z analizą Lighthouse

W 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, wybierz nową opcję i zapisz plik .js.

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

Pobieranie rozszerzeń

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

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.

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 Nie pokazuj.

Aby je ponownie włączyć, zaznacz Ustawienia > Preferencje > Elementy > 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:

• console.* wywołania w warunkowych punktach przerwania z pomarańczowym znakiem zapytania ?
• Logpoint z różowymi 2 kropkami ..

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.

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 nie uwzględnia ich w zestawie wywołań.

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

Jeśli wybierzesz ignorowany skrypt, przycisk Konfiguruj przeniesie Cię do Ustawień > Listy ignorowanych. Ignorowane źródła możesz też ukryć 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 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.

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

Aby dowiedzieć się więcej i przekazać opinię, odwiedź odpowiedni dokument RFC i crbug.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.

Pamiętaj, że opcje listy zostały zaktualizowane, aby informować o niezależności od koloru.

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 > > Stara nawigacja jest teraz domyślnie wyłączona. Ta opcja używa w trybie nawigacji starszej konfiguracji Lighthouse.

Lighthouse 10 używa teraz telefonu Moto G Power jako domyślnego urządzenia do emulacji. DevTools dodał to urządzenie do Ustawienia > 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ż jej usunięcie.

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 przygotował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.

• Przesyłaj opinie i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi.
• Wyślij tweeta do @ChromeDevTools.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

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