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

Kayce Basques

Nowe funkcje i duże zmiany w Narzędziach deweloperskich w Chrome 67 to między innymi:

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” w nowym panelu Wyszukiwanie w sieci.

Rysunek 1 Wyszukiwanie tekstu cache-control w nowym panelu 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 pasujące do podanego wzorca. Nie musisz ujmować wyrażenia regularnego w ukośniki.

Zapytanie z wyrażeniem regularnym w panelu Wyszukiwanie w sieci.

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

Interfejs użytkownika panelu Global Search (Wyszukiwanie globalne) jest teraz zgodny z interfejsem nowego panelu Network Search (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ć go 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 CSS.

Rysunek 4 W starym interfejsie po lewej stronie obok pola color: var(--main-color) nie ma podglądu kolorów, a w nowym interfejsie po prawej

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

Teraz możesz skonfigurować panel Kontrole, aby:

  • 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 ślad.

Rysunek 7. przycisk Wyświetl log czasu.

Zatrzymaj nieskończone pętle

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 filmie powyżej 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ł jest wznawiany, ponieważ nie był uruchomiony po wybraniu Zatrzymaj bieżące wywołanie JavaScript 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 pomiarów czasu działań użytkownika na karcie „Od dołu”.

Rysunek 8. Dane o czasie działań użytkownika możesz wyświetlić 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 itp.) i wyświetlić na kartach aktywność tej sekcji.

Wybieranie instancji maszyn wirtualnych JavaScript w panelu Pamięć

W panelu Pamięć są teraz wyraźnie widoczne wszystkie instancje maszyn wirtualnych JavaScript powiązane ze stroną – nie są one jak wcześniej ukrywane za menu Cel.

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 odpowiada wartości JavaScript Memory, a prawa – Memory Footprint.

Nazwa karty Sieć została zmieniona na kartę Strona

W panelu Źródła karta Sieć zmieniła nazwę na Strona.

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

Rysunek 10. W starym interfejsie po lewej karta, na której wyświetlane są zasoby strony, nazywa się Sieć, a w nowym interfejsie po prawej – 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żący wiersz wykonania mają teraz kolor zielony.

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

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

Certificate Transparency w panelu Zabezpieczenia

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 Wydajność zawiera teraz wykres słupkowy dla każdego procesu, dzięki czemu możesz zobaczyć łączną ilość pracy wykonywanej przez każdy proces.

Wykresy płomieniowe poszczególnych procesów w nagraniu wydajności.

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

Pobieranie kanałów podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. 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.