Podsumowanie narzędzi deweloperskich, grudzień 2013

W ostatnim czasie wprowadziliśmy w narzędziach programistycznych Chrome kilka aktualizacji, zarówno małych, jak i dużych. Zaczniemy od aktualizacji panelu Element, a potem przejdziemy do konsoli, osi czasu i innych funkcji.

Skopiuj wyłączone reguły stylu jako komentarze

Kopiowanie całych reguł CSS w panelu Stylów będzie teraz obejmować style, które zostały wyłączone. Będą one dostępne na schowku jako skomentowane. [crbug.com/316532]

Kopiowanie jako ścieżka CSS

„Kopiuj jako ścieżka CSS” jest teraz dostępne jako element menu dla węzłów DOM w panelu Elementy (podobnie jak element menu Kopiuj XPath).

Skopiuj ścieżkę do pliku css.

Generowanie selektorów CSS nie musi być ograniczone do arkuszy stylów lub JavaScriptu. Może też być alternatywą dla strategii lokalizatorów w testach WebDriver. [crbug.com/277286]

Wyświetlanie stylów elementów Shadow DOM

Stylów elementów podrzędnych korzenia cienia można teraz sprawdzać. [crbug.com/279390]

Funkcja copy() w konsoli działa w przypadku obiektów

Metoda copy() z interfejsu Command Line API działa teraz w przypadku obiektów. Spróbuj skopiować copy({foo:'bar'}) do panelu konsoli. Zobacz, jak przekształcony w ciąg znaków obiekt w tej formie jest zapisywany w schowku. [crbug.com/289348]

Filtr wyrażeń regularnych w konsoli

Filtrowanie wiadomości konsoli za pomocą wyrażeń regularnych w panelu konsoli. crbug.com/318308]

Łatwe usuwanie detektorów zdarzeń

W panelu konsoli spróbuj użyć getEventListeners(document).mousewheel[0];, aby pobrać pierwszego odbiornika zdarzenia związanego z kółkiem myszy w dokumencie. W tym przypadku spróbuj użyć wyrażenia $_.remove(), aby usunąć tego odbiorcę zdarzeń ($_ = wartość ostatnio ocenionego wyrażenia). crbug.com/309524]

Usuwanie ostrzeżeń w CSS

Ostrzeżenia w stylu „Nieprawidłowa wartość właściwości CSS” zostały usunięte. Trwają prace nad ulepszoną implementacją, która będzie bardziej odporna na rzeczywiste problemy z CSS, w tym na hacki w przeglądarce. crbug.com/309982]

Operacje na osi czasu podsumowane w wykresie kołowym

Wykres operacji na osi czasu

Panel Osi czasu zawiera teraz wykres kołowy na panelu Szczegóły, który wizualnie pokazuje źródło kosztów renderowania. Dzięki temu możesz od razu zidentyfikować wąskie gardła.

Wiele informacji, które wcześniej wyświetlały się w wyskakujących okienkach, zostało teraz przeniesionych do osobnych paneli. Aby wyświetlić nagranie na osi czasu i wybrać kadr, zwróć uwagę na nowy panel Szczegóły, który zawiera wykres kołowy. W widoku Ramki znajdziesz 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 i odkodowania obrazu w panelu Czas trwania zawierają teraz link do węzła DOM w panelu Elementy.

Szczegóły zmiany rozmiaru obrazu

Link do adresu URL obrazu przenosi do odpowiedniego zasobu w panelu Zasoby. crbug.com/244159]

Ramki GPU

Ramki występujące na GPU są teraz wyświetlane u góry, nad ramkami w głównym wątku. crbug.com/305863]

Przerwanie w przypadku detektorów popstate

Zmienna „popstate” jest teraz dostępna jako punkt przerwania detektora zdarzeń na pasku bocznym panelu Źródła. [crbug.com/88112]

Ustawienia renderowania dostępne w szufladzie

Po otwarciu panelu wyświetla się kilka paneli, w tym panel Renderowanie, w którym można wyświetlać prostokąty malowania, licznik FPS itp. Jest on domyślnie włączony w sekcji Ustawienia > „Pokaż widok 'Renderowanie' w panelu konsoli”.

Kopiowanie obrazu jako identyfikatora URI danych

Kopiowanie obrazu jako identyfikatora URI danych

Zawartość zasobów graficznych w panelu Zasoby można teraz kopiować jako identyfikator URI danych (data:image/png;base64,iVBO...).

Aby to wypróbować, znajdź zasób obrazów w ramkach > [Zasób] > Obrazy i kliknij prawym przyciskiem myszy podgląd obrazu, aby otworzyć menu kontekstowe, a następnie wybierz „Kopiuj obraz jako adres URL danych”. crbug.com/321132]

Filtrowanie identyfikatora URI danych

Jeśli nigdy nie uważałeś, że URI danych powinny się tam znajdować, możesz je teraz odfiltrować na karcie Sieć. Kliknij ikonę filtra.

Ikona filtrowania
aby wyświetlić inne typy filtrów zasobów. crbug.com/313845]

Filtrowanie identyfikatora URI danych

Naprawiono błędy związane z synchronizacją sieci

Jeśli zauważysz,że pobieranie obrazu trwa 300 tysięcy lat, przepraszamy. ;) Nieprawidłowe czasy dla zasobów sieci zostały już poprawione. crbug.com/309570]

Zachowanie nagrywania w sieci zapewnia większą kontrolę

Sieć nagrywania działa nieco inaczej. Po pierwsze, przycisk nagrywania działa tak, jak można się spodziewać w przypadku osi czasu lub profilu procesora. Jeśli okaże się, że oczekujesz, że po ponownym załadowaniu strony, gdy otwarte są Narzędzia deweloperskie, automatycznie rozpocznie się nagrywanie sieci. Następnie zostanie wyłączona, więc jeśli chcesz rejestrować aktywność sieci po załadowaniu strony, włącz ją. Ułatwia to wizualizację kaskady bez zakłócania wyników przez żądania sieci o opóźnionym działaniu. crbug.com/325878]

Motywy DevTools są teraz dostępne w rozszerzeniach

Arkusze stylów użytkownika są teraz dostępne w ramach eksperymentów w Narzędziach deweloperskich (pole wyboru „Zezwalaj na niestandardowe motywy interfejsu”), co pozwala rozszerzeniu Chrome stosować niestandardowe style w Narzędziach deweloperskich. Przykładem jest temat DevTools. crbug.com/318566]

To wszystko w tej edycji biuletynu DevTools. Jeśli jeszcze tego nie zrobiłeś(-aś), zapoznaj się z edycją z listopada.