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

Kayce Basques

W Narzędziach deweloperskich w Chrome 71 wprowadzamy nowe funkcje i duże zmiany:

• Najedź kursorem na wyrażenie na żywo, aby wyróżnić węzeł DOM
• Zapisywanie węzłów DOM jako zmiennych globalnych
• Informacje o inicjatorze i priorytecie są teraz dostępne w przypadku importowania i eksportowania HAR
• Otwieranie menu poleceń z menu głównego
• Punkty przerwania obrazu w obrazie
• (Wskazówka dodatkowa) Uruchom w Konsoli funkcję monitorEvents(), aby obserwować wywoływanie zdarzeń elementu

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

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

Gdy Live Expression przyjmuje wartość węzła DOM, najedź kursorem na wynik Aktywne wyrażenie, aby podświetlić ten węzeł w widocznym obszarze.

Rysunek 1 Najechanie kursorem na wynik aktywnego wyrażenia w celu wyróżnienia węzła w widocznym obszarze

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

Aby zapisać węzeł DOM jako zmienną globalną, uruchom w konsoli wyrażenie, które określa węzeł, kliknij wynik prawym przyciskiem myszy i wybierz Zapisz jako zmienną globalną.

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

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

Informacje o inicjatorze i priorytecie obecnie w importach i eksportach HAR

Jeśli chcesz zdiagnozować logi sieciowe wspólnie ze współpracownikami, możesz wyeksportować żądania sieciowe 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 deweloperskie uwzględniają teraz w pliku HAR informacje o inicjatorze i priorytetach. 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 żądań.

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.

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.

Rysunek 11. Kolumna Priorytet

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

Rysunek 12. Jak wyświetlić kolumnę Priorytet

Otwórz menu poleceń z menu głównego

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

Rysunek 13. Menu poleceń

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

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 pauzie detektora zdarzeń. Narzędzia deweloperskie zatrzymają się na pierwszym wierszu obsługi.

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

(Dodatkowa wskazówka) Uruchom monitorEvents() w konsoli, by zobaczyć, jak uruchamiają się zdarzenia elementu

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.

   

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

2. Przekaż węzeł jako pierwszy argument w funkcji 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.

   

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

Aby przestać rejestrować zdarzenia w Konsoli, zadzwoń pod numer 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.

Inne przydatne funkcje, które możesz wywoływać z konsoli, znajdziesz w artykule Informacje o wierszu poleceń.

Pobierz kanały podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych i pomagają w wykrywaniu problemów w witrynie przed użytkownikami.

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.

• Przesyłaj opinie i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz pod filmem Co nowego w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach ze wskazówkami dotyczącymi Narzędzi deweloperskich w YouTube.

Co nowego w Narzędziach deweloperskich

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