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

Kayce Basques

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

Czytaj lub obejrzyj wersję wideo tej strony:

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

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

Najechanie kursorem na wynik aktywnego wyrażenia, aby wyróżnić 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, które określa węzeł, kliknij wynik prawym przyciskiem myszy i wybierz Zapisz jako zmienną globalną.

Zapisz jako zmienną globalną w konsoli.

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

Przechowuj jako zmienną globalną w drzewie DOM.

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 pliku HAR.

Eksportuję żą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ść.

Gdy eksportujesz plik HAR, Narzędzia deweloperskie zawierają teraz w pliku HAR informacje o inicjatorze i priorytetze. Gdy zaimportujesz pliki HAR z powrotem do Narzędzi deweloperskich, kolumny Inicjator i Priorytet będą teraz wypełniane.

Pole _initiator zawiera więcej informacji na temat tego, co spowodowało żądanie zasobu. Jest to zmapowane na kolumnę Inicjator w tabeli Żądania.

Kolumna Inicjator.

Rysunek 9. Kolumna Inicjator

Możesz też przytrzymać Shift i najechać kursorem na żądanie, aby wyświetlić jego inicjator 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 priorytet przypisany przez przeglądarkę do zasobu. Odpowiada to kolumnie Priorytet w tabeli Żądania, 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ę 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.

Menu poleceń.

Rysunek 13. Menu polecenia

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

Otwieranie menu poleceń z menu głównego.

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 tworzenie pływającego okna wideo nad pulpitem.

Zaznacz pola enterpictureinpicture, leavepictureinpicture i resize w panelu Punkty przerwania detektora zdarzeń, aby wstrzymać odtwarzanie po uruchomieniu któregoś z tych zdarzeń obrazu w obrazie. Narzędzia deweloperskie zatrzymują się na pierwszym wierszu modułu obsługi.

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

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 i D, ale nie wiesz, do jakich zdarzeń dodać detektory. Użyj metody monitorEvents(), aby rejestrować w konsoli wszystkie zdarzenia z tego elementu.

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

    użycie opcji „Przechowuj jako zmienną globalną”, aby uzyskać odniesienie 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().

    Przekazuję węzeł do metody 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.

    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);

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

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