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

Kayce Basques

Nowe funkcje i ważne zmiany w Narzędziach deweloperskich w Chrome 67:

Film z informacjami o wersji:

Otwórz panel Sieć, a następnie naciśnij Command + F (Mac) lub Control + F (Windows, Linux, ChromeOS), aby otworzyć nowy panel Wyszukiwanie w sieci. Narzędzie deweloperskie przeszukuje nagłówki i treści wszystkich żądań sieciowych pod kątem podanego przez Ciebie zapytania.

Wyszukiwanie tekstu „cache-control” za pomocą nowego panelu wyszukiwania w sieci.

Rysunek 1 Wyszukiwanie tekstu cache-control w nowej karcie wyszukiwania w sieci

Kliknij Dopasuj wielkość liter Uwzględniaj wielkość liter, aby uwzględnić wielkość liter w zapytaniu. Kliknij Użyj wyrażenia regularnego Użyj wyrażenia regularnego, aby wyświetlić wyniki, które pasują do podanego przez Ciebie wzorca. Nie musisz otaczać wyrażenia regularnego ukośnikami.

Zapytanie wyrażenia regularnego w panelu wyszukiwania w sieci

Rysunek 2. Zapytanie wyrażenia regularnego w panelu wyszukiwania w sieci

Interfejs panelu Wyszukiwanie globalne jest teraz zgodny z interfejsem nowego panelu Wyszukiwanie w sieci. Teraz wyniki są też ładnie formatowane, aby ułatwić ich przeglądanie.

Stary i nowy interfejs

Rysunek 3. Stary interfejs po lewej stronie, a nowy po prawej

Naciśnij Command + Option + F (Mac) lub Control + Shift + F (Windows, Linux, ChromeOS), aby otworzyć globalne wyszukiwanie. Możesz też otworzyć ją za pomocą menu poleceń.

Podgląd wartości zmiennej CSS w panelu Style

Gdy wartość właściwości koloru w CSS, takiej jak background-color lub color, jest ustawiona na zmienną w CSS, Narzędzia dla programistów wyświetlają teraz podgląd tego koloru.

Przykład zmiennych wartości kolorów w kodzie CSS.

Rysunek 4 W starym interfejsie po lewej stronie nie ma podglądu koloru color: var(--main-color), natomiast w nowym interfejsie po prawej stronie jest

Skopiuj jako pobranie

Aby skopiować do schowka kod odpowiadający tej prośbie w formacie fetch(), kliknij żądanie sieci prawym przyciskiem myszy i wybierz Kopiuj > Kopiuj jako Fetch.

Kopiowanie kodu odpowiadającego funkcji fetch() w przypadku żądania.

Rysunek 5. Kopiowanie kodu odpowiadającego fetch() dla żądania

Narzędzia deweloperskie generują kod podobny do tego:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Aktualizacje panelu audytów

Nowe audyty

Panel Kontrole zawiera 2 nowe kontrole, w tym:

Nowe opcje konfiguracji

W panelu Sprawdzanie możesz teraz skonfigurować:

  • Zachowaj ustawienia widoku pulpitu i ustawienia użytkownika. Innymi słowy, możesz uniemożliwić panelowi Sprawdzanie symulowanie urządzenia mobilnego.
  • Wyłącz ograniczanie przepustowości sieci i procesora.
  • Zachowaj pamięć, np. LocalStorage i IndexedDB, podczas kontroli.

Nowe opcje konfiguracji kontroli.

Rysunek 6. Nowe opcje konfiguracji kontroli

Wyświetl logi czasu

Po sprawdzeniu strony kliknij Wyświetl ślad, aby wyświetlić w panelu Skuteczność dane o wydajności wczytywania, na których opiera się audyt.

Przycisk Wyświetl dane śledzenia.

Rysunek 7. przycisk Wyświetl log czasu,

Zatrzymywanie pętli nieskończonych

Jeśli często pracujesz z pętlami for, do...while lub rekurencją, prawdopodobnie podczas tworzenia witryny przez pomyłkę wykonałeś/wykonałaś pętlę nieskończoną. Aby zatrzymać nieskończoną pętlę, możesz:

  1. Otwórz panel Źródła.
  2. Kliknij Wstrzymaj Wstrzymaj. Przycisk zmieni się na Wznów wykonywanie skryptu Wznów.
  3. Przytrzymaj Wznów wykonywanie skryptu Wznów, a potem wybierz Zatrzymaj bieżące wywołanie JavaScriptu Zatrzymaj.

W tym filmie zegar jest aktualizowany za pomocą minutnika setInterval(). Po kliknięciu Rozpocznij Nieskończony obwód rozpoczyna się pętla do...while, która nigdy się nie kończy. Interwał wznawia działanie, ponieważ nie był wykonywany w momencie wybrania opcji Zatrzymaj bieżące wywołanie JavaScriptu Zatrzymaj.

Czas działań użytkownika na kartach Skuteczność

Podczas wyświetlania nagrania dotyczącego wydajności kliknij sekcję Czas reakcji użytkownika, aby wyświetlić czasy reakcji użytkownika na kartach Podsumowanie, Od dołu do góry, Drzewo wywołań i Dziennik zdarzeń.

Wyświetlanie wskaźników Czas użytkownika na karcie Od dołu

Rysunek 8. Wyświetlanie wskaźników Czas użytkownika na karcie Od dołu. Niebieski pasek po lewej stronie sekcji Czas użytkownika wskazuje, że jest ona wybrana.

Możesz teraz wybrać dowolną sekcję (Główny wątek, Czas użytkownika, GPU, ScriptStreamer itd.) i wyświetlić na kartach aktywność tej sekcji.

Wybieranie instancji maszyn wirtualnych JavaScript w panelu Pamięć

Panel Pamięć zawiera teraz przejrzystą listę wszystkich instancji maszyn wirtualnych JavaScript powiązanych ze stroną, zamiast ukrywać je w menu Docelowy, jak to miało miejsce wcześniej.

Zrzuty ekranu panelu Pamięć przed i po zmianach

Rysunek 9. W starym interfejsie po lewej stronie instancje maszyn wirtualnych JavaScript są ukryte za menu Cel, natomiast w nowym interfejsie po prawej stronie są one widoczne w tabeli Wybierz instancję maszyny wirtualnej JavaScript.

Obok instancji developers.google.com znajdują się 2 wartości: 8.7 MB i 13.3 MB. Wartość po lewej stronie to pamięć przydzielona przez JavaScript. Prawa wartość to cała pamięć operacyjna systemu operacyjnego, która jest przydzielana przez tę maszynę wirtualną. Prawa wartość obejmuje lewą. W Menedżerze zadań Chrome wartość po lewej stronie odpowiada wartości JavaScript Memory, a wartość po prawej – wartości Memory Footprint.

Nazwa karty Sieć została zmieniona na Karta strony

W panelu Źródła karta Sieć ma teraz nazwę Strona.

Dwa okna DevTools obok siebie, pokazujące zmianę nazwy.

Rysunek 10. W starym interfejsie po lewej stronie karta z zasobami strony nosi nazwę Sieć, natomiast w nowym interfejsie po prawej stronie – Strona.

Aktualizacje ciemnego motywu

Wersja Chrome 67 zawiera kilka drobnych zmian w schemacie kolorów motywu ciemnego. Na przykład ikony punktów przerwania i bieżąca linia wykonania są teraz zielone.

Zrzut ekranu przedstawiający nową ikonę punktu przerwania i schemat kolorów bieżącej linii wykonania.

Rysunek 11. Zrzut ekranu przedstawiający nową ikonę punktu przerwania i schemat kolorów bieżącej linii wykonania

Certyfikat przejrzystości w panelu Bezpieczeństwo

Panel Bezpieczeństwo zawiera teraz informacje o przejrzystości certyfikatów.

Informacje o przejrzystości certyfikatu w panelu Bezpieczeństwo.

Rysunek 12. Informacje o przejrzystości certyfikatów w panelu Bezpieczeństwo

Izolacja witryn w panelu Wydajność

Jeśli masz włączoną izolację witryn, panel Skuteczność zawiera teraz wykres słupkowy dla każdego procesu, dzięki czemu możesz zobaczyć łączną ilość pracy wykonywanej przez każdy proces.

Wykresy żarówki dla poszczególnych procesów w rejestracji wydajności.

Rysunek 13. Wykresy płomieniowe poszczególnych procesów w nagraniu skuteczności

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.