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

Kayce Basques

Nowe funkcje i ważne zmiany w Narzędziach deweloperskich w Chrome 71:

Czytaj dalej lub obejrzyj wersję tej strony w formie filmu:

Najedź kursorem na wyrażenie na żywo, aby wyróżnić węzeł DOM

Gdy wyrażenie na żywo zwraca węzeł DOM, najedź kursorem na wynik wyrażenia na żywo, aby wyróżnić ten węzeł w widoku.

Najechanie kursorem na wynik wyrażenia na żywo, aby wyróżnić węzeł w obszarze widoku.

Rysunek 1 Najechanie kursorem na wynik wyrażenia na żywo, aby wyróżnić węzeł w obszarze widoku

przechowywać węzły DOM jako zmienne globalne.

Aby zapisać węzeł DOM jako zmienną globalną, uruchom w Konsoli wyrażenie, które zwraca węzeł, a potem kliknij wynik prawym przyciskiem myszy i wybierz Zapisz jako zmienną globalną.

Zapisz ją jako zmienną globalną w Konsoli.

Rysunek 2. Zapisz jako zmienną globalną w Konsoli

Możesz też kliknąć węzeł prawym przyciskiem myszy w drzewie DOM i wybrać Zapisz jako zmienną globalną.

Zapisz jako zmienną globalną w drzewie DOM.

Rysunek 3. Zapisz jako zmienną globalną w drzewie DOM

Informacje o inicjatorze i priorytecie są teraz dostępne w przypadku importowania i eksportowania plików HAR

Jeśli chcesz zdiagnozować logi sieciowe wspólnie ze współpracownikami, możesz wyeksportować żądania sieciowe do pliku HAR.

Eksportowanie żądań sieciowych do pliku HAR.

Rysunek 8. Eksportowanie żądań sieciowych do pliku HAR

Aby zaimportować plik z powrotem do panelu Sieć, przeciągnij go i upuść.

Podczas eksportowania pliku HAR narzędzia DevTools uwzględniają teraz w tym pliku informacje o inicjatorze i priorytecie. Gdy zaimportujesz pliki HAR z powrotem do Narzędzi deweloperskich, kolumny Initiator (Inicjator) i Priority (Priorytet) zostaną wypełnione.

Pole _initiator zawiera więcej informacji o tym, co spowodowało wysłanie żądania zasobu. Ta kolumna odpowiada kolumnie Initiator (Inicjator) w tabeli Żądania.

Kolumna „Initiator” (Inicjator).

Rysunek 9. Kolumna Inicjator

Możesz też przytrzymać klawisz Shift i najechać kursorem na prośbę, aby wyświetlić jej inicjatora i zależności.

Wyświetlanie inicjatorów i zależności.

Rysunek 10. Wyświetlanie inicjatorów i zależności

Pole _priority określa poziom priorytetu przypisany do zasobu przez przeglądarkę. Jest ona mapowana na kolumnę Priorytet w tabeli Prośby, która jest domyślnie ukryta.

Kolumna Priorytet.

Rysunek 11. Kolumna Priorytet

Kliknij prawym przyciskiem myszy nagłówek tabeli Żądania i wybierz Priorytet, aby wyświetlić kolumnę Priorytet.

Jak wyświetlić kolumnę Priorytet.

Rysunek 12. Jak wyświetlić kolumnę Priorytet

Otwieranie menu poleceń z menu głównego

Aby szybko uzyskać dostęp do paneli, kart i funkcji w Narzędziach deweloperskich, użyj menu poleceń.

Menu poleceń.

Rysunek 13. Menu poleceń

Teraz możesz otworzyć menu poleceń z menu głównego. Kliknij kolejno przycisk Menu główne główny i Uruchom polecenie.

Otwieranie menu poleceń z menu głównego.

Rysunek 14. Otwieranie menu poleceń z menu głównego

Punkty przerwania obrazu w obrazie

Tryb obrazu w obrazie to nowy eksperymentalny interfejs API, który umożliwia stronie tworzenie pływającego okna wideo na komputerze.

Aby wstrzymywać odtwarzanie, gdy zostanie wywołane jedno z tych zdarzeń obrazu w obrazie, zaznacz pola wyboru enterpictureinpicture, leavepictureinpicture i resize w pliku Listener Breakpoints (Detektor zdarzeń – punkty przerwania). Narzędzia deweloperskie zatrzymają się na pierwszym wierszu obsługi.

Zdarzenia dotyczące obrazu w obrazie w panelu Punkty przerwania detektora zdarzeń.

Rysunek 16. Zdarzenia dotyczące obrazu w obrazie w panelu Punkty przerwania detektora zdarzeń

(Bonusowy wskazówek) Aby obserwować wywoływanie zdarzeń elementu, uruchom w konsoli funkcję monitorEvents().

Załóżmy, że chcesz dodać czerwoną obwódkę wokół przycisku po jego wyśrodkowaniu i naciśnięciu R, E, D, ale nie wiesz, do jakich zdarzeń dodać te słuchacze. Użyj elementu monitorEvents(), aby rejestrować w Konsoli wszystkie zdarzenia związane z tym elementem.

  1. Pobranie odniesienia do węzła.

    Użyj opcji „Zapisz jako zmienną globalną”, aby uzyskać odwołanie do węzła.

    Rysunek 17. Użycie polecenia Zapisz jako zmienną globalną, aby uzyskać odwołanie do węzła

  2. Przekaż węzeł jako pierwszy argument funkcji monitorEvents().

    Przekazywanie węzła do monitorEvents().

    Rysunek 18. Przekazywanie węzła do monitorEvents()

  3. Wchodzenie w interakcję z węzłem. Narzędzia deweloperskie rejestrują wszystkie zdarzenia węzła w konsoli.

    zdarzenia węzła w Konsoli;

    Rysunek 19. zdarzenia węzła w Konsoli;

Aby przestać rejestrować zdarzenia w Konsoli, wyślij wywołanie unmonitorEvents().

unmonitorEvents(temp1);

Jeśli chcesz monitorować tylko niektóre zdarzenia lub typy zdarzeń, jako drugi argument funkcji monitorEvents() prześlij tablicę:

monitorEvents(temp1, ['mouse', 'focus']);

Typ mouse informuje Narzędzia deweloperskie, aby rejestrowały wszystkie zdarzenia związane z myszką, takie jak mousedown i click. Inne obsługiwane typy to key, touch i control.

Aby poznać inne przydatne funkcje, które możesz wywołać w Konsoli, zapoznaj się z przewodnikiem po wierszu poleceń.

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.