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

Kayce Basques

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

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 oferuje kompleksowy zestaw testów do pomiaru jakości stron internetowych.

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

Raport Lighthouse

Rysunek 1. Raport Lighthouse

Aby sprawdzić stronę:

  1. Kliknij kartę Kontrole.
  2. Kliknij Przeprowadź kontrolę.
  3. Kliknij Przeprowadź kontrolę. Lighthouse konfiguruje narzędzia deweloperskie w celu emulacji urządzenia mobilnego, przeprowadza serię testów na stronie, a potem wyświetla wyniki w panelu Kontrole.

Lighthouse na Google I/O 2017

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

Pomóż w Lighthouse

Lighthouse to projekt open source. Aby dowiedzieć się więcej o tym, jak działa ta usługa i jak możesz ją wykorzystać, zapoznaj się z prezentacją Lighthouse z Google I/O 2017.

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

Plakietki innych firm

Dzięki plakietkom innych firm możesz uzyskać lepszy wgląd w jednostki, które wysyłają żądania sieciowe na stronie, logują się w konsoli i wykonują kod 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.

Użyj opcji Pogrupuj według usługi na kartach Drzewo wywołań i Od dołu, aby pogrupować aktywność związaną z rejestracją skuteczności przez podmioty zewnętrzne, które je wywołały. Aby dowiedzieć się, jak analizować wydajność za pomocą Narzędzi deweloperskich, przeczytaj artykuł Pierwsze kroki z analizą wydajności środowiska wykonawczego.

Grupowanie według produktu na karcie Od dołu

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. Wcześniej można było ustawić punkt przerwania w wierszu 50 lub kliknąć wiersz prawym przyciskiem myszy i wybrać Przejdź do tego miejsca. Jednak teraz można skorzystać z gestów do obsługi tego przepływu pracy szybciej.

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

Przejdź do tego miejsca

Rysunek 5. Przejdź do tego miejsca

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 jest zapewnienie przewidywalności kodu debugowania asynchronicznego i zapewnienie pełnej historii wykonywania asynchronicznego.

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

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 logowania lub oceny obiektu w konsoli wyświetlała się tylko wartość Object, co nie jest szczególnie przydatne. Teraz konsola zawiera 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

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.

Nowe menu wyboru kontekstu

Rysunek 8. Najechanie kursorem na element iframe w nowym menu wyboru kontekstu powoduje jego podświetlenie w widocznym obszarze.

Aktualizacje w czasie rzeczywistym na karcie Materiały

Podczas rejestrowania pokrycia kodu w Chrome 59 na karcie Zasięg pojawiała się tylko informacja „Nagrywanie...”, ale bez informacji o użytym kodzie. Teraz karta Stan pokazuje w czasie rzeczywistym, jaki kod jest używany.

Wczytywanie strony i korzystanie z niej przy użyciu starej karty Zasięg

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

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

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

Prostsze opcje ograniczania wykorzystania sieci

Uprościliśmy menu ograniczania dostępu sieci w panelach Sieć i Wydajność, tak aby zawierały tylko 3 opcje: Offline, Powolne połączenie 3G (popularne w Indiach) oraz Szybkie 3G, które jest powszechnie stosowane w takich miejscach jak Stany Zjednoczone.

Nowe opcje ograniczania wykorzystania sieci

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. Narzędzia deweloperskie nie pokazują już danych dotyczących czasu oczekiwania, pobierania i przesyłania 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 Asynchroniczne zostało usunięte z panelu Źródła. Asynchroniczne zrzuty stosu są teraz domyślnie włączone. W przeszłości ta opcja była wymagana ze względu na wymagania dotyczące wydajności. Narzut jest teraz na tyle minimalny, aby domyślnie włączyć tę funkcję. Jeśli chcesz 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ń.

Narzędzia deweloperskie na Google I/O 2017

Zapoznaj się z wykładem mitycznego Paula Irlandczyka poniżej, aby dowiedzieć się więcej o tym, czym zajmował się zespół ds. narzędzi deweloperskich w ciągu ostatniego roku i jakie tematy, którymi będzie 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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 82 został anulowany.

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