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

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

• Nowy panel Audyty, który zawiera testy progresywnych aplikacji internetowych, wydajności, dostępności i sprawdzonych metod.
• Odznaki innych firm Sprawdź, które firmy zewnętrzne wysyłają żądania sieciowe, rejestrują informacje w konsoli i wykonują JavaScript.
• Kontynuuj do tego miejsca. Nowy gest, który może przyspieszyć debugowanie JavaScriptu.
• Przewidywalne debugowanie asynchronicznego kodu JavaScript.
• Podgląd obiektów w konsoli
• Aktualizacje w czasie rzeczywistym na karcie Stan indeksowania
• Nowe menu do wybierania kontekstów w Konsoli.
• Prostsze opcje ograniczania wykorzystania sieci.
• Asynchroniczne zrzuty stosu są domyślnie włączone.

Obejrzyj poniżej wersję wideo tych informacji o wersji lub czytaj dalej, aby dowiedzieć się więcej.

Nowe funkcje

Nowy panel Audyty oparty na Lighthouse

Panel Audyty jest teraz oparty na Lighthouse. Lighthouse udostępnia kompleksowy zestaw testów do pomiaru jakości stron internetowych.

Wyniki u góry w sekcjach Progresywna aplikacja internetowa, Wydajność, Dostępność i Sprawdzone metody to łączne wyniki w poszczególnych kategoriach. Pozostała część raportu to zestawienie poszczególnych testów, które wpłynęły na Twoje wyniki. Popraw jakość strony internetowej, rozwiązując problemy wykryte w testach.

Rysunek 1. Raport Lighthouse

Aby przeprowadzić audyt strony:

1. Kliknij kartę Audyty.
2. Kliknij Przeprowadź audyt.
3. Kliknij Uruchom audyt. Lighthouse konfiguruje Narzędzia deweloperskie tak, aby emulowały urządzenie mobilne, przeprowadza na stronie szereg testów, a następnie wyświetla wyniki w panelu Audyty.

Lighthouse na konferencji Google I/O 2017

Aby dowiedzieć się więcej o integracji Lighthouse z Narzędziami deweloperskimi, obejrzyj poniższy film z Google I/O 2017.

Współtworzenie Lighthouse

Lighthouse to projekt open source. Więcej informacji o tym, jak działa to narzędzie i jak możesz w nim uczestniczyć, znajdziesz w prezentacji Lighthouse z Google I/O 2017 poniżej.

Masz pomysł na test Lighthouse? Opublikuj go tutaj!

Odznaki innych firm

Używaj plakietek innych firm, aby uzyskać więcej informacji o podmiotach, które wysyłają żądania sieciowe na stronie, rejestrują dane w konsoli i wykonują JavaScript.

Rysunek 2. Najechanie kursorem na plakietkę podmiotu zewnętrznego w panelu Sieć

Rysunek 3. Najechanie kursorem na plakietkę firmy zewnętrznej w konsoli

Aby włączyć plakietki innych firm:

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

Na kartach Drzewo wywołań i Od dołu użyj opcji Grupuj według produktu, aby pogrupować aktywność rejestrowania wydajności według podmiotów zewnętrznych, które ją spowodowały. Więcej informacji o analizowaniu wydajności za pomocą Narzędzi deweloperskich znajdziesz w artykule Pierwsze kroki z analizowaniem wydajności w czasie działania.

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

Nowy gest do funkcji Kontynuuj tutaj

Załóżmy, że jesteś w 25 wierszu skryptu i chcesz przejść do wiersza 50. Wcześniej można było ustawić punkt przerwania w wierszu 50 lub kliknąć wiersz prawym przyciskiem myszy i wybrać Continue to here (Kontynuuj tutaj). Teraz jednak jest szybszy gest, który umożliwia wykonanie tej czynności.

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

Rysunek 5. Kontynuuj do tego miejsca

Podstawowe informacje o debugowaniu w Narzędziach deweloperskich znajdziesz w artykule Rozpoczynanie debugowania JavaScriptu.

Wprowadzenie do asynchroniczności

W najbliższej przyszłości zespół Narzędzi deweloperskich skupi się na tym, aby debugowanie kodu asynchronicznego było bardziej przewidywalne i aby zapewnić Ci pełną historię wykonywania asynchronicznego.

Nowy gest „Kontynuuj tutaj” działa też w przypadku kodu asynchronicznego. Gdy przytrzymasz klawisz Command (Mac) lub Control (Windows, Linux), Narzędzia dla programistów wyróżnią na zielono miejsca docelowe asynchronicznego przeskoku.

Przykład znajdziesz w prezentacji DevTools na konferencji I/O.

Zmiany

Bardziej informacyjne podglądy obiektów w konsoli

Wcześniej, gdy rejestrowano lub oceniano obiekt w konsoli, wyświetlała ona tylko Object, co nie było zbyt pomocne. Konsola udostępnia teraz więcej informacji o zawartości obiektu.

Rysunek 6. Jak Konsola wyświetlała podgląd obiektów

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

Bardziej informacyjne menu wyboru kontekstu w konsoli

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

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

Rysunek 8. Najedź kursorem na element iframe w nowym menu wyboru kontekstu, aby wyróżnić go w obszarze wyświetlania.

Aktualizacje w czasie rzeczywistym na karcie Zasięg

Podczas rejestrowania pokrycia kodu w Chrome 59 na karcie Pokrycie wyświetlał się tylko komunikat „Rejestrowanie…”, bez informacji o tym, jaki kod jest używany. Teraz na karcie Pokrycie możesz w czasie rzeczywistym sprawdzać, jakiego kodu używasz.

Rysunek 9. Wczytywanie strony i wchodzenie z nią w interakcję na starej karcie Indeksowanie

Rysunek 10. Wczytywanie strony i interakcja z nią za pomocą nowej karty Coverage

Prostsze opcje ograniczania wykorzystania sieci

Menu ograniczania przepustowości sieci w panelach Sieć i Wydajność zostały uproszczone i zawierają tylko 3 opcje: Offline, Wolne 3G (często spotykane np. w Indiach) i Szybkie 3G (często spotykane np. w Stanach Zjednoczonych).

Rysunek 11. Nowe opcje ograniczania wykorzystania sieci

Opcje ograniczania zostały dostosowane 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, pobieraniu i przesyłaniu, ponieważ te wartości wprowadzały w błąd. Celem jest odzwierciedlenie rzeczywistych możliwości każdej opcji.

Asynchroniczne zrzuty stosu domyślnie włączone

Z panelu Źródła usunięto pole wyboru Asynchroniczne. Asynchroniczne zrzuty stosu są teraz domyślnie włączone. W przeszłości ta opcja była opcjonalna ze względu na obciążenie wydajności. Obciążenie jest teraz wystarczająco małe, aby domyślnie włączyć tę funkcję. Jeśli wolisz wyłączyć asynchroniczne ślady stosu, możesz to zrobić w Ustawieniach lub uruchamiając polecenie Do not capture async stack traces w menu poleceń.

Narzędzia deweloperskie na konferencji Google I/O 2017

Obejrzyj poniżej wystąpienie legendarnego Paula Irisha, aby dowiedzieć się więcej o tym, nad czym zespół Narzędzi deweloperskich pracował w ostatnim roku, oraz o najważniejszych tematach, którymi zajmie się w najbliższej przyszłości.

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię 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.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.