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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Aktualizacje Dyktafonu

Ponowne odtwarzanie rozszerzeń

Dyktafon wprowadza obsługę niestandardowych opcji ponownego odtwarzania, które możesz umieścić w Narzędziach deweloperskich za pomocą rozszerzenia.

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

Niestandardowy interfejs ponownego odtwarzania.

Aby dostosować Rejestrator do swoich potrzeb i zintegrować go ze swoimi narzędziami, możesz opracować własne rozszerzenie: zapoznaj się z interfejsem API chrome.devtools.recorder i zapoznaj się z innymi przykładami rozszerzeń.

Problem z Chromium: 1400243.

Nagrywaj za pomocą selektora przekłuwania

Oprócz selektorów niestandardowych, CSS, ARIA, tekstowych i XPath możesz teraz nagrywać za pomocą selektorów przekłuwania. Selektory te działają jak selektory CSS, ale mogą też przebijać się przez pierwiastki cienia.

Rozpocznij nowe nagranie na stronie z modelem 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.

Ustawianie Dyktafonu tak, aby używał selektorów przekłuwania; działa selektor przekłuwania.

Problem z Chromium: 1411188.

Eksportuj jako skrypt Puppeteer dzięki analizie Lighthouse

Dyktafon wprowadza nową opcję eksportu: Puppeteer (w tym analiza Lighthouse). Dzięki Puppeteer możesz zautomatyzować i kontrolować Chrome. Dzięki Lighthouse możesz rejestrować i ulepszać skuteczność swojej strony internetowej.

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

Export Puppeteer (w tym analiza Lighthouse).

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

Raport Lighthouse został otwarty w Chrome.

Pobierz rozszerzenia

Poznaj opcje umożliwiające dostosowanie działania Dyktafonu, na przykład przez niestandardowe opcje eksportu. Aby pobrać rozszerzenia Dyktafonu, kliknij Eksportuj. Eksportuj > Pobierz rozszerzenia w nagraniu.

Opcja Pobierz rozszerzenia w menu Eksportuj.

Możesz dodać własne rozszerzenie do listy rozszerzeń Dyktafonu. Nie możemy się doczekać, aż pojawi się na liście.

Problemy z Chromium: 1417104, 1413168.

Elementy > Aktualizacje stylów

Dokumentacja CSS

Ile razy dziennie wyszukujesz dokumentację 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.

Etykietka zawiera też link Więcej informacji, który prowadzi do dokumentu CSS w MDN w tej usłudze.

Jeśli znasz się dobrze na CSS, etykietki mogą być uciążliwe. Aby wyłączyć je wszystkie, zaznacz Pole wyboru. Nie pokazuj.

Aby je włączyć ponownie, kliknij Ustawienia. Ustawienia > Preferencje > Elementy > Pole wyboru. Pokaż etykietkę dokumentacji CSS.

Problem z Chromium: 1401107.

Obsługa zagnieżdżania CSS

Panel Elementy > Style rozpoznaje teraz składnię Zagnieżdżanie arkusza 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

Dzięki ulepszeniu ulepszonego UX Konsola oznacza teraz wiadomości aktywowane przez punkty przerwania:

Zmiany w sposobie wyświetlania wiadomości aktywowanych przez punkty przerwania za pomocą ikon i odpowiedniego linku źródłowego.

Konsola udostępnia teraz odpowiednie linki zakotwiczające do punktów przerwania w plikach źródłowych zamiast skryptów VM<number> tworzonych przez Chrome, aby uruchamiać dowolny fragment JavaScriptu w V8.

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

Link zakotwiczony obok komunikatu z punktu logowania, który otwiera edytor punktów przerwania.

Problem z Chromium: 1027458.

Ignorowanie nieistotnych skryptów podczas debugowania

Aby ułatwić Ci skupienie się na najważniejszych częściach kodu, do listy ignorowanych możesz dodać nieistotne skrypty 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 ignorowania. Mogą pojawić się opcje umożliwiające dodanie skryptu lub folderu do listy albo ich usunięcie. Debuger ignoruje skrypty dodane do listy i pomija je w stosie wywołań.

Menu kontekstowe folderu i skryptu z opcjami dotyczącymi ignorowania.

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

Ignorowane skrypty i foldery są wyszarzone. Możesz je ukryć, korzystając z eksperymentalnej opcji dostępnej w menu Więcej opcji.

Jeśli wybierzesz zignorowany skrypt, po kliknięciu przycisku Skonfiguruj przejdziesz do sekcji 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ęło się wycofywanie programu profilującego JavaScript

Już w Chrome 58 zespół Narzędzi deweloperskich planował wycofać program profilujący JavaScript, a deweloperzy Node.js i Deno do profilowania wydajności procesora JavaScriptu używali panelu Wydajność.

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

Baner wycofania u góry programu profilującego.

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

Więcej informacji znajdziesz w odpowiednich dokumentach RFC i crbug.com/1354548.

Problem z Chromium: 1417647.

Emuluj zmniejszony kontrast

Na karcie Renderowanie dodaliśmy nową opcję do listy Emuluj niedoskonałości widzenia – Zmniejszony kontrast. Dzięki tej opcji możesz sprawdzić, jak Twoja witryna będzie wyglądać z perspektywy użytkowników o mniejszej czułości na kontrast.

Opcja obniżonego kontrastu wybrana w ramach funkcji „Emuluj wady wzroku”.

Pamiętaj, że opcje listy zostały zaktualizowane, aby informować o niewrażliwości kolorów.

Za pomocą Narzędzi deweloperskich możesz jednocześnie znaleźć i 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 działa teraz w wersji Lighthouse 10.0.1. Więcej informacji znajdziesz w artykule Co nowego w Lighthouse w wersji 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. Starsza wersja nawigacji jest teraz domyślnie wyłączona. Ta opcja używa starszej konfiguracji Lighthouse w trybie nawigacji.

Wyłączono starszą nawigację.

Lighthouse 10 używa teraz Moto G Power jako domyślnego urządzenia emulacyjnego. 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 skryptu service worker no-op

Chrome 112 pomija moduły obsługi pobierania skryptu service worker no-op (brak operacji), ponieważ mogą one spowalniać nawigację, ale nie są niezbędne. Takie moduły obsługi nie są już wymagane, aby witryna mogła zostać uznana za progresywną aplikację internetową.

Konsola wyświetla teraz ostrzeżenie, jeśli znajdzie w Twojej witrynie moduł obsługi pobierania bez operacji. Rozważ jego usunięcie.

moduł obsługi pobierania bez operacji i odpowiednie ostrzeżenie w konsoli;

Problem z Chromium: 1347319.

Inne ważne informacje

Oto kilka ważnych poprawek wprowadzonych w tej wersji:

  • W panelu Źródła > Punkty przerwania obok niejednoznacznych nazw plików wyświetlają się teraz różne ścieżki do plików (1403924).
  • Sekcja Główna na wykresie płomieniowym panelu Wydajność jest teraz oznaczona jako CpuProfiler::StartProfiling 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ą Tab wskazówki (1276960).
  • W Narzędziach deweloperskich dodano punkt przerwania detektora zdarzeń, który umożliwia wstrzymywanie działania po otwarciu okna obrazu w obrazie w dokumencie (1315352).
  • Narzędzia deweloperskie skonfigurowały obejście, które prawidłowo wyświetla artefakty pakietu internetowego Vue2 jako kod JavaScript (1416562).
  • Ustawienie Console ma teraz lepszą nazwę: automatycznie rozwijaj komunikaty Console.trace(). (1139616).

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

101 Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Subskrypcja Chrome 82 została anulowana.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59