Nowości w Narzędziach deweloperskich (Chrome 105)

Odtwarzanie krok po kroku w Dyktafonie

Teraz w panelu Dyktafon możesz ustawić punkt przerwania i ponownie odtworzyć krok po kroku użytkownika.

Aby ustawić punkt przerwania, kliknij niebieską kropkę obok kroku. Ponownie odtwórz wzorzec użytkownika; ponowne odtwarzanie zostanie wstrzymane przed wykonaniem kroku. Tutaj możesz kontynuować odtwarzanie, wykonać krok lub anulować ponowne odtwarzanie.

Dzięki tej funkcji możesz łatwo w pełni wizualizować i debugować ścieżkę użytkownika.

Więcej informacji znajdziesz w dokumentacji funkcji Dyktafonu.

Problem w Chromium: 1257499

Obsługa zdarzenia najechania kursorem myszy w panelu Dyktafon

Dyktafon obsługuje teraz ręczne dodawanie opcji najechania kursorem myszy podczas nagrywania.

Ta wersja demonstracyjna pokazuje menu podręczne po najechaniu kursorem. Spróbuj zarejestrować ścieżkę użytkownika i kliknąć pozycję w menu.

Jeśli odtworzyć teraz ścieżkę użytkownika ponownie, zakończy się ona niepowodzeniem, ponieważ Dyktafon nie przechwytuje automatycznie zdarzeń kursora myszy podczas nagrywania. Aby rozwiązać ten problem, dodaj krok ręcznie, aby przed kliknięciem elementu menu najechać kursorem na selektor.

Problem w Chromium: 1257499

Największe wyrenderowanie treści (LCP) w panelu Statystyki wydajności

LCP to ważny wskaźnik związany z użytkownikami służącymi do pomiaru widocznej szybkości wczytywania. Teraz możesz poznać ścieżki krytyczne i główne przyczyny największego wyrenderowania treści (LCP).

W nagraniu wydajności kliknij plakietkę LCP na osi czasu. W panelu Szczegóły możesz wyświetlić wynik LCP, dowiedzieć się, jak naprawić zasoby, które spowalniają LCP, oraz wyświetlić ścieżkę krytyczną zasobu LCP.

Zobacz Statystyki wydajności, aby dowiedzieć się, jak uzyskiwać przydatne statystyki i zwiększać wydajność witryny za pomocą panelu.

Problem z Chromium: 1326481

Określ przebłyski tekstu (FOIT, FOUT) jako potencjalne przyczyny przesunięć układu

Panel Statystyki wydajności wykrywa teraz przebłysk niewidocznego tekstu (FOIT) i błysk niesformatowanego tekstu (FOUT) jako potencjalne przyczyny przesunięć układu.

Aby poznać potencjalne główne przyczyny przesunięcia układu, kliknij zrzut ekranu na ścieżce Przesunięcia układu.

Aby poznać metodę zapobiegania przestojom układu, przeczytaj artykuł Optymalizowanie wczytywania i renderowania WebFont.

Problemy z Chromium: 1334628, 1328873

Moduły obsługi protokołów w panelu manifestu

Za pomocą Narzędzi deweloperskich możesz teraz przetestować rejestrację modułu obsługi protokołu URL w przypadku progresywnych aplikacji internetowych (PWA).

Rejestracja modułu obsługi protokołu URL pozwala zainstalowanym aplikacjom PWA obsługiwać linki korzystające z określonego protokołu (np. magnet, web+example), co zapewnia bardziej zintegrowaną obsługę.

Przejdź do sekcji Protocol Handlers (Moduły obsługi protokołów), klikając Aplikacja > Panel pliku manifestu. Tutaj możesz wyświetlić i przetestować wszystkie dostępne protokoły.

Na przykład zainstaluj tę demonstracyjną aplikację PWA. W sekcji Protocol Handlers wpisz „americano” i kliknij Test Protocol, aby otworzyć stronę kawy w PWA.

Problemy z Chromium: 1300613

Plakietka Górna warstwa w panelu Elementy

Użyj plakietki Górna warstwa, aby zrozumieć koncepcję górnej warstwy i zwizualizować, jak zmienia się jej zawartość.

Element <dialog> jest ostatnio stabilny w różnych przeglądarkach. Otwierane okno jest umieszczane w górnej warstwie. Treści najwyższego poziomu są renderowane nad wszystkimi innymi treściami.

W tej demo kliknij Otwórz okno.

Aby ułatwić wizualizację elementów najwyższego poziomu, Narzędzia deweloperskie dodaje do drzewa DOM kontener górnej warstwy (#top-layer). Jest on widoczny po zamykającym tagu </html>.

Aby przeskoczyć z elementu kontenera górnej warstwy do elementu drzewa warstwy, kliknij przycisk Pokaż obok elementu lub jego tła w kontenerze górnej warstwy.

Obok elementu drzewa górnej warstwy (np. elementu okna) kliknij plakietkę górna warstwa, aby przejść do kontenera górnej warstwy.

Problem w Chromium: 1313690

Dołącz informacje na potrzeby debugowania Wasm w czasie działania

Teraz podczas działania możesz dołączać informacje debugowania DWARF dotyczące Wasm. Wcześniej panel Źródła obsługiwał tylko dołączanie map źródeł do plików JavaScript i wam.

Otwórz plik Wasm w panelu Źródła. Kliknij prawym przyciskiem myszy w edytorze i wybierz Dodaj dane debugowania DWARF..., by na żądanie dołączyć informacje na potrzeby debugowania.

Problem z Chromium: 1341255

Obsługa edycji na żywo podczas debugowania

Możesz teraz edytować funkcję najwyższego poziomu w stosie bez ponownego uruchamiania debugera.

W Chrome 104 Narzędzia deweloperskie przywracają funkcję ponownego uruchomienia ramki. Nie możesz jednak edytować funkcji, w której obecnie jesteś wstrzymany. Programiści często przerywają działanie funkcji, a następnie edytują ją po wstrzymaniu.

Po tej aktualizacji debuger automatycznie ponownie uruchomi funkcję z tymi ograniczeniami:

• Po wstrzymaniu można edytować tylko funkcję znajdującą się najwyżej na samej górze
• Brak wywołań rekurencyjnych dla tej samej funkcji poniżej stosu

Problem w Chromium: 1334484

Wyświetl i edytuj zakres @scope w regułach w panelu Style

Ustawienia reguł CSS @scope możesz teraz wyświetlać i edytować w panelu Style.

Pole @scope w regułach jest częścią specyfikacji kaskadowania i dziedziczenia CSS na poziomie 6. Te reguły umożliwiają programistom określanie zakresu reguł stylu w CSS.

Otwórz tę stronę demonstracyjną i sprawdź hiperlink w elemencie <div class=”dark-theme”>. W panelu Style (Style) wyświetl reguły @scope. Kliknij deklarację reguły, aby ją edytować.

Problem w Chromium: 1337777

Ulepszenia mapy źródeł

Oto kilka poprawek dotyczących map źródeł, które poprawiają ogólne działanie debugowania:

• Narzędzia deweloperskie poprawnie interpretują teraz identyfikatory mapy źródłowej ze znakami interpunkcyjnymi. Niektóre nowoczesne narzędzia do minifikacji (np. esbuild) tworzą mapy źródeł, które łączą identyfikatory z kolejnymi znakami interpunkcyjnymi (przecinek, nawiasy, średnik).
• Narzędzia deweloperskie rozpoznają teraz nazwy map źródłowych w przypadku konstruktorów z wywołaniem super.
• Naprawiliśmy indeksowanie adresów URL mapy źródeł w przypadku zduplikowanych kanonicznych adresów URL. Wcześniej punkty przerwania nie były aktywowane w niektórych plikach z powodu zduplikowanych kanonicznych adresów URL.

Problem z Chromium: 1335338, 1333411

Różne wyróżnienia

Oto kilka ważnych poprawek w tej wersji:

• Usuń z tabeli w sekcji Aplikacja prawidłowo parę klucz-wartość pamięci lokalnej. Okienko Pamięć lokalna po usunięciu. (1339280).
• Podglądy kolorów są teraz prawidłowo wyświetlane podczas przeglądania plików CSS w panelu Źródła. Wcześniej ich stanowiska były niewłaściwie umiejscowione. (1340062).
• Konsekwentnie wyświetlaj elementy Flex i siatki CSS w panelu Układ oraz jako plakietki w panelu Elementy. Wcześniej w obu miejscach losowo brakowało elementów Flex i siatki. (1340441, 1273992)
• W przypadku ramek reklam, jeśli Narzędzia deweloperskie odnajdują skrypt, który spowodował oznaczenie ramki jako reklamy, dostępny jest nowy link do skryptu reklamy twórcy. Aby otworzyć ramkę, wybierz Aplikacja > Ramki. (1217041)

Pobierz kanały 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 platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

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

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.