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

Kayce Basques

Cześć! Oto nowości w Narzędziach Chrome dla programistów w Chrome 76.

Autouzupełnianie wartości CSS

Podczas dodawania deklaracji stylu do węzła DOM czasami łatwiej jest zapamiętać wartość deklaracji niż jej nazwę. Na przykład podczas pogrubiania węzła <p> wartość bold może być łatwiejsza do zapamiętania niż nazwa font-weight. Interfejs autouzupełniania w panelu Styl obsługuje teraz wartości CSS. Jeśli pamiętasz wartość słowa kluczowego, ale nie pamiętasz nazwy właściwości, spróbuj wpisać wartość. Funkcja autouzupełniania pomoże Ci znaleźć szukaną nazwę.

Rysunek 1. Po wpisaniu znaku bold panel Style automatycznie uzupełni go 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ą, ponieważ 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 uprościć panel Sieć, przenieśliśmy kilka rzadziej używanych opcji do nowego panelu 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ż podsumowanie, Rób zrzuty ekranu. Na rysunku 3 przedstawiono mapowanie starych lokalizacji na nowe.

Rysunek 3. zmapowanie starych lokalizacji na nowe,

Prześlij opinię o tej zmianie interfejsu użytkownika w zgłoszeniu problemu w Chromium nr 892969.

Komunikaty WebSocket w eksportach HAR

Podczas eksportowania pliku HAR z panelu Sieć w celu udostępnienia dzienników 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 zgłoszeniu Chromium nr 496006.

Przyciski importowania i eksportowania plików HAR

Łatwiej udostępniaj dzienniki sieci współpracownikom dzięki nowym przyciskom Eksportuj wszystko jako HAR z zawartością i Importuj plik HAR . Importowanie i eksportowanie plików HAR jest dostępne w Narzędziach deweloperskich od dłuższego czasu. Nowością są bardziej widoczne przyciski.

Rysunek 4. Nowe przyciski HAR.

Prześlij opinię o tej zmianie interfejsu użytkownika w zgłoszeniu Chromium nr 904585.

Łączne wykorzystanie pamięci w czasie rzeczywistym

Panel Pamięć pokazuje teraz łą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 wykorzystanie pamięci wzrasta o 209 KB na sekundę.

Aby śledzić wykorzystanie pamięci w czasie rzeczywistym, zapoznaj się też z monitorem wydajności.

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

Numery portów rejestracji skryptu service worker

Panel Service Workers zawiera teraz w tytułach numery portów, co ułatwia śledzenie, którego service workera debugujesz.

Rysunek 6. Porty skryptu service worker.

Prześlij opinię o tej zmianie interfejsu w zgłoszeniu Chromium nr 601286.

Sprawdzanie zdarzeń pobierania w tle i synchronizacji w tle

W nowej sekcji Usługi w tle w panelu Aplikacja możesz monitorować zdarzenia Pobieranie w tle i Synchronizacja w tle. Zdarzenia pobierania w tle i synchronizacji w tle występują w tle, więc rejestrowanie ich przez Narzędzia deweloperskie tylko wtedy, gdy są one otwarte, nie byłoby zbyt przydatne. Dlatego po rozpoczęciu nagrywania zdarzenia Background Fetch i Background Sync będą nadal rejestrowane, nawet po zamknięciu karty i przeglądarki Chrome.

Otwórz panel Application (Aplikacja), a następnie kartę Background Fetch (Pobieranie w tle) lub Background Sync (Synchronizacja w tle). Potem kliknij Record , aby rozpocząć rejestrowanie zdarzeń. Kliknij zdarzenie, aby wyświetlić więcej informacji na jego temat.

Rysunek 7. Panel Pobranie w tle. Demo autorstwa Maxima Salnikova.

Rysunek 8. Panel Synchronizacja w tle.

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

Puppeteer dla Firefoxa

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

Po uruchomieniu polecenia node example.js otworzy się Firefox, a w polu wyszukiwania w witrynie z dokumentacją Puppeteer pojawi się tekst page. Następnie to samo zadanie jest powtarzane w Chromium.

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

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają 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 tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

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