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

Kayce Basques

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

• 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 importowanych i eksportowanych plikach 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

Przeczytaj poniższe informacje lub obejrzyj filmową wersję tej strony:

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

Gdy wyrażenie na żywo zwróci węzeł DOM, najedź kursorem na wynik wyrażenia na żywo, aby podświetlić ten węzeł w obszarze wyświetlania.

Rysunek 1. Najedź kursorem na wynik Live Expression, aby wyróżnić węzeł w obszarze widoku.

Zapisywanie węzłów DOM jako zmiennych globalnych

Aby zapisać węzeł DOM jako zmienną globalną, uruchom w konsoli wyrażenie, które daje w wyniku węzeł, kliknij wynik prawym przyciskiem myszy, a następnie wybierz Store as global variable (Zapisz jako zmienną globalną).

Rysunek 2. Zapisywanie jako zmiennej globalnej 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 są teraz dostępne w importowanych i eksportowanych plikach HAR

Jeśli chcesz przeanalizować logi sieciowe 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ć, po prostu przeciągnij go i upuść.

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

Pole _initiator zawiera więcej informacji o tym, co spowodowało wysłanie żądania dotyczącego zasobu. Odpowiada to kolumnie Initiator w tabeli Requests (Żądania).

Rysunek 9. Kolumna inicjatora

Możesz też przytrzymać klawisz Shift i najechać kursorem na żądanie, aby wyświetlić jego 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ę. Odpowiada to kolumnie Priorytet w tabeli Żądania, 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. Wyświetlanie kolumny Priorytet

Otwieranie menu poleceń z menu głównego

Użyj menu poleceń, aby szybko uzyskać dostęp do paneli, kart i funkcji Narzędzi deweloperskich.

Rysunek 13. Menu poleceń

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

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

Punkty przerwania obrazu w obrazie

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

Zaznacz pola wyboru enterpictureinpicture, leavepictureinpicture i resize w panelu Punkty przerwania detektora zdarzeń, aby wstrzymywać działanie programu za każdym razem, gdy wystąpi jedno z tych zdarzeń obrazu w obrazie. Narzędzia deweloperskie zatrzymają się w pierwszym wierszu funkcji obsługi.

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

(Dodatkowa wskazówka) Uruchom funkcję monitorEvents() w konsoli, aby obserwować zdarzenia wywoływane przez element

Załóżmy, że chcesz dodać czerwoną ramkę wokół przycisku po jego zaznaczeniu i naciśnięciu klawiszy R, E, D, ale nie wiesz, do jakich zdarzeń dodać odbiorniki. Użyj monitorEvents(), aby rejestrować wszystkie zdarzenia elementu w konsoli.

1. Pobierz odwołanie do węzła.

   

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

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

   

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

3. Wejdź 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;

Wywołaj unmonitorEvents(), aby zatrzymać logowanie zdarzeń w konsoli.

unmonitorEvents(temp1);

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

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

Typ mouse informuje Narzędzia deweloperskie, że mają rejestrować wszystkie zdarzenia związane z myszą, takie jak mousedown i click. Inne obsługiwane typy to key, touch i control.

Więcej przydatnych funkcji, które możesz wywołać z konsoli, znajdziesz w dokumentacji wiersza poleceń.

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię 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 w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.