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

Kayce Basques

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

Autouzupełnianie z wartościami usługi porównywania cen

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 w panelu Style 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. Po wpisaniu bold panel Stylów automatycznie uzupełnia 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 uporządkować panel Sieć, kilka rzadziej używanych opcji zostało przeniesionych do nowego panelu Przycisk Ustawienia sieciUstawienia sieci.

Ustawienia sieci

Rysunek 2. Ustawienia sieci.

Do Ustawień sieci zostały przeniesione te opcje: Użyj dużych wierszy żądania, 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 interfejsu, korzystając z problemu w Chromium o numerze 892969.

Komunikaty WebSocket w eksportowanych plikach 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 dzienniki sieci współpracownikom dzięki nowym przyciskom 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 interfejsu na problem w Chromium o numerze 904585.

Łą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 łączne zużycie 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

W panelu Pracownicy usług w tytułach widnieją teraz numery portów, co ułatwia śledzenie, którego pracownika usługi debugujesz.

Porty skryptu service worker.

Rysunek 6. Porty skryptu service worker.

Prześlij opinię na temat tej zmiany interfejsu, korzystając z problemu w Chromium o numerze 601286.

Sprawdzanie zdarzeń pobierania w tle i synchronizacji w tle

W nowej sekcji Usługi w tle na panelu Aplikacja możesz sprawdzać zdarzenia Pobieranie w tle i Synchronizacja 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.

Otwórz panel Aplikacja, przejdź na kartę Pobieranie w tle lub Synchronizacja w tle, a potem kliknij Rejestruj Rekord, aby rozpocząć rejestrowanie zdarzeń. Kliknij zdarzenie, aby wyświetlić więcej informacji.

Panel Pobranie w tle.

Rysunek 7. Panel Pobranie w tle. Prezentacja przygotowana przez Maxima Salnikova.

Panel synchronizacji 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 for Firefox to nowy eksperymentalny projekt, który umożliwia automatyzację przeglądarki Firefox za pomocą 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 node example.js otwiera się Firefox, a tekst page jest wstawiany do pola wyszukiwania na stronie dokumentacji Puppeteer. Następnie to samo zadanie jest powtarzane w Chromium.

Aby dowiedzieć się więcej o Puppeteer i Puppeteer for Firefox, obejrzyj prezentację Joel i Andreya z Google I/O 2019. Ogłoszenie dotyczące Firefoksa pojawia się około 4:05.

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. 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

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

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