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

Kayce Basques

Nowe funkcje i ważne zmiany, które wkrótce pojawią się w Narzędziach deweloperskich w Chrome 67:

Informacje o wersji w wersji wideo:

Otwórz panel Sieć i naciśnij Command+F (Mac) lub Control+F (Windows, Linux, ChromeOS), aby otworzyć nowy panel Wyszukiwanie sieciowe. Narzędzia deweloperskie przeszukują nagłówki i treści wszystkich żądań sieciowych dla wpisanego przez Ciebie zapytania.

Wyszukując tekst „cache-control” w nowym panelu wyszukiwania w sieci.

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

Kliknij Uwzględniaj wielkość liter Uwzględnij wielkość liter, aby w zapytaniu uwzględniać wielkość liter. Kliknij Użyj wyrażenia regularnego Użyj wyrażenia regularnego, aby wyświetlić wyniki pasujące do podanego wzorca. Nie musisz ujmować wyrażeń regularnych ukośnikami.

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

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

Interfejs panelu Wyszukiwanie globalne odpowiada teraz interfejsowi nowego panelu Wyszukiwanie sieciowe. Teraz wyświetlane są też wyniki druku, co ułatwia skanowanie.

Stary i nowy interfejs.

Rysunek 3. Stary interfejs użytkownika znajduje się 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 je także otworzyć za pomocą menu poleceń.

Podgląd wartości zmiennej CSS w panelu Style

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

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

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

Skopiuj jako pobranie

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

Kopiuję kod równoważny fetch() dla żądania.

Rysunek 5. Kopiuję kod równoważny w przypadku żądania fetch()

DevTools wygeneruje 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 kontroli

Nowe kontrole

W panelu Kontrola pojawiły się 2 nowe kontrole, w tym:

Nowe opcje konfiguracji

Możesz teraz skonfigurować panel Kontrole, aby:

  • Zachowaj ustawienia widocznego obszaru dla komputerów i klienta użytkownika. Inaczej mówiąc, możesz uniemożliwić panel Kontrole symulowanie urządzenia mobilnego.
  • Wyłącz ograniczanie wykorzystania sieci i procesora.
  • Zachowaj miejsce na dane, na przykład LocalStorage i IndexedDB, podczas kontroli.

Nowe opcje konfiguracji kontroli.

Rysunek 6. Nowe opcje konfiguracji kontroli

Wyświetl logi czasu

Po sprawdzeniu strony kliknij Wyświetl log czasu, aby wyświetlić w panelu Wydajność dane o wydajności wczytywania, na których podstawie zostały oparte wyniki kontroli.

Przycisk Wyświetl log czasu.

Rysunek 7. Przycisk Wyświetl log czasu

Zatrzymaj pętle nieskończone

Jeśli często korzystasz z pętli for, do...while lub rekurencji, prawdopodobnie podczas tworzenia witryny przez pomyłkę wykonano pętlę nieskończoną. Aby zatrzymać pętlę nieskończoną, możesz:

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

Na filmie powyżej zegar jest aktualizowany za pomocą licznika czasu setInterval(). Kliknięcie Rozpocznij pętlę nieskończoną uruchamia pętlę do...while, która nigdy się nie kończy. Interwał jest wznawiany, ponieważ nie był uruchomiony, gdy wybrano Zatrzymaj bieżące wywołanie JavaScript Zatrzymaj.

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

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

Wyświetlanie pomiarów czasu użytkownika na karcie Od dołu.

Rysunek 8. Wskaźniki czasu działań użytkownika są widoczne na karcie Od dołu. Niebieski pasek po lewej stronie sekcji Czas użytkownika wskazuje, że kampania została wybrana.

Możesz teraz wybrać dowolną sekcję (Wątek główny, Czas działań użytkownika, GPU, ScriptStreamer itd.) i na kartach wyświetlić jego aktywność.

Wybierz w panelu Pamięć instancje maszyn wirtualnych JavaScript

Panel Pamięć zawiera teraz w czytelny sposób listę wszystkich instancji maszyn wirtualnych JavaScript powiązanych ze stroną, zamiast je ukrywać za menu Cel, tak jak wcześniej.

Zrzuty ekranu przedstawiające panel Pamięć przed i po.

Rysunek 9. W starym interfejsie po lewej stronie instancje maszyn wirtualnych JavaScript są ukryte za 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 reprezentuje pamięć przydzieloną przez JavaScript. Właściwa 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 lewa wartość 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ć to teraz karta Strona.

Dwa okna Narzędzi deweloperskich obok siebie, w których widać zmianę nazwy.

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

Aktualizacje ciemnego motywu

W Chrome 67 wprowadziliśmy kilka drobnych zmian w schemacie kolorów ciemnego motywu. Na przykład ikony punktów przerwania i bieżący wiersz wykonania mają teraz kolor zielony.

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

Rysunek 11. Zrzut ekranu przedstawiający ikonę nowego punktu przerwania i bieżącą linię kolorów wykonywania

Certificate Transparency w panelu Zabezpieczenia

Panel Bezpieczeństwo zawiera teraz informacje o przejrzystości certyfikatu.

Informacje o protokole Certificate Transparency w panelu Zabezpieczenia.

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

Izolacja witryn w panelu Wydajność

Jeśli masz włączoną izolację witryn, w panelu Wydajność zobaczysz teraz wykres płomieniowy dla każdego procesu. Dzięki temu możesz zobaczyć łączną pracę związaną z każdym procesem.

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

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

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

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

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

101 Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Subskrypcja Chrome 82 została anulowana.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59