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

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

• Nowy panel Audyty, który zawiera testy progresywnych aplikacji internetowych, wydajności, ułatwień dostępu i sprawdzonych metod.
• Odznaki innych firm Sprawdź, które firmy zewnętrzne wysyłają żądania sieciowe, rejestrują dane w konsoli i wykonują JavaScript.
• Kontynuuj do tego miejsca. Nowy gest, który może przyspieszyć debugowanie kodu JavaScript.
• 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, Skuteczność, Ułatwienia dostępu 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 w nim uczestniczyć, znajdziesz w prezentacji Lighthouse z konferencji Google I/O 2017 poniżej.

Masz pomysł na test Lighthouse? Opublikuj go tutaj!

Odznaki innych firm

Używaj plakiet 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ę firmy zewnętrznej 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.

Użyj opcji Grupuj według produktu na kartach Drzewo wywołań i Od dołu, 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 wierszu 25 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 obsługę tego procesu.

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.

Krok w stronę asynchroniczności

W najbliższej przyszłości zespół Narzędzi deweloperskich skupi się na tym, aby debugowanie kodu asynchronicznego było 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 narzędzi dla deweloperów 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 go wyróżnić w obszarze wyświetlania.

Rysunek 8. Gdy najedziesz kursorem na element iframe w nowym menu wyboru kontekstu, zostanie on wyróżniony w obszarze wyświetlania.

Aktualizacje w czasie rzeczywistym na karcie Pokrycie

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 w czasie rzeczywistym widać, jaki kod jest używany.

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 Pokrycie

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

Usunęliśmy pole wyboru Async z panelu Źródła. 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 na tyle małe, że możemy 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 głównych 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.

Skontaktuj się 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.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami 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.