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

Jecelyn Yeen

Ponowne odtwarzanie krok po kroku w Dyktafonie

Teraz w panelu Dyktafon możesz ustawić punkt przerwania i powtórzyć każdy krok użytkownika krok po kroku.

Aby ustawić punkt przerwania, kliknij niebieską kropkę obok kroku. Powtórz czynności użytkownika, kolejne odtwarzanie zostanie wstrzymane przed wykonaniem danego kroku. W tym miejscu możesz kontynuować ponowne odtwarzanie, wykonać dany krok lub anulować odtwarzanie.

Dzięki tej funkcji możesz z łatwością wizualizować i debugować przepływ użytkowników.

Więcej informacji znajdziesz w artykule z informacjami o funkcjach Dyktafonu.

Ponowne odtwarzanie krok po kroku w Dyktafonie

Problem z Chromium: 1257499

Obsługa zdarzenia najechania kursorem myszy w panelu Dyktafonu

Dyktafon pozwala teraz ręcznie dodawać do nagrania krok po najechaniu kursorem myszy.

Ta prezentacja przedstawia wyskakujące menu, które pojawia się po najechaniu kursorem. Spróbuj zarejestrować przepływ użytkowników i kliknąć pozycję w menu.

Ponowne odtwarzanie ścieżki użytkownika spowoduje błąd, ponieważ Dyktafon nie przechwytuje automatycznie zdarzeń po najechaniu kursorem myszy. Aby rozwiązać ten problem, dodaj krok ręcznie, aby najechać kursorem na selektor, zanim klikniesz pozycję menu.

Obsługa zdarzenia najechania kursorem myszy w Dyktafonie

Problem z Chromium: 1257499

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

LCP to ważny wskaźnik związany z użytkownikami, który służy 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 wyników 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, i wyświetlić ścieżkę krytyczną zasobu LCP.

Zapoznaj się ze statystykami skuteczności, aby dowiedzieć się, jak za pomocą panelu uzyskać przydatne statystyki i zwiększyć wydajność witryny.

LCP w panelu Statystyki skuteczności

Problem z Chromium: 1326481

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

Panel Statystyki skuteczności wykrywa teraz przebłysk niewidocznego tekstu (FOIT) i przebłysk niespójnego tekstu (FOUT) jako potencjalne przyczyny przesunięcia układu.

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

Przeczytaj artykuł Optymalizowanie wczytywania i renderowania czcionki WebFont, aby poznać technikę zapobiegania przesunięć układu.

FOUT w panelu Statystyki skuteczności

Problemy z Chromium: 1334628, 1328873

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

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

Rejestracja modułów obsługi protokołu URL umożliwia zainstalowanym aplikacjom PWA obsługę linków korzystających z określonego protokołu (np. magnet, web+example), co zapewnia bardziej zintegrowaną obsługę.

W panelu Aplikacja > Plik manifestu przejdź do sekcji Moduły obsługi protokołów. Tutaj możesz wyświetlić i przetestować wszystkie dostępne protokoły.

Zainstaluj na przykład tę demonstracyjną PWA. W sekcji Protocol Handlers (Obsługa protokołów) wpisz „americano” i kliknij Test Protocol, aby otworzyć stronę kawy w PWA.

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

Problemy z Chromium: 1300613

Plakietka górnej warstwy w panelu Elementy

Plakietka górnej warstwy pozwala zrozumieć koncepcję górnej warstwy i zobaczyć, jak zmienia się jej zawartość.

Element <dialog> stał się ostatnio stabilny w różnych przeglądarkach. Gdy otworzysz okno, zostanie ono umieszczone w górnej warstwie. Treść najwyższego poziomu jest renderowana nad wszystkimi innymi treściami.

W tej prezentacji kliknij Otwórz okno.

Aby ułatwić wizualizację elementów górnej warstwy, Narzędzia deweloperskie dodają do drzewa DOM kontener górnej warstwy (#top-layer). Znajduje się po zamykającym tagu </html>.

Aby przejść z elementu kontenera górnej warstwy do elementu drzewa górnej 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.

Plakietka górnej warstwy w panelu Elementy

Problem z Chromium: 1313690

Dołącz informacje o debugowaniu Wasm w czasie działania

Możesz teraz dołączać informacje o debugowaniu Wasm o wartości DWARF w czasie działania. Wcześniej panel Źródła obsługiwał tylko dołączanie map źródeł do plików JavaScript i Wasm.

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

ALT_TEXT_HERE

Problem z Chromium: 1341255

Obsługa edycji na żywo podczas debugowania

Możesz teraz edytować znajdującą się na pierwszym miejscu funkcję w stosie bez ponownego uruchamiania debugera.

W Chrome 104 Narzędzia deweloperskie przywracają funkcję uruchomienia ramki ponownie. Nie możesz jednak edytować funkcji, w której jesteś obecnie wstrzymany. Deweloperzy często zakłócają działanie funkcji, a potem ją edytują po wstrzymaniu.

Po tej aktualizacji debuger automatycznie ponownie uruchomi funkcję z następującymi ograniczeniami:

  • Po wstrzymaniu można edytować tylko funkcję znajdującą się najwyżej
  • Brak wywołania rekurencyjnego na tej samej funkcji znajdującej się niżej w obrębie stosu

edytowanie na żywo podczas debugowania

Problem z Chromium: 1334484

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

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

Element @scope w regułach jest częścią specyfikacji kaskady CSS i dziedziczenia poziomu 6. Umożliwiają one programistom określanie zakresu reguł stylów w CSS.

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

@scope w regułach w panelu Style

Problem z 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 rozpoznają teraz identyfikatory map źródłowych przy użyciu znaków interpunkcyjnych. Niektóre nowoczesne minifikatory (np. esbuild) tworzą mapy źródeł, które scalają identyfikatory z kolejnymi znakami interpunkcyjnymi (przecinek, nawias, średnik).
  • Narzędzia deweloperskie rozpoznają teraz nazwy map źródłowych dla konstruktorów z wywołaniem super. ALT_TEXT_HERE
  • Naprawiono indeksowanie adresów URL mapy źródłowej 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

Inne ważne informacje

Oto kilka ważnych poprawek wprowadzonych w tej wersji:

  • Po usunięciu pary klucz-wartość pamięci lokalnej usuń ją z tabeli w panelu Aplikacja > Pamięć lokalna. (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 błędne. (1340062).
  • Regularnie wyświetlaj elementy CSS Flex i siatka w panelu Układ oraz wyświetlaj je jako plakietki w panelu Elementy. Wcześniej w obu miejscach nie było elementów Flex i siatki. (1340441, 1273992)
  • W przypadku ramek reklam jest dostępny nowy link Skrypt reklamy twórcy, jeśli Narzędzia deweloperskie znalazły skrypt, który spowodował jej oznaczenie jako reklamy. Ramkę możesz otworzyć, klikając Aplikacja > Ramki. (1217041).

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