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

Aktualizacje Dyktafonu

Obsługa rozszerzeń powtórek

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

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

Aby dostosować Dyktafon do swoich potrzeb i zintegrować go z narzędziami, możesz opracować własne rozszerzenie: zapoznaj się z interfejsem chrome.devtools.recorder API i sprawdź więcej przykładów rozszerzeń.

Problem w Chromium: 1400243.

Nagrywanie za pomocą selektorów przebijających

Oprócz selektorów niestandardowych, CSS, ARIA, tekstowych i XPath możesz teraz nagrywać za pomocą selektorów pierce. Selektory te działają podobnie jak selektory CSS, ale mogą też przenikać przez korzenie cienia.

Rozpocznij nowe nagrywanie na stronie z shadow DOM i zaznacz Pierce w sekcji Typy selektorów na potrzeby nagrywania. Nagrywaj interakcje z elementami w Shadow DOM i sprawdzaj odpowiedni krok.

Problem w Chromium: 1411188.

Eksportowanie jako skrypt Puppeteer z analizą Lighthouse

W Rejestratorze pojawiła się nowa opcja eksportu: Puppeteer (z analizą Lighthouse). Za pomocą Puppeteer możesz automatyzować i kontrolować Chrome. Dzięki Lighthouse możesz rejestrować i poprawiać wydajność swojej 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 rejestratora, np. niestandardowe opcje eksportowania. Aby uzyskać rozszerzenia do Rejestratora, w nagraniu kliknij  Eksportuj > Pobierz rozszerzenia.

Możesz dodać własne rozszerzenie do listy rozszerzeń do nagrywania. Nie możemy się doczekać, aż Twoja firma znajdzie się na tej liście.

Problemy z Chromium: 1417104, 1413168.

Elementy > Aktualizacje stylów

Dokumentacja CSS

Ile razy dziennie sprawdzasz dokumentację właściwości CSS? W panelu Elementy > Style po najechaniu kursorem na właściwość wyświetla się teraz krótki opis.

W dymku znajduje się też link Więcej informacji, który prowadzi do dokumentacji MDN CSS dotyczącej tej właściwości.

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

Aby ponownie je włączyć, zaznacz Ustawienia > Preferencje > Elementy > Pokaż etykietkę z dokumentacją CSS.

Problem w Chromium: 1401107.

Obsługa zagnieżdżania w CSS

Panel Elementy > Style rozpoznaje teraz składnię zagnieżdżania CSS i stosuje zagnieżdżone style do odpowiednich elementów.

Problem w Chromium: 1172985.

Oznaczanie punktów logowania i warunkowych punktów przerwania w konsoli

Dalsze ulepszenia wrażeń użytkownika związanych z ulepszonymi punktami przerwania: Konsola oznacza teraz wiadomości wywoływane przez punkty przerwania:

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

W konsoli są teraz prawidłowe linki do punktów przerwania w plikach źródłowych zamiast skryptów VM<number>, które Chrome tworzy, aby uruchamiać dowolny fragment kodu JavaScript w V8.

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

Problem w 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 dowolny skrypt lub folder i wybierz jedną z opcji związanych z ignorowaniem. Możesz zobaczyć opcje dodawania lub usuwania skryptu lub folderu z listy. Debuger ignoruje skrypty dodane do listy i pomija je w stosie wywołań.

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

Jeśli wybierzesz zignorowany skrypt, przycisk Skonfiguruj przeniesie Cię do sekcji 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ł wycofać profiler JavaScriptu i zachęcić programistów Node.js i Deno do korzystania z panelu Wydajność do profilowania wydajności procesora JavaScript.

W tej wersji Narzędzi deweloperskich (112) rozpoczyna się czterofazowe wycofywanie programu profilującego JavaScript. Panel Program profilujący JavaScript wyświetla teraz odpowiedni baner ostrzegawczy.

Zamiast profilera użyj panelu Wydajność, aby profilować procesor.

Więcej informacji znajdziesz w odpowiednich dokumentach RFC i crbug.com/1354548. Możesz też przesłać opinię.

Problem w Chromium: 1417647.

Emuluj zmniejszony kontrast

Na karcie Renderowanie dodaliśmy nową opcję do listy Emuluj wady wzroku – Zmniejszony kontrast. Dzięki tej opcji możesz sprawdzić, jak Twoja witryna wygląda dla osób o obniżonej wrażliwości na kontrast.

Pamiętaj, że opcje na liście zostały zaktualizowane, aby informować o tym, na jaki rodzaj niewrażliwości na kolory są przeznaczone.

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

Problemy z Chromium: 1412719, 1412721.

Lighthouse 10

Panel Lighthouse działa teraz w wersji Lighthouse 10.0.1. Więcej informacji znajdziesz w artykule Co nowego w Lighthouse 10.0.1.

Podstawowe informacje o korzystaniu z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Lighthouse >  >  Starsza nawigacja jest teraz domyślnie wyłączona. Ta opcja korzysta z starszej konfiguracji Lighthouse w trybie nawigacji.

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

Problem w Chromium: 772558.

Ostrzeżenie w konsoli o konieczności usunięcia procedury obsługi pobierania z usługi Service Worker, która nie wykonuje żadnych działań

Chrome 112 pomija obsługę pobierania w skrypcie service worker, która nie wykonuje żadnej operacji, ponieważ może spowalniać nawigację, ale nie spełnia żadnego celu. Takie moduły obsługi nie są już wymagane, aby witryna kwalifikowała się jako progresywna aplikacja internetowa.

Konsola wyświetla teraz ostrzeżenie, jeśli w Twojej witrynie znajdzie obsługę pobierania, która nie wykonuje żadnej operacji. Spróbuj ją usunąć.

Problem w Chromium: 1347319.

Różne wyróżnione informacje

Oto niektóre z najważniejszych poprawek w tej wersji:

• W panelu Źródła > Punkty przerwania obok niejednoznacznych nazw plików (1403924) wyświetlają się teraz ścieżki plików, które je odróżniają.
• W sekcji Główne na wykresie płomieniowym w panelu Wydajność wartość CpuProfiler::StartProfiling jest teraz oznaczana jako Profiler Overhead (1358602).
• Ulepszone autouzupełnianie w Narzędziach deweloperskich:
  • Źródła: spójne uzupełnianie dowolnego słowa (1320204).
  • Konsola: Arrow down wybiera pierwszą sugestię, a sugestie otrzymują podpowiedzi Tab (1276960).
• W Narzędziach deweloperskich dodaliśmy punkt przerwania w detektorze zdarzeń, który umożliwia wstrzymanie działania po otwarciu okna obrazu w obrazie dokumentu (1315352).
• Narzędzia deweloperskie wprowadziły obejście, które prawidłowo wyświetla artefakty Vue2 webpack jako JavaScript (1416562).
• Ustawienie Konsola zyskuje lepszą nazwę: Automatycznie rozwijaj wiadomości console.trace(). (1139616).

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię 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 w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.