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

Kayce Basques

Witamy z powrotem. Nowe funkcje Narzędzi deweloperskich w Chrome 63 to między innymi:

• Obsługa zdalnego debugowania w przypadku wielu klientów.
• Obszary robocze 2.0.
• 4 nowe audyty.
• Symuluj powiadomienia push na podstawie danych niestandardowych.
• Wywoływanie zdarzeń synchronizacji w tle za pomocą tagów niestandardowych

Aby dowiedzieć się więcej, przeczytaj lub obejrzyj film poniżej.

Pomoc przy zdalnym debugowaniu multiklientów

Jeśli zdarzyło Ci się już debugować aplikację w IDE, np. VS Code czy WebStorm, odkrył, że otwarcie Narzędzi deweloperskich psuje sesję debugowania. Ten problem uniemożliwił też za pomocą Narzędzi deweloperskich do debugowania testów WebDriver.

Od wersji Chrome 63 Narzędzia deweloperskie domyślnie obsługują wiele klientów debugowania zdalnego. .

Zdalne debugowanie multiklientów było najpopularniejszym problemem w Narzędziach deweloperskich w witrynie crbug.com. numer 3 w całym projekcie Chromium. Obsługa wielu klientów otwiera też całkiem sporo do integracji innych narzędzi z Narzędziami deweloperskimi kilka sposobów. Na przykład:

• klienty protokołów, takie jak ChromeDriver lub rozszerzenia do debugowania Chrome dla VS Code i WebStorm, Klienty WebSocket, takie jak Puppeteer, mogą teraz działać jednocześnie z Narzędziami deweloperskimi.
• dwa oddzielne klienty protokołu WebSocket, takie jak Puppeteer lub chrome-remote-interface; mogą teraz łączyć się z tą samą kartą jednocześnie.
• Rozszerzenia do Chrome korzystające z interfejsu API chrome.debugger mogą teraz działać w tym samym czasie co Narzędzia deweloperskie.
• Z interfejsu API chrome.debugger w tej samej karcie może teraz korzystać wiele różnych rozszerzeń do Chrome jednocześnie.

Obszary robocze 2.0

Obszary robocze są dostępne od jakiegoś czasu w Narzędziach deweloperskich. Ta funkcja pozwala używać Narzędzi deweloperskich jako: w Twoim IDE. Wprowadzasz zmiany w kodzie źródłowym w Narzędziach deweloperskich, które pozostają w interfejsie lokalnej wersji projektu w systemie plików.

Workspaces 2.0 opiera się na wersji 1.0, co zapewnia bardziej przydatny interfejs i ulepszone automatyczne mapowanie danych transpilowanych w kodzie. Początkowo ta funkcja miała zostać udostępniona wkrótce po Chrome Developer Summit (CDS) 2016, ale zespół przełożył to na rozwiązanie pewnych problemów.

Zajrzyj do sekcji „Tworzenie” (ok. 14:28) narzędzia deweloperskiego z prezentacji CDS 2016 na temat Workspace 2.0 w praktyce.

4 nowe audyty

W Chrome 63 panel Kontrole zawiera 4 nowe kontrole:

• Wyświetlaj obrazy w formacie WebP.
• Używaj obrazów o odpowiednich formatach obrazu.
• Unikaj bibliotek JavaScript frontendu ze znanymi lukami w zabezpieczeniach.
• Błędy przeglądarki zarejestrowane w konsoli.

Przeczytaj artykuł Uruchamianie narzędzia Lighthouse w Narzędziach deweloperskich w Chrome, by dowiedzieć się, jak korzystać z panelu Kontrole, aby poprawić jakości stron.

Aby dowiedzieć się więcej o projekcie, który wykorzystuje panel Audyty, zapoznaj się z artykułem Lighthouse.

Symuluj powiadomienia push na podstawie danych niestandardowych

Symulowanie powiadomień push jest dostępne od jakiegoś czasu w Narzędziach deweloperskich z jednym ograniczeniem: nie udało się wysłać danych niestandardowych. Jednak wraz z nowym polem tekstowym Push dostępnym w panelu Skrypt service worker w Chrome 63. Wypróbuj tę funkcję już teraz:

1. Przejdź do wersji demonstracyjnej Simple Push.
2. Kliknij Włącz powiadomienia push.
3. Gdy Chrome poprosi o zezwolenie na powiadomienia, kliknij Zezwól.
4. Otwórz Narzędzia deweloperskie.
5. Otwórz panel Skrypty service worker.

6. Napisz coś w polu tekstowym Push.

   

   Rysunek 1. Symulowanie powiadomienia push z użyciem niestandardowych danych w polu tekstowym Push w Panel skryptu Service Worker

7. Kliknij Push, aby wysłać powiadomienie.

   

   Rysunek 2. symulowane powiadomienie push,

Aktywowanie zdarzeń synchronizacji w tle za pomocą tagów niestandardowych

Aktywowanie zdarzeń synchronizacji w tle przez jakiś czas odbywa się też w panelu Skrypty service worker, ale Teraz możesz wysyłać niestandardowe tagi:

1. Otwórz Narzędzia deweloperskie.
2. Otwórz panel Skrypty service worker.
3. Wpisz tekst w polu tekstowym Synchronizacja.
4. Kliknij Sync (Synchronizuj).

Rysunek 3. Po kliknięciu Synchronizuj Narzędzia deweloperskie wysyłają zdarzenie synchronizacji w tle z tagiem niestandardowym. Skrypt update-content dla skryptu service worker

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.