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

Witamy! W Narzędziach deweloperskich w Chrome 60 wprowadzamy nowe funkcje i duże zmiany:

• Nowy panel Kontrole obejmujący testy progresywnych aplikacji internetowych, wydajności, ułatwień dostępu za sprawdzone metody.
• Plakietki innych firm. Dowiedz się, które firmy zewnętrzne wysyłają żądania sieciowe, logując się na Konsola i wykonywanie JavaScriptu.
• Przejdź 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 Materiały
• Nowe menu do wybierania kontekstów w konsoli.
• Prostsze opcje ograniczania wykorzystania sieci.
• Asynchroniczne zrzuty stosu są domyślnie włączone.

.

Zapoznaj się z wersją wideo tych informacji o wersji poniżej lub przeczytaj dalszą część, aby dowiedzieć się więcej.

Nowe funkcje

Nowy panel audytów oparty na technologii Lighthouse

Panel Audyty obsługuje teraz Lighthouse. Lighthouse zapewnia kompleksowy zestaw danych Testy służące do pomiaru jakości stron internetowych.

Wyniki u góry w przypadku progresywnej aplikacji internetowej, wydajności, Ułatwienia dostępu i Sprawdzone metody to Twoje łączne wyniki każdej z nich kategorii zainteresowań. Pozostała część raportu zawiera zestawienie wszystkich testów, które określały Twoje wyniki. Popraw jakość swojej strony internetowej, naprawiając negatywne testy.

Rysunek 1. Raport Lighthouse

Aby sprawdzić stronę:

1. Kliknij kartę Kontrole.
2. Kliknij Przeprowadź kontrolę.
3. Kliknij Przeprowadź kontrolę. Lighthouse konfiguruje Narzędzia deweloperskie pod kątem emulacji urządzenia mobilnego, testuje wyniki na stronie, a potem wyświetla wyniki w panelu Kontrole.

Lighthouse na Google I/O 2017

Aby dowiedzieć się więcej o integracji z narzędziem Lighthouse, zapoznaj się z prezentacją o Narzędziach deweloperskich podczas Google I/O 2017 poniżej. w Narzędziach deweloperskich.

Pomóż w Lighthouse

Lighthouse to projekt open source. Dowiedz się więcej o tym, jak działa ta funkcja i jak możesz pomóc obejrzyj prezentację Lighthouse z konferencji Google I/O 2017.

Masz pomysł na audyt w Lighthouse? Opublikuj go tutaj.

Plakietki innych firm

Dzięki plakietkom firm zewnętrznych możesz uzyskać lepszy wgląd w jednostki, które wysyłają żądania sieci na stronę, logowanie do Konsoli i uruchamianie JavaScriptu.

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 Pogrupuj według produktu na kartach Drzewo połączeń i Od dołu, aby pogrupować skuteczność. rejestrują działania osób trzecich, które je wywołały. Patrz: Pierwsze kroki analizowanie wydajności środowiska wykonawczego, aby dowiedzieć się, jak analizować wydajność za pomocą Narzędzi deweloperskich;

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

Nowy gest „Przejdź do tego miejsca”

Załóżmy, że zatrzymujesz się na 25. wierszu skryptu i chcesz przejść do wiersza 50. W przeszłości można było ustaw punkt przerwania w linii 50 lub kliknij ją prawym przyciskiem myszy i wybierz Przejdź do tego miejsca. Teraz jednak można skorzystać z szybszego gestu.

Podczas wpisywania kodu przytrzymaj klawisz Command (Mac) lub Control (Windows, Linux) i i kliknij, by przejść do tego wiersza kodu. Narzędzia deweloperskie zaznaczają na niebiesko miejsca docelowe, które można przewijać.

Rysunek 5. Kontynuuj tutaj

Zapoznaj się z artykułem Pierwsze kroki z debugowaniem JavaScriptu, aby poznać podstawy debugowania w Narzędziach deweloperskich.

Przejdź do trybu asynchronicznego

W najbliższej przyszłości głównym tematem dla zespołu ds. narzędzi deweloperskich będzie utworzenie kodu asynchronicznego debugowania przewidywalne i zapewnia pełną historię wykonywania asynchronicznego.

Nowy gest „Przejdź do tego miejsca” działa też z kodem asynchronicznym. Po wskazaniu Command (Mac) lub Control (Windows, Linux), w Narzędziach deweloperskich wyróżniona jest opcja skalowalna asynchroniczne miejsca docelowe zaznaczone na zielono.

Aby skorzystać z poniższej prezentacji, obejrzyj prezentację z prezentacji dotyczącej narzędzi deweloperskich na konferencji I/O.

Zmiany

Więcej informacji na podglądzie obiektów w konsoli

Wcześniej podczas rejestrowania lub oceny obiektu w konsoli wyświetlany był tylko Object, co nie jest szczególnie przydatne. Teraz konsola zawiera więcej informacji na temat zawartość obiektu.

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

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

Więcej informacji o menu wyboru kontekstowego w konsoli

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

• Tytuł informuje o każdym z elementów.
• Podtytuł pod tytułem opisuje domenę, z której pochodzi produkt.
• Najedź kursorem na kontekst elementu iframe, by wyróżnić go w widocznym obszarze.

Rysunek 8. Najechanie kursorem na element iframe w nowym menu wyboru kontekstowego podświetla go widoczny obszar

Aktualizacje w czasie rzeczywistym na karcie Materiały

Podczas rejestrowania pokrycia kodu w Chrome 59 na karcie Zasięg widoczne było po prostu „Nagrywanie...”, bez sprawdzania, jaki kod został użyty. Teraz karta Stan pokazuje w czasie rzeczywistym jakiego kodu użyto.

Rysunek 9. Wczytywanie strony i korzystanie z niej przy użyciu starej karty Stan

Rysunek 10. Wczytywanie strony i wchodzenie z nią w interakcję przy użyciu nowej karty Stan

Prostsze opcje ograniczania wykorzystania sieci

Menu ograniczania przepustowości sieci w panelach Sieć i Wydajność zostały uproszczone, aby wybrać tylko 3 opcje: Offline, Wolne 3G, które jest powszechne w takich krajach jak Indie, oraz Szybkiej sieci 3G, która jest rozpowszechniona w takich miejscach jak Stany Zjednoczone.

Rysunek 11. Nowe opcje ograniczania wykorzystania sieci

Opcje ograniczania zostały dostosowane tak, aby pasowały do innych narzędzi ograniczania na poziomie jądra. Nie wskazuje czas oczekiwania, pobieranie i przesyłanie danych obok każdej opcji, ponieważ te wartości były mylące. Chodzi o to, aby każda z opcji była zgodna z rzeczywistością.

Stosy asynchroniczne są domyślnie włączone

Pole wyboru Async zostało usunięte z panelu Async. Asynchroniczne zrzuty stosu są teraz włączone przez użytkownika wartość domyślną. W przeszłości ta opcja była wymagana ze względu na wymagania związane z wydajnością. Narzuty są teraz na tyle minimalną, by można było włączyć tę funkcję domyślnie. Jeśli chcesz wyłączyć asynchroniczne zrzuty stosu, możesz je wyłączyć w Ustawieniach lub przy użyciu aplikacji Do not capture async stack traces w menu poleceń.

Narzędzia deweloperskie na Google I/O 2017

Aby dowiedzieć się więcej o narzędziach deweloperskich, zapoznaj się z wykładem mitycznego Paula Irlandczyka. nad którymi pracowali w ciągu ostatniego roku i jakie tematy będą się zajmować w najbliższej przyszłości.

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.