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.

Nagrywaj z użyciem selektora pierce

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 Pierce w sekcji Typy selektorów do nagrania. Zarejestruj interakcję z elementami w modelu shadow 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). Puppeteer pozwala zautomatyzować i kontrolować Chrome. 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 magnetofonu, na przykład za pomocą niestandardowych opcji eksportowania. Pobierz rozszerzenia dla Dyktafonu, klikając Eksportuj > Pobierz rozszerzenia w nagraniu.

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

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 wyłączyć wszystkie, 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

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

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

Konsola udostępnia teraz prawidłowe linki zakotwiczone 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 kontrolnym, aby przejść bezpośrednio do edytora punktów kontrolnych.

Problem z Chromium: 1027458.

Ignorowanie nieistotnych skryptów 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 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 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 deweloperskich planował wycofanie profilatora JavaScriptu i zachęcanie 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.

Emuluj zmniejszony kontrast

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

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 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ługi skryptu service worker, ponieważ może to spowolnić nawigację, a nie przynosi żadnego efektu. Takie moduły obsługi nie są już wymagane, aby witryna mogła być kwalifikowana 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.

Problem z Chromium: 1347319.

Inne wyróżnione informacje

Oto kilka istotnych 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).
• 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: 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).
• 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

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 platform internetowych i pomagają w wykrywaniu problemów w witrynie przed użytkownikami.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne informacje związane z Narzędziami deweloperskimi.

• 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.
• Opublikuj tweeta na stronie @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.