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

Kayce Basques
Kayce Basques
X GitHub

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

Autouzupełnianie wartościami CSS

Podczas dodawania deklaracji stylu do węzła DOM czasami łatwiej jest zapamiętać wartość deklaracji niż jej nazwę. Na przykład, gdy 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, jaką wartość słowa kluczowego chcesz wpisać, ale nie pamiętasz nazwy właściwości, spróbuj wpisać wartość, a autouzupełnianie powinno pomóc Ci znaleźć nazwę, której szukasz.

Po wpisaniu „bold” panel Style automatycznie uzupełnia tekst do „font-weight: bold”.

Rysunek 1. Po wpisaniu bold panel Style automatycznie uzupełnia tekst do font-weight: bold.

Prześlij opinię o tej nowej funkcji w zgłoszeniu problemu z Chromium nr 931145.

Nowy interfejs ustawień sieci

W panelu Sieć występował wcześniej problem z użytecznością, który polegał na tym, że opcje takie jak menu ograniczania przepustowości 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 Ustawienia sieci Przycisk ustawień sieci.

Ustawienia sieci

Rysunek 2. Ustawienia sieci.

Te opcje zostały przeniesione do Ustawień sieci: Używaj dużych wierszy żądań, Grupuj według ramki, Pokaż przegląd, Zrób zrzuty 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 w problemie Chromium nr 892969.

Wiadomości WebSocket w eksportowanych plikach HAR

Gdy eksportujesz plik HAR z panelu Sieć, aby udostępnić dzienniki sieci współpracownikom, plik HAR zawiera teraz wiadomości 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 w problemie Chromium nr 496006.

Przyciski importowania i eksportowania plików HAR

Dzięki nowym przyciskom Zapisz wszystko jako HAR z zawartością Eksportuj i Importuj plik HAR Importuj możesz łatwiej udostępniać dzienniki sieci współpracownikom. Importowanie i eksportowanie plików HAR jest już od jakiegoś czasu dostępne w Narzędziach deweloperskich. 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 w problemie Chromium nr 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 wykorzystuje łącznie 43,4 MB pamięci. 209 KB/s oznacza, że całkowite wykorzystanie pamięci zwiększa się o 209 KB na sekundę.

Zobacz też Monitor wydajności, który umożliwia śledzenie wykorzystania pamięci w czasie rzeczywistym.

Prześlij opinię na temat tej nowej funkcji w zgłoszeniu problemu z Chromium nr 958177.

Numery portów rejestracji skryptu service worker

Panel Skrypty service worker zawiera teraz numery portów w tytułach, co ułatwia śledzenie, który skrypt service worker jest debugowany.

Porty skryptu service worker.

Rysunek 6. Porty skryptu service worker.

Prześlij opinię na temat tej zmiany interfejsu w problemie z Chromium nr 601286.

Sprawdzanie zdarzeń pobierania i synchronizacji w tle

Użyj nowej sekcji Usługi w tle w panelu Aplikacja, aby monitorować zdarzenia Background Fetch i Background Sync. Zdarzenia pobierania i synchronizacji w tle występują w tle, więc nie byłoby zbyt przydatne, gdyby Narzędzia deweloperskie rejestrowały je tylko wtedy, gdy są otwarte. Po rozpoczęciu nagrywania zdarzenia Background Fetch i Background Sync będą nadal rejestrowane, nawet po zamknięciu karty i Chrome.

Otwórz panel Aplikacja, a następnie kartę Pobieranie w tle lub Synchronizacja w tle i kliknij Nagraj Nagraj, aby rozpocząć rejestrowanie zdarzeń. Kliknij wydarzenie, aby wyświetlić więcej informacji na jego temat.

Panel Pobieranie w tle.

Rysunek 7. Panel Pobieranie w tle. Wersja demonstracyjna: Maxim Salnikov.

Panel Synchronizacja w tle.

Rysunek 8. Panel Synchronizacja w tle.

Prześlij opinię o tych nowych funkcjach w zgłoszeniu problemu z Chromium nr 927726.

Puppeteer dla Firefoksa

Puppeteer for Firefox to nowy eksperymentalny projekt, który umożliwia automatyzację Firefoksa za pomocą interfejsu Puppeteer API. Innymi słowy, możesz teraz zautomatyzować Firefoksa i Chromium za pomocą tego samego interfejsu Node API, jak pokazano na filmie poniżej.

Po uruchomieniu skryptu node example.js otwiera się Firefox, a w polu wyszukiwania na stronie dokumentacji Puppeteer pojawia się tekst page. Następnie to samo zadanie jest powtarzane w Chromium.

Obejrzyj prezentację na temat Puppeteera, którą Joel i Andrey przedstawili na konferencji Google I/O 2019, aby dowiedzieć się więcej o Puppeteerze i Puppeteerze dla Firefoksa. Ogłoszenie dotyczące Firefoksa pojawia się około 4:05.

Pobieranie kanałów podglądu

Rozważ użycie Chrome 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 pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Skontaktuj się z zespołem Narzędzi deweloperskich w Chrome

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

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.