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

Kayce Basques

Cześć! Nowe funkcje i duże zmiany wprowadzane w Narzędziach deweloperskich w Chrome 60 to między innymi:

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

Nowe funkcje

Nowy panel audytów oparty na technologii Lighthouse

Panel audytów jest teraz obsługiwany przez Lighthouse. Lighthouse udostępnia kompleksowy zestaw testów do pomiaru jakości stron internetowych.

U góry strony progresywna aplikacja internetowa, wydajności, ułatwień dostępu i sprawdzonych metod to wyniki zbiorcze dla każdej z tych kategorii. Pozostała część raportu zawiera zestawienie wszystkich testów, które miały wpływ na Twoje wyniki. Popraw jakość swojej strony internetowej, poprawiając wyniki testów.

Raport Lighthouse

Rysunek 1. Raport Lighthouse

Aby sprawdzić stronę:

  1. Kliknij kartę Kontrole.
  2. Kliknij Przeprowadź kontrolę.
  3. Kliknij Uruchom kontrolę. Lighthouse konfiguruje Narzędzia deweloperskie w taki sposób, aby emulować urządzenie mobilne, a potem przeprowadza kilka testów na stronie, a potem wyświetla wyniki w panelu Audyty.

Lighthouse na Google I/O 2017

Zapoznaj się z prezentacją z Google I/O 2017 na temat Narzędzi deweloperskich, aby dowiedzieć się więcej o integracji Lighthouse z tymi narzędziami.

Opublikuj w Lighthouse

Lighthouse to projekt typu open source. Aby dowiedzieć się więcej o tym, jak to działa i jak wziąć w nim udział, przeczytaj prezentację o Lighthouse z Google I/O 2017.

Masz pomysł na audyt Lighthouse? Opublikuj go tutaj.

Plakietki innych firm

Dzięki plakietkom innych firm masz lepszy wgląd w elementy, które wysyłają na stronie żądania sieciowe, logują się w konsoli i wykonywają JavaScript.

Najechanie kursorem na plakietkę firmy zewnętrznej w panelu Sieć

Rysunek 2. Najechanie kursorem na plakietkę firmy zewnętrznej w panelu Sieć

najechanie kursorem na plakietkę firmy zewnętrznej w konsoli;

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.

Aby zgrupować aktywność związaną z rejestracją skuteczności wywołaną przez podmioty zewnętrzne, które wywołały te działania, użyj opcji Grupuj według usługi na kartach Drzewo połączeń i Od dołu. Zapoznaj się z artykułem Pierwsze kroki z analizowaniem wydajności środowiska wykonawczego, aby dowiedzieć się, jak analizować wydajność za pomocą Narzędzi deweloperskich.

Grupowanie według produktu na karcie Od dołu

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

Nowy gest dla opcji Przejdź tutaj

Załóżmy, że masz wstrzymany wiersz 25 skryptu i chcesz przejść do wiersza 50. Wcześniej można było ustawić punkt przerwania w wierszu 50 lub kliknąć linię prawym przyciskiem myszy i wybrać Przejdź do tego miejsca. Teraz jest dostępny szybszy gest.

Podczas przeglądania kodu przytrzymaj Command (Mac) lub Control (Windows, Linux), a następnie kliknij, aby przejść do tego wiersza kodu. Narzędzia deweloperskie podświetlają na niebiesko miejsca docelowe, do których można przejść.

Przejdź tutaj

Rysunek 5. Przejdź tutaj

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

Przejdź do trybu asynchronicznego

W najbliższej przyszłości ważnym zadaniem dla zespołu DevTools będzie zapewnienie przewidywalności debugowania kodu asynchronicznego i zapewnienie pełnej historii asynchronicznego wykonywania kodu.

Nowy gest „Przejdź do tego miejsca działa też w przypadku kodu asynchronicznego. Gdy przytrzymasz klawisz Command (Mac) lub Control (Windows, Linux), Narzędzia deweloperskie podświetlają na zielono asynchroniczne miejsca docelowe, do których można przejść.

Zapoznaj się z poniższą wersją demonstracyjną z prezentacji na temat Narzędzi deweloperskich na konferencji I/O.

Zmiany

Bardziej szczegółowe podglądy obiektów w konsoli

Wcześniej podczas rejestrowania lub oceniania obiektu w konsoli wyświetlała się tylko wartość Object, co nie jest szczególnie przydatne. Teraz konsola udostępnia więcej informacji o zawartości obiektu.

Jak konsola wyświetlała podgląd obiektów

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

Jak konsola wyświetla teraz podgląd obiektów

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

Bardziej szczegółowe menu wyboru kontekstowego w konsoli

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

  • Tytuł opisuje, co to za produkt.
  • Podtytuł pod tytułem opisuje domenę, z której pochodzi produkt.
  • Najedź kursorem na kontekst elementu iframe, aby wyróżnić go w widocznym obszarze.

Nowe menu wyboru kontekstu

Rysunek 8. Najechanie kursorem na element iframe w nowym menu wyboru kontekstu wyróżnia go w widocznym obszarze.

Aktualizacje w czasie rzeczywistym na karcie Zasięg

Podczas rejestrowania pokrycia kodu w Chrome 59 na karcie Zasięg będzie wyświetlany komunikat „Nagrywanie...”, ale nie wiadomo, jaki kod został użyty. Teraz karta Stan pokazuje w czasie rzeczywistym, jaki kod jest używany.

Ładowanie strony i korzystanie z niej za pomocą starej karty Zasięg

Rysunek 9. wczytywanie strony i korzystanie z niej za pomocą starej karty Stan;

Ładowanie strony i korzystanie z niej przy użyciu nowej karty Zasięg

Rysunek 10. Ładowanie strony i korzystanie z niej przy użyciu nowej karty Stan

Prostsze opcje ograniczania wykorzystania sieci

Uprościliśmy menu ograniczania przepustowości sieci w panelach Sieć i Wydajność. Znajdują się w nich tylko 3 opcje: Offline, Slow 3G (częste w takich krajach jak Indie) i Szybka sieć 3G (dostępna w takich miejscach jak Stany Zjednoczone).

Nowe opcje ograniczania wykorzystania sieci

Rysunek 11. Nowe opcje ograniczania wykorzystania sieci

Opcje ograniczania zostały zmienione tak, aby pasowały do innych narzędzi do ograniczania przepustowości na poziomie jądra systemu operacyjnego. Narzędzia deweloperskie nie wyświetlają już obok każdej opcji danych o opóźnieniu, pobieraniu i przesyłaniu, ponieważ te wartości były mylące. Celem jest zapewnienie użytkownikom jak najlepszych wrażeń podczas korzystania z każdej z tych opcji.

Stosy asynchroniczne są domyślnie włączone

Pole wyboru Asynchroniczne zostało usunięte z panelu Źródła. Asynchroniczne zrzuty stosu są teraz domyślnie włączone. Wcześniej ta opcja była dostępna ze względu na wymagania dotyczące skuteczności. Obecnie ten narzut jest na tyle minimalny, aby możliwe było domyślne włączenie tej funkcji. Jeśli wolisz wyłączyć asynchroniczne zrzuty stosu, możesz je wyłączyć w Ustawieniach lub za pomocą polecenia Do not capture async stack traces w menu poleceń.

DevTools na Google I/O 2017

Zapoznaj się z przemówieniem mitycznego Paula Irelanda, aby dowiedzieć się więcej o tym, nad czym pracował zespół DevTools w ciągu ostatniego roku, a także głównymi tematami, którymi będzie się musiał zająć w najbliższej przyszłości.

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

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

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

101 Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Subskrypcja Chrome 82 została anulowana.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59