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

Jecelyn Yeen

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.

Odtwarzanie krok po kroku w Dyktafonie

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.

Obsługa zdarzenia najechania kursorem myszy w Dyktafonie

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.

LCP w panelu Statystyki skuteczności

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.

FOUT w panelu Statystyki wydajności

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 w panelu Aplikacja > Plik 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.

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

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

Plakietka Górna warstwa w panelu Elementy

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.

ALT_TEXT_HERE

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

edytowanie na żywo podczas debugowania

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

@scope w regułach w panelu Style

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 czy średniki).
  • Narzędzia deweloperskie rozpoznają teraz nazwy map źródłowych konstruktorów za pomocą wywołania super. ALT_TEXT_HERE
  • Naprawiono 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ń prawidłowo parę klucz-wartość pamięci lokalnej z tabeli w panelu Aplikacja > Pamięć lokalna, gdy jest usunięta. (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)
  • Jeśli Narzędzia deweloperskie odkryją skrypt, który spowodował oznaczenie ramki jako reklamy, w przypadku ramek reklam będzie dostępny nowy link Skrypt reklamy twórcy. Aby otworzyć ramkę, kliknij 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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 82 został anulowany.

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