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

Kayce Basques

Nowe funkcje i duże zmiany w Narzędziach deweloperskich w Chrome 67 to między innymi:

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. Przeszukują nagłówki i treści wszystkich żądań sieciowych dla podanego zapytania.

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

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

Kliknij Uwzględniaj wielkość liter Uwzględnij wielkość liter, aby w zapytaniu rozróżniana była 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żenia regularnego w ukośniki.

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

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

Interfejs użytkownika panelu Global Search (Wyszukiwanie globalne) jest teraz zgodny z interfejsem nowego panelu Network Search (Wyszukiwanie w sieci). Funkcja drukuje wyniki, aby ułatwić ich przeglądanie.

Stary i nowy interfejs użytkownika.

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

Naciśnij Command + Option + F (Mac) lub Control + Shift + F (Windows, Linux, ChromeOS), aby otworzyć Wyszukiwanie globalne. 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 zmienną CSS, Narzędzia deweloperskie wyświetlają teraz podgląd tego koloru.

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

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

Skopiuj jako pobranie

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

Kopiowanie kodu odpowiednika download() dla żądania.

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 audyty

Panel Audyty zawiera 2 nowe kontrole:

Nowe opcje konfiguracji

Teraz możesz skonfigurować panel Kontrole, aby:

  • Zachowaj ustawienia widocznego obszaru dla komputerów i klienta użytkownika. Możesz dzięki temu zapobiec symulowaniu urządzenia mobilnego przez panel Kontrole.
  • Wyłącz ograniczanie wykorzystania sieci i procesora.
  • Zachowaj miejsce na dane, takie jak LocalStorage i IndexedDB, podczas kontroli.

Nowe opcje konfiguracji kontroli.

Rysunek 6. Nowe opcje konfiguracji kontroli

Wyświetl logi czasu

Po kontroli strony kliknij Wyświetl log czasu, aby w panelu Wydajność zobaczyć na podstawie danych o wydajności wczytywania, na których podstawie przeprowadzana jest kontrola.

Przycisk Wyświetl log czasu.

Rysunek 7. Przycisk Wyświetl log czasu

Zatrzymaj nieskończone pętle

Jeśli często korzystasz z pętli for, do...while lub rekurencji, prawdopodobnie podczas projektowania witryny przez pomyłkę wykonano pętlę nieskończoną. Aby zatrzymać pętlę nieskończoną, 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.

Na filmie powyżej zegar jest aktualizowany za pomocą minutnika setInterval(). Kliknięcie Rozpocznij nieskończoną pętlę powoduje uruchomienie pętli do...while, która nigdy się nie zatrzymuje. Interwał jest wznawiany, ponieważ nie był uruchomiony po wybraniu Zatrzymaj bieżące wywołanie JavaScript Zatrzymaj.

Czas użytkownika na kartach Skuteczność

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

Wyświetlanie pomiarów czasu działań użytkownika na karcie „Od dołu”.

Rysunek 8. Dane o czasie działań użytkownika możesz wyświetlić na karcie Od dołu. Niebieski pasek po lewej stronie sekcji Czas użytkownika wskazuje, że ta funkcja jest wybrana.

Ogólnie możesz wybrać dowolną sekcję (Wątek główny, Czas użytkownika, GPU, ScriptStreamer itd.) i wyświetlić jej aktywność na kartach.

Wybierz instancje maszyn wirtualnych JavaScript w panelu Pamięć

W panelu Pamięć są teraz wyraźnie widoczne wszystkie instancje maszyn wirtualnych JavaScript powiązane ze stroną – nie są one jak wcześniej ukrywane za menu Cel.

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

Rysunek 9. W starej wersji interfejsu użytkownika po lewej stronie instancje maszyn wirtualnych JavaScript są ukryte za menu Cel, a w nowym interfejsie po prawej w tabeli Wybierz instancję maszyny wirtualnej JavaScript

Obok instancji developers.google.com znajdują się 2 wartości: 8.7 MB oraz 13.3 MB. Wartość po lewej reprezentuje pamięć przydzieloną przez JavaScript. Prawa wartość reprezentuje całą pamięć systemu operacyjnego, która jest alokowana z powodu danej instancji maszyny wirtualnej. Wartość po prawej obejmuje wartość po lewej stronie. W Menedżerze zadań Chrome wartość po lewej 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ć zmieniła nazwę na Strona.

Dwa okna Narzędzi deweloperskich obok siebie pokazujące zmianę nazwy.

Rysunek 10. W starym interfejsie po lewej karta, na której wyświetlane są zasoby strony, nazywa się Sieć, a w nowym interfejsie po prawej – Strona.

Aktualizacje ciemnego motywu

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

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

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.

Informacje o przejrzystości certyfikatu w panelu Zabezpieczenia.

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ść pojawi się teraz wykres płomieniowy dla każdego procesu, który pozwoli Ci zobaczyć łączną pracę założoną w wyniku każdego procesu.

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

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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 82 został anulowany.

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