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

Przy dodawaniu deklaracji stylu do węzła DOM czasami łatwiej jest zapamiętać wartość deklaracji. niż nazwa deklaracji. Na przykład jeśli pogrubisz węzeł <p>, wartość bold może być taka: jest łatwiejsze do zapamiętania niż nazwa font-weight. Interfejs autouzupełniania panelu Styl obsługuje teraz CSS . Jeśli pamiętasz jaką wartość słowa kluczowego, ale nie pamiętasz nazwy właściwości, spróbuj wpisanie wartości i autouzupełnianie pomoże Ci znaleźć odpowiednią nazwę.

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

Prześlij opinię na temat tej nowej funkcji do problemu nr 931145 w Chromium.

Nowy interfejs ustawień sieci

Poprzednio w panelu Sieć występował problem z obsługą, w którym takie opcje jak menu ograniczania były nieosiągalny, gdy okno Narzędzi deweloperskich było wąskie. Aby rozwiązać ten problem i usunąć bałagan w panelu Sieć, kilka rzadziej używanych opcji zostało przeniesionych do nowych Ustawień sieci panel.

Rysunek 2. Ustawienia sieci.

Następujące opcje zostały przeniesione do sekcji Network Settings (Ustawienia sieci): Use Large Request Rows (Użyj dużych wierszy żądania), Group by (Grupuj według) Ramka, Pokaż przegląd, Zrób zrzuty ekranu. Rysunek 3 mapuje stare lokalizacje na nowe tych.

Rysunek 3. Mapowanie starych lokalizacji do nowych.

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ć w celu udostępnienia dzienników sieciowych współpracownikom: plik HAR zawiera teraz wiadomości WebSocket. Właściwość _webSocketMessages zaczyna się od podkreślenie, ż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 do problemu nr 496006 w Chromium.

Przyciski importowania i eksportowania HAR

Łatwiej udostępniaj logi sieciowe współpracownikom dzięki nowej funkcji Eksportuj wszystko jako plik HAR z treścią i Importuj plik HAR Przyciski: . Importowanie i eksportowanie HAR były dostępne w Narzędziach deweloperskich już od jakiegoś czasu. Nowa funkcja ułatwia znalezienie przycisków.

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 całkowite wykorzystanie pamięci w czasie rzeczywistym.

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

Zapoznaj się też z artykułem Monitor wydajności, aby śledzić wykorzystanie pamięci w czasie rzeczywistym.

Prześlij opinię na temat tej nowej funkcji do problemu nr 958177 w Chromium.

Numery portów rejestracji mechanizmów Service Worker

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

Rysunek 6. Porty mechanizmu Service Worker.

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

Sprawdź zdarzenia pobierania w tle i synchronizacji w tle

Użyj nowej sekcji Usługi w tle w panelu Aplikacja, aby monitorować opcję Tło Zdarzenia pobierania i synchronizacji w tle. Biorąc pod uwagę, że zdarzenia pobierania w tle i synchronizacji w tle występują w... No... w tle, nie byłoby zbyt przydatne, gdyby Narzędzia deweloperskie zarejestrowały tylko tło Zdarzenia pobierania i synchronizacji w tle, gdy Narzędzia deweloperskie były otwarte. Po rozpoczęciu nagrywania funkcja Tło Zdarzenia pobierania i synchronizacji w tle będą nadal rejestrowane, nawet po zamknięciu karty. nawet po zamknięciu Chrome.

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

Rysunek 7. Okienko pobierania w tle. Demonstracja autorstwa Maksima Salnikowa.

Rysunek 8. Okienko Synchronizacja w tle.

Prześlij opinię na temat tych nowych funkcji do problemu z Chromium nr 927726.

Puppeteer dla Firefoxa

Puppeteer dla Firefoksa to nowy, eksperymentalny projekt, który pozwala zautomatyzować API Puppeteer. Innymi słowy, możesz teraz zautomatyzować Firefoksa i Chromium przy użyciu tego samego interfejsu Node API, na filmie poniżej.

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

Obejrzyj prezentację Puppeteer prowadzonych przez Joel i Andreya z Google I/O 2019, aby dowiedzieć się więcej: Puppeteer i Puppeteer w przeglądarce Firefox. 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 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   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o 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.