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

Witamy! Nowe funkcje i ważne zmiany w Narzędziach deweloperskich w Chrome 60:

• Nowy panel Audyt, w którym znajdziesz testy progresywnych aplikacji internetowych, wydajności, dostępności i sprawdzonych metod.
• Plakietki innych firm. Dowiedz się, które firmy zewnętrzne wysyłają żądania sieciowe, rejestrują dane w Konsoli i wykonywują kod JavaScript.
• Kliknij Kontynuuj tutaj. Nowy gest, który może przyspieszyć proces debugowania kodu JavaScript.
• Sprawdzanie kodu w czasie debugowania w przypadku asynchronicznego JavaScriptu.
• Podgląd obiektów w Konsoli.
• Aktualizacje na karcie Zasięg w czasie rzeczywistym.
• Nowe menu do wybierania kontekstów w Konsoli.
• Prostsze opcje ograniczania wykorzystania sieci.
• Asynchroniczne zrzuty stosu są domyślnie włączone.

Aby dowiedzieć się więcej, obejrzyj film z tymi informacjami poniżej lub przeczytaj je.

Nowe funkcje

Nowy panel audytów oparty na Lighthouse

Panel Audyt korzysta teraz z Lighthouse. Lighthouse udostępnia kompleksowy zestaw testów do pomiaru jakości stron internetowych.

Wyniki na górze strony w kategoriach progresywna aplikacja internetowa, wydajność, dostępność i sprawdzone metody to Twoje łączne wyniki w każdej z tych kategorii. Pozostała część raportu zawiera zestawienie wyników wszystkich testów, które stanowiły podstawę Twoich wyników. Popraw jakość strony internetowej, poprawiając wyniki testów, które nie przeszły.

Rysunek 1 raport Lighthouse;

Aby sprawdzić stronę:

1. Kliknij kartę Sprawdzanie.
2. Kliknij Przeprowadź audyt.
3. Kliknij Uruchom audyt. Lighthouse konfiguruje DevTools, aby emulować urządzenie mobilne, przeprowadza wiele testów na stronie, a potem wyświetla wyniki w panelu Sprawdzanie.

Lighthouse na konferencji Google I/O 2017

Aby dowiedzieć się więcej o integracji Lighthouse z Narzędziami dla deweloperów, obejrzyj poniższą prezentację z Google I/O 2017.

Współtworzenie Lighthouse

Lighthouse to projekt typu open source. Aby dowiedzieć się więcej o tym, jak działa Lighthouse, i jak możesz przyczynić się do jego rozwoju, obejrzyj poniższy wykład z Google I/O 2017.

Masz pomysł na audyt Lighthouse? Opublikuj je tutaj.

Odznaki innych firm

Dzięki plakietkom firm zewnętrznych możesz uzyskać więcej informacji o podmiocie, który wysyła żądania sieci w witrynie, rejestruje je w Konsoli i wykonuje kod JavaScript.

Rysunek 2. najechanie kursorem na plakietkę innej firmy w panelu Sieć,

Rysunek 3. Wskazywanie w Konsoli plakietki aplikacji innej firmy

Aby włączyć plakietki innych firm:

1. Otwórz Menu poleceń.
2. Uruchom polecenie Show third party badges.

Na kartach Drzewo połączeń i Od dołu możesz użyć opcji Grupuj według produktu, aby grupować aktywność rejestrującą aktywność według podmiotów zewnętrznych, które ją wywołały. Aby dowiedzieć się, jak analizować wydajność za pomocą Narzędzi deweloperskich, przeczytaj artykuł Pierwsze kroki w analizowaniu wydajności w czasie wykonywania.

Rysunek 4 Grupowanie według produktu na karcie Od dołu

Nowy gest „Przejdź tutaj”

Załóżmy, że wstrzymasz odtwarzanie na linii 25 skryptu i chcesz przejść do linii 50. Wcześniej można było ustawić punkt przerwania na linii 50 lub kliknąć prawym przyciskiem myszy linię i wybrać Kontynuuj do tego miejsca. Teraz jest szybszy gest do obsługi tego procesu.

Podczas przechodzenia przez kod przytrzymaj klawisz Command (Mac) lub Control (Windows, Linux), a następnie kliknij, aby przejść do tego wiersza kodu. Narzędzia dla programistów wyróżniają miejsca docelowe, do których można przejść, na niebiesko.

Rysunek 5. Kontynuuj tutaj

Zapoznaj się z artykułem Rozpoczęcie debugowania kodu JavaScript, aby poznać podstawy debugowania w Narzędziach deweloperskich.

Asynchroniczność

W najbliższej przyszłości zespół DevTools będzie się skupiał na tym, aby debugowanie kodu asynchronicznego było przewidywalne i aby zapewnić Ci pełną historię wykonania kodu asynchronicznego.

Nowy gest „Kontynuuj tutaj” działa również w przypadku kodu asynchronicznego. Gdy przytrzymasz klawisz Command (Mac) lub Control (Windows, Linux), Narzędzia dla programistów podświetlą zielonym kolorem miejsca docelowe asynchroniczne, do których można przejść.

Poniżej znajdziesz prezentację z konferencji I/O, która pokazuje, jak to zrobić.

Zmiany

Bardziej przydatne podglądy obiektów w Konsoli

Wcześniej po zarejestrowaniu lub ocenie obiektu w Konsoli wyświetlany był tylko komunikatObject, który nie był szczególnie pomocny. Konsola zawiera teraz więcej informacji o zawartości obiektu.

Rysunek 6. Jak Konsola używała podglądu obiektów

Rysunek 7. Jak Konsola wyświetla podgląd obiektów

Bardziej szczegółowe menu wyboru kontekstu w Konsoli

Menu wyboru kontekstu w Konsoli zawiera teraz więcej informacji o dostępnych kontekstach.

• Tytuł opisuje, czym jest dany element.
• Podtytuł pod tytułem opisuje domenę, z której pochodzi element.
• Najedź kursorem na kontekst iframe, aby go wyróżnić w widocznym obszarze.

Rysunek 8. Przesunięcie kursora nad iframe w nowym menu wyboru kontekstu powoduje jego wyróżnienie na widoku

Aktualizacje w czasie rzeczywistym na karcie Zasięg

Podczas rejestrowania pokrycia kodu w Chrome 59 na karcie Pokrycie wyświetlany był tylko komunikat „Rejestrowanie…”, bez informacji o tym, jaki kod był używany. Karta Pokrycie pokazuje teraz w czasie rzeczywistym, jaki kod jest używany.

Rysunek 9. Wczytywanie strony i interakcja z nią na starym karcie Pokrycie

Rysunek 10. Ładowanie strony i interakcja z nią za pomocą nowego karty Zakres

Prostsze opcje ograniczania przepustowości sieci

Menu ograniczania przepustowości sieci w panelach Sieć i Wydajność zostały uproszczone i zawierają tylko 3 opcje: Praca offline, Wolne 3G, które jest powszechne w miejscach takich jak Indie, oraz Szybkie 3G, które jest powszechne w miejscach takich jak Stany Zjednoczone.

Rysunek 11. Nowe opcje ograniczania wykorzystania sieci

Opcje ograniczania zostały dostosowane, aby pasowały do innych narzędzi do ograniczania na poziomie jądra. Narzędzia deweloperskie nie wyświetlają już obok każdej opcji danych o czasie oczekiwania, pobierania i przesyłania, ponieważ te wartości były wprowadzające w błąd. Celem jest dopasowanie do rzeczywistego działania każdej opcji.

Domyślnie włączone asynchroniczne zrzuty stosu

Z panelu Źródła usunięto pole wyboru Asynkroniczna. Asynchroniczne zrzuty stosu są teraz domyślnie włączone. W przeszłości ta opcja była opcjonalna ze względu na obciążenie związane z wydajnością. Koszty są teraz na tyle niskie, że można włączyć tę funkcję domyślnie. Jeśli wolisz wyłączyć asynchroniczne ścieżki stosu, możesz to zrobić w Ustawieniach lub uruchomiając polecenie Do not capture async stack traces w Menu poleceń.

Narzędzia deweloperskie na konferencji Google I/O '17

Poniżej znajdziesz wykład Paul Irisha, w którym opowiada o tym, nad czym pracował zespół DevTools w ostatnim roku, i o kluczowych tematach, którymi zajmie się w najbliższej przyszłości.

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

• Przesyłaj opinie 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.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.