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

Kayce Basques
Kayce Basques
X GitHub

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ę.

Po wpisaniu słowa „bold” w panelu Style pojawi się autouzupełnianie „font-weight: bold”.

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.Przycisk Ustawienia 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ż podsumowanie, Rób zrzuty ekranu. Na rysunku 3 przedstawiono mapowanie starych lokalizacji na nowe.

zmapowanie starych lokalizacji na nowe,

Rysunek 3. zmapowanie starych lokalizacji na nowe,

Prześlij opinię o tej zmianie interfejsu na stronie Chromium issue #892969.

Komunikaty WebSocket w eksportowanych plikach 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 współpracownikom logi sieciowe dzięki nowym przyciskom Eksportuj wszystko jako HAR z zawartością Eksportuj i Importuj plik HAR Importuj. Importowanie i eksportowanie plików HAR jest dostępne w Narzędziach deweloperskich od dłuższego czasu. Nowością są bardziej widoczne przyciski.

Nowe przyciski HAR.

Rysunek 4. Nowe przyciski HAR.

Prześlij opinię o tej zmianie interfejsu do Chromium issue #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, możesz też użyć Monitora 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.

Porty skryptu service worker.

Rysunek 6. Porty skryptu service worker.

Prześlij opinię o tej zmianie interfejsu użytkownika 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 tylko wtedy, gdy Narzędzia deweloperskie są 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 (Rejestruj) Nagraj, aby rozpocząć rejestrowanie zdarzeń. Kliknij zdarzenie, aby wyświetlić więcej informacji na jego temat.

Panel Pobranie w tle.

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

Panel Synchronizacja w tle.

Rysunek 8. Panel Synchronizacja w tle.

Opinie o tych nowych funkcjach możesz przesyłać w zgłoszeniu problemu w Chromium o numerze 927726.

Puppeteer dla Firefoksa

Puppeteer dla Firefoxa to nowy projekt eksperymentalny, który umożliwia automatyzację Firefoxa 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 zostanie wstawiony 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.

Kontakt 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.

Co nowego w Narzędziach deweloperskich

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