Wiele zaktualizowanych funkcji jest ostatnio dostępnych w Narzędziach deweloperskich w Chrome. Zaczniemy od aktualizacji panelu Element, a potem omówimy konsolę, oś czasu i inne funkcje.
Wyłączone kopiowanie reguł stylu z dodanymi komentarzami
Kopiowanie całych reguł CSS w panelu Style będzie teraz uwzględniać wyłączone style. Będą one istnieć w schowku z komentarzem. [crbug.com/316532].
Kopiuj jako ścieżkę CSS
Opcja „Kopiuj jako ścieżkę CSS” jest teraz dostępna jako pozycja menu dla węzłów DOM w panelu Elementy (podobnie jak w przypadku elementu menu Kopiuj XPath).
Generowanie selektorów CSS nie musi ograniczać się do arkuszy stylów lub JavaScriptu. Mogą one też stanowić alternatywne dla strategii lokalizatora w testach funkcji WebDriver. [crbug.com/277286]
Wyświetl style elementów DOM Shadow
Można teraz badać style elementów podrzędnych cienia głównego. [crbug.com/279390]
Funkcja copy() w konsoli działa w przypadku obiektów
Metoda copy() z interfejsu API wiersza poleceń działa teraz w przypadku obiektów. Wypróbuj copy({foo:'bar'}) w panelu konsoli i zwróć uwagę na to, że w schowku znajduje się teraz sformatowana i sformatowana wersja obiektu. [crbug.com/289348]
Filtr wyrażeń regularnych w konsoli
Filtruj wiadomości w konsoli, używając wyrażeń regularnych w panelu konsoli. crbug.com/318308]
Łatwe usuwanie detektorów zdarzeń
Spróbuj użyć polecenia getEventListeners(document).mousewheel[0]; w panelu konsoli, aby pobrać pierwszy detektor zdarzeń kółka myszy w dokumencie. Kontynuując, spróbuj użyć funkcji $_.remove(); aby usunąć detektor zdarzeń ($_ = wartość ostatnio ocenionego wyrażenia). crbug.com/309524]
Usuwanie ostrzeżeń CSS
Ostrzeżenia w stylu „Nieprawidłowa wartość właściwości CSS” zostały usunięte. Nieustannie pracujemy nad zwiększeniem odporności implementacji interfejsu CSS na rzeczywiste działania, w tym ataki hakerów na przeglądarki. crbug.com/309982]
Operacje na osi czasu podsumowane na wykresie kołowym
W panelu Oś czasu znajduje się teraz wykres kołowy, który wizualnie przedstawia źródła kosztów renderowania, dzięki czemu możesz szybko zidentyfikować wąskie gardła.
Jak widać, wiele informacji, które były wcześniej wyświetlane w wyskakujących okienkach, zostało przeniesione do osobnego panelu. Aby go wyświetlić, rozpocznij nagrywanie na osi czasu i wybierz klatkę, zwróć uwagę na nowy panel Szczegóły zawierający wykres kołowy. W widoku Klatki widoczne są interesujące statystyki, takie jak średnia liczba klatek na sekundę (1000ms/frame duration) dla wybranych klatek. [crbug.com/247786]
Szczegóły zdarzenia zmiany rozmiaru obrazu
Zdarzenia zmiany rozmiaru obrazu i dekodowania obrazów w panelu Oś czasu zawierają teraz link do węzła DOM w panelu Elementy.
Kliknięcie linku URL obrazu powoduje przejście do odpowiedniego zasobu w panelu Zasoby. crbug.com/244159]
Ramki GPU
Klatki występujące w GPU są teraz wyświetlane u góry, nad klatkami w wątku głównym. crbug.com/305863]
Przerwij na detektory popstate
Element „popstate” jest teraz dostępny jako punkt przerwania odbiornika na pasku bocznym panelu Źródła. [crbug.com/88112]
Ustawienia renderowania dostępne w panelu
Po otwarciu szuflady wyświetla się teraz kilka paneli. Jeden z nich to panel renderowania. Możesz go używać do wyświetlania prostokątów renderowania, wskaźnika FPS itp. Jest to domyślnie włączone, wybierając Ustawienia > „Pokaż widok renderowania w panelu konsoli”.
Skopiuj obraz jako adres URL danych
Zawartość zasobów z obrazami w panelu Zasoby może być teraz kopiowana jako identyfikator URI danych (data:image/png;base64,iVBO...).
Aby wypróbować tę funkcję, znajdź zasób graficzny w Ramkach > [Zasób] > Obrazy i kliknij prawym przyciskiem myszy podgląd obrazu, aby otworzyć menu kontekstowe, a następnie wybierz „Skopiuj obraz jako adres URL danych”. crbug.com/321132]
Filtrowanie URI danych
Identyfikatory URI danych możesz teraz filtrować z karty Sieć. Kliknij ikonę filtra.
Poprawiono błędy w Czasie sieci
Jeśli uważasz,że pobieranie Twojego zdjęcia trwa 300 000 lat, przepraszamy. ;) Nieprawidłowe czasy zasobów sieciowych zostały już poprawione. crbug.com/309570]
Większa kontrola nad działaniem nagrywania sieciowego
Sieć nagrywająca działa trochę inaczej. Po pierwsze, przycisk nagrywania działa w taki sam sposób jak oś czasu czy profil procesora. Jak można się spodziewać – jeśli ponownie załadujesz stronę, gdy Narzędzia deweloperskie będą otwarte, nagrywanie sieciowe rozpocznie się automatycznie. Moduł zostanie potem wyłączony, więc jeśli po wczytaniu strony chcesz przechwytywać aktywność sieciową, musisz ją włączyć. Ułatwia to wizualizację kaskady bez spóźnionych żądań sieciowych zniekształcających wyniki. crbug.com/325878]
Motywy Narzędzi deweloperskich są teraz dostępne w ramach rozszerzeń
Arkusze stylów użytkownika są teraz dostępne w narzędziu Eksperymenty w Narzędziach deweloperskich (pole wyboru „Zezwalaj na niestandardowe motywy interfejsu”), które pozwala rozszerzeniu Chrome na stosowanie niestandardowych stylów do Narzędzi deweloperskich. Przykład znajdziesz na stronie Przykładowe rozszerzenie motywu DevTools. crbug.com/318566]
To już wszystkie podsumowanie tego podsumowania z Narzędzi dla deweloperów. Jeśli jeszcze nie znasz jeszcze tego narzędzia, zajrzyj do podsumowania w listopadzie.