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:

• Wyszukiwanie we wszystkich nagłówkach sieci
• Podgląd wartości zmiennej CSS w panelu Style
• Kopiuj jako pobieranie
• Nowe kontrole, opcje konfiguracji pulpitu i wyświetlanie śladów
• Zatrzymanie powtarzających się pętli
• Czas działań użytkownika na kartach Wyniki
• Instancje maszyn wirtualnych z JavaScriptem są wyraźnie widoczne w panelu Pamięć
• Karta Sieć w panelu Źródła została przemianowana na Strona
• Aktualizacje ciemnego motywu
• Informacje o przejrzystości certyfikatów w panelu Bezpieczeństwo
• Funkcje izolacji witryn w panelu Wydajność

Film z informacjami o wersji:

Przeszukaj wszystkie nagłówki i odpowiedzi sieci

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.

Rysunek 1 Wyszukiwanie tekstu cache-control w nowym panelu wyszukiwania w sieci

Kliknij Dopasuj wielkość liter , aby uwzględnić wielkość liter w zapytaniu. Kliknij Użyj wyrażenia regularnego , aby wyświetlić wyniki pasujące do podanego wzorca. Nie musisz ujmować wyrażenia regularnego w ukośniki.

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

Aktualizacje interfejsu panelu wyszukiwania

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.

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.

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.

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:

• Wstępnie wczytaj żądania kluczy. Żądania wstępnego wczytywania mogą przyspieszyć czas wczytywania strony, ponieważ informuje ona przeglądarkę, że powinna jak najszybciej pobrać zasoby ważne dla krytycznej ścieżki renderowania.
• Unikaj niewidocznego tekstu podczas ładowania czcionek internetowych. Zapewnienie widoczności tekstu podczas wczytywania czcionek internetowych sprawia, że strona szybciej staje się przydatna dla użytkowników.

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.

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.

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 . Przycisk zmieni się na Wznów wykonywanie skryptu .
3. Przytrzymaj Wznów wykonywanie skryptu , a potem wybierz Zatrzymaj bieżące wywołanie JavaScriptu .

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 .

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ń.

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.

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.

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.

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.

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.

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.

• Przesyłaj opinie i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi.
• Wyślij tweeta do @ChromeDevTools.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

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