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

Kayce Basques

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

• Wyszukiwanie we wszystkich nagłówkach sieci
• Podgląd wartości zmiennej CSS w panelu Style
• Kopiowanie jako pobranie
• Nowe kontrole, opcje konfiguracji pulpitu i wyświetlanie śladów
• Zatrzymanie powtarzających się pętli
• Czas działań użytkownika na kartach Wyniki
• wyraźnie widoczne instancje maszyn wirtualnych JavaScript 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 nowej karcie wyszukiwania w sieci

Kliknij Dopasuj wielkość liter , aby uwzględnić wielkość liter w zapytaniu. Kliknij 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.

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

Aktualizacje interfejsu panelu wyszukiwania

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.

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.

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.

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. Wstępne wczytywanie żądań może przyspieszyć wczytywanie strony, podając przeglądarce wskazówki, aby jak najszybciej pobrać zasoby, które są ważne dla ścieżki renderowania krytycznego.
• 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

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.

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,

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

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 .

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

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.

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.

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.

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.

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.

• 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 w Narzędziach deweloperskich.
• 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.