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

Kayce Basques
Kayce Basques
X GitHub

Nowe funkcje i główne zmiany, które pojawią się w Narzędziach deweloperskich w Chrome 67:

Wersja wideo informacji 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ędzia deweloperskie przeszukują nagłówki i treści wszystkich żądań sieciowych pod kątem podanego zapytania.

Wyszukiwanie tekstu „cache-control” w nowym panelu wyszukiwania w sieci.

Rysunek 1. Wyszukiwanie tekstu cache-control za pomocą nowego panelu wyszukiwania w sieci

Kliknij Uwzględniaj wielkość liter Uwzględnij wielkość liter, aby zapytanie uwzględniało wielkość liter. Kliknij Użyj wyrażenia regularnego Użyj wyrażenia regularnego, aby wyświetlić wyniki pasujące do podanego wzorca. Nie musisz umieszczać wyrażenia regularnego między ukośnikami.

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

Rysunek 2. Zapytanie z wyrażeniem regularnym w panelu wyszukiwania w sieci.

Interfejs panelu Wyszukiwanie globalne jest teraz taki sam jak interfejs nowego panelu Wyszukiwanie w sieci. Teraz stosuje też formatowanie stylistyczne, aby ułatwić skanowanie.

Stary i nowy interfejs.

Rysunek 3. Stary interfejs po lewej stronie i nowy interfejs po prawej stronie

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

Podgląd wartości zmiennych CSS w panelu Style

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

Przykładowe wartości kolorów zmiennych CSS.

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

Kopiuj jako fetch

Kliknij żądanie sieciowe prawym przyciskiem myszy, a następnie wybierz Kopiuj > Kopiuj jako Fetch, aby skopiować do schowka kod odpowiadający fetch() dla tego żądania.

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

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

Narzędzia deweloperskie wygenerują 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 Audyty

Nowe audyty

W panelu Audyty dostępne są 2 nowe audyty:

Nowe opcje konfiguracji

Możesz teraz skonfigurować panel Audyty, aby:

  • Zachowaj ustawienia widocznego obszaru i klienta użytkownika na komputerze. Innymi słowy, możesz uniemożliwić panelowi Audyty symulowanie urządzenia mobilnego.
  • Wyłącz ograniczanie przepustowości sieci i mocy procesora.
  • Zachowaj pamięć, np. LocalStorage i IndexedDB, podczas kontroli.

Nowe opcje konfiguracji kontroli.

Rysunek 6. Nowe opcje konfiguracji kontroli

Wyświetl logi czasu

Po przeprowadzeniu kontroli strony kliknij Wyświetl ślad, aby w panelu Wydajność wyświetlić dane o wydajności wczytywania, na których opiera się kontrola.

Przycisk Wyświetl log czasu.

Rysunek 7. Przycisk Wyświetl log czasu

Zatrzymywanie nieskończonych pętli

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

  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 następnie wybierz Zatrzymaj bieżące wywołanie JavaScript Zatrzymaj.

W filmie powyżej zegar jest aktualizowany za pomocą minutnika setInterval(). Kliknięcie Uruchom nieskończoną pętlę uruchamia pętlę do...while, która nigdy się nie kończy. Interwał zostanie wznowiony, ponieważ nie był uruchomiony, gdy wybrano opcję Zatrzymaj bieżące wywołanie JavaScriptu Zatrzymaj.

Czas działań użytkownika na kartach skuteczności

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

Wyświetlanie danych dotyczących czasu działań użytkownika na karcie Od dołu.

Rysunek 8. Wyświetlanie danych o czasie działań użytkownika na karcie Bottom-Up (Oddolnie). Niebieski pasek po lewej stronie sekcji Czas działań użytkownika wskazuje, że jest ona wybrana.

Ogólnie rzecz biorąc, możesz teraz wybrać dowolną sekcję (Wątek główny, Czas działań użytkownika, GPU, ScriptStreamer itd.) i wyświetlić aktywność w niej na kartach.

Wybieranie instancji maszyn wirtualnych JavaScript w panelu Pamięć

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

Zrzuty ekranu panelu Pamięć przed i po.

Rysunek 9. W starym interfejsie po lewej stronie instancje maszyn wirtualnych JavaScript są ukryte w menu Cel, natomiast w nowym interfejsie po prawej stronie są 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 reprezentuje pamięć przydzieloną z powodu JavaScriptu. Wartość po prawej stronie reprezentuje całą pamięć systemu operacyjnego, która jest przydzielana z powodu tej instancji maszyny wirtualnej. Wartość po prawej stronie obejmuje wartość po lewej stronie. W Menedżerze zadań Chrome wartość po lewej stronie odpowiada JavaScript Memory, a wartość po prawej – Memory Footprint.

Zmiana nazwy karty Sieć na Strona

W panelu Źródła karta Sieć nazywa się teraz Strona.

Dwa okna narzędzi dla programistów obok siebie, pokazujące zmianę nazwy.

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

Aktualizacje ciemnego motywu

Chrome 67 zawiera kilka drobnych zmian w schemacie kolorów ciemnego motywu. Na przykład ikony punktów przerwania i bieżący wiersz wykonywania są teraz zielone.

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

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

Przejrzystość certyfikatów w panelu Bezpieczeństwo

Panel Bezpieczeństwo zawiera teraz informacje o Certificate Transparency.

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

Rysunek 12. Informacje o Certificate Transparency w panelu Bezpieczeństwo

Izolacja witryn w panelu Wydajność

Jeśli masz włączoną izolację witryn, panel Wydajność zawiera teraz wykres płomieniowy dla każdego procesu, dzięki czemu możesz zobaczyć, ile pracy wymaga każdy z nich.

Wykresy płomieniowe dla poszczególnych procesów w nagraniu dotyczącym wydajności.

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

Pobieranie kanałów podglądu

Rozważ użycie Chrome 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 pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Skontaktuj się z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.