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

Kayce Basques

Cześć! Oto nowości w Narzędziach deweloperskich w Chrome w Chrome 76.

Automatycznie uzupełniaj wartościami CSS

Podczas dodawania deklaracji stylów do węzła DOM czasami łatwiej zapamiętać wartość deklaracji niż jej nazwę. Jeśli np. chcesz pogrubić węzeł <p>, wartość bold może być łatwiejsza do zapamiętania niż nazwa font-weight. Interfejs autouzupełniania panelu Styl obsługuje teraz wartości CSS. Jeśli pamiętasz, jakiej wartości słowa kluczowego potrzebujesz, ale nie pamiętasz nazwy usługi, spróbuj wpisać tę wartość. Autouzupełnianie powinno pomóc Ci znaleźć szukaną nazwę.

Po wpisaniu „pogrubienie” panel Styli automatycznie uzupełnia „font-weight: bold”.

Rysunek 1. Gdy wpiszesz bold, panel Style zostanie automatycznie uzupełniony o font-weight: bold.

Przesyłaj opinie na temat tej nowej funkcji na problem Chromium o numerze 931145.

nowy interfejs ustawień sieci;

Wcześniej w panelu Sieć występował problem z używalnością, ponieważ opcje takie jak menu ograniczania były niedostępne, gdy okno Narzędzi deweloperskich było wąskie. Aby rozwiązać ten problem i usprawnić panel Sieć, kilka rzadziej używanych opcji przenieśliśmy do nowej panelu Ustawienia sieci Przycisk Ustawienia sieci.

Ustawienia sieci

Rysunek 2. Ustawienia sieci.

Do Ustawień sieci zostały przeniesione te opcje: Użyj wierszy dużych żądań, Grupuj według ramki, Pokaż przegląd i Zrób zrzut ekranu. Rysunek 3 przedstawia mapowanie starych lokalizacji na nowe.

Mapowanie starych lokalizacji na nowe.

Rysunek 3. Mapowanie starych lokalizacji na nowe.

Prześlij opinię na temat tej zmiany w interfejsie do problemu nr 892969 w Chromium.

Wiadomości WebSocket w eksportach HAR

Podczas eksportowania pliku HAR z panelu Sieć, aby udostępnić logi sieci współpracownikom, plik HAR zawiera teraz komunikaty WebSocket. Właściwość _webSocketMessages zaczyna się od podkreślenia, co oznacza, że jest to pole niestandardowe.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Prześlij opinię na temat tej nowej funkcji na problem w Chromium o numerze 496006.

Przyciski importowania i eksportowania HAR

Łatwiej udostępniaj logi sieciowe współpracownikom za pomocą nowych przycisków Eksportuj wszystko jako plik HAR z zawartością Eksportuj i Importuj plik HAR Importuj. Importowanie i eksportowanie HAR jest dostępny w Narzędziach deweloperskich od jakiegoś czasu. Nowością są przyciski, które łatwiej znaleźć.

Nowe przyciski HAR

Rysunek 4. Nowe przyciski HAR

Prześlij opinię na temat tej zmiany w interfejsie, przesyłając problem nr 904585 w Chromium.

Łączne wykorzystanie pamięci w czasie rzeczywistym

Panel Pamięć pokazuje teraz łączne wykorzystanie pamięci w czasie rzeczywistym.

Łączne wykorzystanie pamięci w czasie rzeczywistym.

Rysunek 5. U dołu panelu Pamięć widać, że strona używa łącznie 43,4 MB pamięci. 209 KB/s oznacza, że całkowite wykorzystanie pamięci wzrasta o 209 KB na sekundę.

Aby śledzić wykorzystanie pamięci w czasie rzeczywistym, użyj też Monitora wydajności.

Prześlij opinię na temat tej nowej funkcji w problemie Chromium o numerze 958177.

Numery portów rejestracji skryptów service worker

Panel Skrypty service worker zawiera teraz w tytułach numery portów, co ułatwia śledzenie, które mechanizmy Service Worker są debugowane.

Porty mechanizmu Service Worker.

Rysunek 6. Porty skryptu service worker.

Prześlij opinię na temat tej zmiany w interfejsie, korzystając z problemu z Chromium nr 601286.

Sprawdzanie zdarzeń pobierania w tle i synchronizacji w tle

Użyj nowej sekcji Usługi w tle w panelu Aplikacja, aby monitorować zdarzenia pobierania w tle i synchronizacji w tle. Zdarzenia pobierania w tle i synchronizacji w tle występują w tle, więc nie byłoby zbyt przydatne, gdyby DevTools rejestrowały tylko zdarzenia pobierania w tle i synchronizacji w tle podczas ich działania. Gdy rozpoczniesz nagrywanie, zdarzenia związane z pobieraniem w tle i synchronizacją w tle będą nadal rejestrowane, nawet po zamknięciu karty i po zamknięciu Chrome.

Przejdź do panelu Aplikacja, otwórz kartę Pobieranie w tle lub Synchronizacja w tle, a następnie kliknij Rejestruj Rekord, aby rozpocząć rejestrowanie zdarzeń. Kliknij wydarzenie, aby wyświetlić więcej informacji na jego temat.

Okienko pobierania w tle.

Rysunek 7. Panel Pobranie w tle. Prezentacja autorstwa Maxim Salnikov.

Okienko Synchronizacja w tle.

Rysunek 8. Panel synchronizacji w tle.

Przesyłaj opinie na temat tych nowych funkcji za pomocą problemu Chromium 927726.

Puppeteer w Firefoksie

Puppeteer dla przeglądarki Firefox to nowy, eksperymentalny projekt, który umożliwia automatyzację przeglądarki Firefox przy użyciu interfejsu Puppeteer API. Innymi słowy, możesz teraz automatyzować Firefoxa i Chromium za pomocą tego samego interfejsu Node API, co zostało pokazane w filmie poniżej.

Po uruchomieniu programu node example.js otworzy się przeglądarka Firefox, a tekst page zostanie wstawiony w polu wyszukiwania w witrynie dokumentacji firmy Puppeteer. Następnie to samo zadanie jest powtarzane w Chromium.

Aby dowiedzieć się więcej o Puppeteer i Puppeteer na Firefoksie, obejrzyj prezentację Puppeteer na koncercie Joel i Andrey z konferencji Google I/O 2019. Premiera Firefoksa odbywa się około 4:05.

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 wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

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

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.