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 aktywne wyrażenie, aby wyróżnić węzeł DOM
• Przechowywanie węzłów DOM jako zmiennych globalnych
• Inicjator i informacje o priorytetach są teraz dostępne w importach i eksportach HAR
• Otwieranie menu poleceń z menu głównego
• Punkty przerwania obrazu w obrazie
• (Dodatkowa wskazówka) Uruchom funkcję monitorEvents() w konsoli, aby obserwować uruchamianie zdarzeń związanych z elementem.

Czytaj lub obejrzyj wersję wideo tej strony:

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

Gdy wyrażenie na żywo przyjmuje wartość węzła DOM, najedź kursorem na wynik wyrażenia Live Expression 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

Przechowuj węzły DOM jako zmienne globalne

Aby zapisać węzeł DOM jako zmienną globalną, uruchom w konsoli wyrażenie zwracające wartość węzła: kliknij wynik prawym przyciskiem myszy i wybierz Przechowuj jako zmienną globalną.

Rysunek 2. Zapisz jako zmienną globalną w konsoli

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

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

Informacje o inicjatorze i priorytecie obecnie w importach i eksportach HAR

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

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

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

Gdy eksportujesz plik HAR, Narzędzia deweloperskie zawierają teraz informacje o inicjatorze i priorytetu w pliku HAR . Gdy zaimportujesz pliki HAR z powrotem do Narzędzi deweloperskich, kolumny Inicjator i Priorytet zostaną uzupełnione.

Pole _initiator zawiera więcej informacji na temat tego, co spowodowało żądanie zasobu. Ten odpowiada kolumnie Inicjator w tabeli Żądania.

Rysunek 9. Kolumna Inicjator

Możesz też przytrzymać Shift i najechać kursorem na prośbę, aby zobaczyć jej inicjator zależności.

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

Pole _priority określa priorytet przypisany przez przeglądarkę do zasobu. Odwzorowuje to na Priorytet w tabeli Żądania, która jest domyślnie ukryta.

Rysunek 11. Kolumna Priorytet

Kliknij prawym przyciskiem myszy nagłówek tabeli żądań i wybierz Priorytet, aby wyświetlić Priorytet. .

Rysunek 12. Jak wyświetlić kolumnę Priority (Priorytet)

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

Skorzystaj z menu poleceń, aby uzyskać szybki dostęp do paneli, kart i funkcji Narzędzi deweloperskich.

Rysunek 13. Menu polecenia

Menu poleceń można teraz otwierać z menu głównego. Kliknij 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 utworzenie pływającego filmu na stronie. nad pulpitem.

Zaznacz pola wyboru enterpictureinpicture, leavepictureinpicture i resize w wydarzeniu Panel punktów przerwania detektora, aby wstrzymywać działanie po uruchomieniu jednego z tych zdarzeń obrazu w obrazie. Narzędzia deweloperskie zatrzymują się na pierwszym wierszu modułu obsługi.

Rysunek 16. Zdarzenia „obraz 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ć czerwone obramowanie wokół przycisku po jego zaznaczeniu i naciśnięciu R, E, D, ale nie wiesz, do których zdarzeń dodać detektory. Użyj monitorEvents(), aby zapisać wszystkie zdarzeń z elementu do Konsoli.

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

   

   Rysunek 17. użycie opcji Zapisz jako zmienną globalną w celu uzyskania odniesienia do węzła;

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

   

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

3. Wykonaj 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 przestać rejestrować zdarzenia w konsoli.

unmonitorEvents(temp1);

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

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

Typ mouse informuje Narzędzia deweloperskie, aby rejestrować wszystkie zdarzenia związane z myszą, np. 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

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   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o 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.