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

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 zmiennych CSS w panelu Style
• Kopiuj jako pobieranie
• Nowe kontrole, opcje konfiguracji komputerów i wyświetlanie logów czasu
• Zatrzymywanie zapętleń
• Czas użytkownika na kartach Skuteczność
• Instancje maszyn wirtualnych z JavaScriptem są wyraźnie widoczne w panelu Pamięć
• Karta Sieć w panelu Źródła została zmieniona na kartę Strona
• Aktualizacje ciemnego motywu
• Informacje o przejrzystości certyfikatu w panelu Zabezpieczenia
• Funkcje izolacji witryn w panelu Wydajność

Wersja wideo informacji o wersji:

Wyszukuj we wszystkich nagłówkach sieci i odpowiedziach

Otwórz panel Sieć i naciśnij Command + F (Mac) lub Control + F. (Windows, Linux, ChromeOS), aby otworzyć nowy panel Wyszukiwanie sieciowe. Przeszukuj nagłówki za pomocą narzędzi deweloperskich i treści wszystkich żądań sieciowych związanych z Twoim zapytaniem.

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

Aby utworzyć zapytanie, kliknij Uwzględnij wielkość liter . Kliknij Użyj wyrażenia regularnego. , aby wyświetlić wszystkie pasujące wyniki na podstawie podanego wzoru. Nie musisz ujmować wyrażenia regularnego w ukośniki.

Rysunek 2. Zapytanie z wyrażeniem regularnym w panelu Wyszukiwanie 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 umożliwia również drukowanie wyników, co ułatwia czytanie.

Rysunek 3. Stary interfejs użytkownika znajduje się po lewej stronie, a nowy interfejs po prawej.

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

Podgląd wartości zmiennych CSS w panelu Style

Gdy wartość właściwości CSS „color”, np. background-color lub color, jest ustawiona na „CSS” , ale w Narzędziach deweloperskich wyświetli się podgląd tego koloru.

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

Skopiuj jako pobranie

Kliknij prawym przyciskiem myszy żądanie sieciowe i wybierz Kopiuj > Kopiuj jako pobieranie, aby skopiować fetch() równoważny kod tego żądania do schowka.

Rysunek 5. Kopiowanie kodu równoważnego fetch() żą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 kontrolnego

Nowe kontrole

Panel Audyty zawiera 2 nowe kontrole:

• Wstępne wczytywanie żądań kluczy Żądania wstępnego wczytywania mogą przyspieszyć wczytywanie stron, jak najszybciej pobierze zasoby ważne dla krytycznej ścieżki renderowania. jak to tylko możliwe.
• Unikaj niewidocznego tekstu podczas wczytywania czcionek internetowych. Upewnij się, że tekst jest widoczny Czcionki na internet sprawiają, że strona staje się bardziej przydatna dla użytkowników.

Nowe opcje konfiguracji

Teraz możesz skonfigurować panel Kontrole, aby:

• Zachowaj ustawienia widocznego obszaru dla komputerów i klienta użytkownika. Inaczej mówiąc, możesz zapobiec kontroli. symulację urządzenia mobilnego.
• Wyłącz ograniczanie wykorzystania sieci i procesora.
• Zachowaj miejsce na dane, takie jak LocalStorage i IndexedDB, podczas kontroli.

Rysunek 6. Nowe opcje konfiguracji kontroli

Wyświetl logi czasu

Po kontroli strony kliknij Wyświetl log czasu, aby wyświetlić dane o wydajności wczytywania, które obejmuje kontrola. na podstawie danych z panelu Skuteczność.

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 udało Ci się wykonać nieskończone zapętlanie się przez pomyłkę podczas projektowania witryny. Aby zatrzymać pętlę nieskończoną, 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 , następnie wybierz Zatrzymaj Bieżące wywołanie JavaScriptu .

Na filmie powyżej zegar jest aktualizowany za pomocą minutnika setInterval(). Kliknij przycisk Start Nieskończona pętla uruchamia pętlę do...while, która nigdy się nie kończy. Interwał zostanie wznowiony, ponieważ nie uruchomione, gdy polecenie Zatrzymaj bieżące wywołanie JavaScript było zaznaczono.

Czas użytkownika na kartach Skuteczność

Podczas wyświetlania nagrania skuteczności kliknij sekcję Czas użytkownika, aby zobaczyć Czas użytkownika. dostępne na kartach Podsumowanie, Od dołu, 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 Sekcja Czas użytkownika wskazuje, że ta funkcja jest wybrana.

Teraz możesz wybrać dowolną sekcję (Wątek główny, Czas użytkownika, GPU, ScriptStreamer itd.) i sprawdzać aktywność w tej sekcji na kartach.

Wybierz instancje maszyn wirtualnych JavaScript w panelu Pamięć

W panelu Pamięć w wyraźny sposób wymienione są teraz wszystkie instancje maszyn wirtualnych JavaScript powiązane ze stroną. zamiast ukrywać pod menu Cel jak wcześniej.

Rysunek 9. W starym interfejsie po lewej instancje maszyn wirtualnych JavaScript są ukryte za Menu Kieruj na, a w nowym interfejsie po prawej stronie są widoczne w obszarze Wybierz Tabela instancji maszyny wirtualnej JavaScript

Obok instancji developers.google.com znajdują się 2 wartości: 8.7 MB oraz 13.3 MB. Po lewej reprezentuje pamięć przydzieloną przez JavaScript. Prawa wartość reprezentuje całą pamięć systemu operacyjnego która jest przydzielana ze względu na tę maszynę wirtualną. Wartość po prawej obejmuje wartość po lewej stronie. W Menedżerze zadań Chrome wartość po lewej odpowiada wartości JavaScript Memory i prawej odpowiada 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 z zasobami strony nazywa się Sieć, a w nowym interfejsie po prawej stronie ma nazwę Strona.

Aktualizacje ciemnego motywu

W Chrome 67 wprowadziliśmy kilka drobnych zmian w schemacie kolorów ciemnego. Na przykład parametr ikony punktu przerwania oraz 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 certyfikatu.

Rysunek 12. Informacje o przejrzystości certyfikatu w panelu Bezpieczeństwo

Izolacja witryn w panelu Wydajność

Jeśli włączysz izolację witryn, w panelu Skuteczność znajdziesz teraz wykres płomieniowy dla: aby zobaczyć, ile pracy wymaga dany proces.

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

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji 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 wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.