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

Kayce Basques

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

• Wyszukiwanie we wszystkich nagłówkach sieci
• Podgląd wartości zmiennych CSS w panelu Style
• Skopiuj jako pobranie
• Nowe audyty, opcje konfiguracji na komputerze i wyświetlanie śladów
• Zapobieganie nieskończonym pętlom
• Czas działań użytkownika na kartach Wyniki
• Instancje maszyny wirtualnej JavaScript wyraźnie wymienione w panelu Pamięć
• Karta Sieć w panelu Źródła została zmieniona na kartę Strona.
• Aktualizacje ciemnego motywu
• Informacje o przejrzystości certyfikatów w panelu Bezpieczeństwo
• Funkcje izolacji witryn w panelu Wydajność

Wersja wideo informacji o wersji:

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

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

Kliknij Uwzględniaj wielkość liter , aby uwzględniać wielkość liter w zapytaniu. Kliknij Użyj wyrażenia regularnego , aby wyświetlić wszystkie wyniki pasujące do podanego wzorca. Nie musisz umieszczać wyrażenia regularnego w ukośnikach.

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

Aktualizacje interfejsu panelu wyszukiwania

Interfejs panelu Wyszukiwanie globalne jest teraz taki sam jak interfejs nowego panelu Wyszukiwanie sieci. Teraz wyświetla też wyniki w czytelniejszy sposób, aby ułatwić ich przeglądanie.

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

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.

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

Skopiuj jako pobranie

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

Rysunek 5. Kopiowanie kodu 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 Audyty

Nowe audyty

Panel Audyty zawiera 2 nowe audyty:

• Wstępne wczytywanie żądań kluczy Żądania wstępnego wczytywania mogą przyspieszyć ładowanie strony, ponieważ podpowiadają przeglądarce, aby jak najszybciej pobrała zasoby ważne dla krytycznej ścieżki renderowania.
• Unikaj niewidocznego tekstu podczas ładowania czcionek internetowych Zapewnienie widoczności tekstu podczas ładowania czcionek internetowych sprawia, że strona szybciej staje się przydatna dla użytkowników.

Nowe opcje konfiguracji

W panelu Audyty możesz:

• Zachowaj ustawienia widocznego obszaru i ciągu tekstowego 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 procesora.
• Zachowaj pamięć, np. LocalStorage i IndexedDB, podczas kontroli.

Rysunek 6. Nowe opcje konfiguracji kontroli

Wyświetl logi czasu

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

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ę przypadkowo wykonać pętlę nieskończoną. Aby zatrzymać nieskończoną pętlę, możesz teraz:

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 Zakończ bieżące wywołanie JavaScriptu .

Na filmie powyżej zegar jest aktualizowany za pomocą timera setInterval(). Kliknięcie Start Infinite Loop (Uruchom pętlę nieskończoną) spowoduje uruchomienie pętli do...while, która nigdy się nie zatrzymuje. Interwał zostanie wznowiony, ponieważ nie był aktywny, gdy wybrano opcję Zakończ bieżące wywołanie JavaScriptu .

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

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

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

Ogólnie rzecz biorąc, możesz teraz wybrać dowolną sekcję (Główny wątek, Czas użytkownika, GPU, ScriptStreamer itp.) i wyświetlić aktywność w tej sekcji na kartach.

Wybieranie instancji maszyn wirtualnych JavaScript w panelu Pamięć

Panel Pamięć zawiera teraz wyraźną listę wszystkich instancji maszyn wirtualnych JavaScript powiązanych ze stroną, zamiast ukrywać je w rozwijanym menu Cel, jak to było wcześniej.

Rysunek 9. W starym interfejsie po lewej stronie instancje maszyn wirtualnych JavaScript są ukryte w menu Cel, a 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. Prawa wartość 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 kartę Strona

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

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

Aktualizacje ciemnego motywu

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 bieżący schemat kolorów wiersza wykonywania

Certificate Transparency w panelu Bezpieczeństwo

W panelu Bezpieczeństwo są teraz dostępne 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, w panelu Skuteczność znajdziesz teraz wykres płomieniowy dla każdego procesu, dzięki czemu możesz zobaczyć całkowitą pracę, jaką powoduje każdy proces.

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

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają 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 tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię 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.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

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