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

Kayce Basques

Witamy z powrotem. Nowe funkcje w Narzędziach deweloperskich w Chrome 63:

• Obsługa debugowania zdalnego wielu klientów.
• Workspaces 2.0.
• 4 nowe kontrole.
• Symulowanie powiadomień push za pomocą danych niestandardowych.
• Wywoływanie zdarzeń synchronizacji w tle za pomocą tagów niestandardowych

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

Obsługa debugowania zdalnego wielu klientów

Jeśli kiedykolwiek próbowałeś debugować aplikację w IDE, takim jak VS Code czy WebStorm, prawdopodobnie zauważyłeś, że otwarcie DevTools zakłóca sesję debugowania. Z powodu tego problemu nie można było też używać Narzędzi deweloperskich do debugowania testów WebDriver.

Od wersji 63 Chrome narzędzia deweloperskie domyślnie obsługują wielu klientów zdalnego debugowania bez konieczności konfiguracji.

Zdalne debugowanie wielu klientów było najpopularniejszym problemem w Narzędziach deweloperskich na stronie crbug.com i trzecim najpopularniejszym w całym projekcie Chromium. Obsługa wielu klientów otwiera też wiele interesujących możliwości integracji innych narzędzi z DevTools lub korzystania z nich w nowy sposób. Na przykład:

• Klienci protokołu, tacy jak ChromeDriver czy rozszerzenia do debugowania Chrome w przypadku VS Code i Webstorm, oraz klienci WebSocket, tacy jak Puppeteer, mogą teraz działać jednocześnie z Narzędziami deweloperskimi.
• 2 oddzielne klienty protokołu WebSocket, takie jak Puppeteer czy 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ć jednocześnie z Narzędziami deweloperskimi.
• Wiele różnych rozszerzeń Chrome może teraz jednocześnie korzystać z interfejsu API chrome.debugger na tej samej karcie.

Workspaces 2.0

Obszary robocze są dostępne w Narzędziach deweloperskich od jakiegoś czasu. Ta funkcja umożliwia korzystanie z Narzędzi deweloperskich jako IDE. Wprowadzasz zmiany w kodzie źródłowym w Narzędziach deweloperskich, a zmiany są zachowywane w lokalnej wersji projektu w systemie plików.

Workspaces 2.0 opiera się na wersji 1.0, ale oferuje bardziej przydatne wrażenia użytkownika i ulepszoną automatyczną mapowanie transpilowanego kodu. Pierwotnie planowaliśmy udostępnić tę funkcję wkrótce po szczycie Chrome Developer Summit (CDS) 2016, ale zespół przełożył to na później, aby rozwiązać kilka problemów.

Aby zobaczyć, jak działa Workspaces 2.0, obejrzyj część dotyczącą tworzenia (około 14:28) z wykładu na temat DevTools z konferencji CDS 2016.

4 nowe audyty

W Chrome 63 w panelu Kontrola znajdziesz 4 nowe kontrole:

• wyświetlać obrazy w formacie WebP;
• Używaj obrazów o odpowiednich współczynnikach proporcji.
• Unikaj bibliotek JavaScript interfejsu użytkownika, które mają znane luki w zabezpieczeniach.
• Błędy przeglądarki zostały zarejestrowane w konsoli.

Aby dowiedzieć się, jak za pomocą panelu audyt poprawić jakość swoich stron, przeczytaj artykuł Uruchamianie Lighthouse w Narzędziach deweloperskich w Chrome.

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

Symulowanie powiadomień push za pomocą danych niestandardowych

Symulowanie powiadomień push jest dostępne w DevTools od jakiegoś czasu, ale z jednym ograniczeniem: nie można wysyłać danych niestandardowych. Teraz, dzięki nowemu polu tekstowemu Push, które pojawi się w panelu Workera usługi w Chrome 63, możesz to zrobić. Wypróbuj tę funkcję już teraz:

1. Przejdź do demonstracji prostego powiadomienia push.
2. Kliknij Włącz powiadomienia push.
3. Gdy Chrome poprosi o zezwolenie na wyświetlanie powiadomień, kliknij Zezwól.
4. Otwórz Narzędzia deweloperskie.
5. Otwórz panel Service Workers.

6. Wpisz coś w polu tekstowym Push.

   

   Rysunek 1 Symulowanie powiadomienia push za pomocą danych niestandardowych w polu tekstowym Push w panelu Service Worker

7. Aby wysłać powiadomienie, kliknij Push.

   

   Rysunek 2. Symulowane powiadomienie push

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

Zdarzenia synchronizacji w tle można też od jakiegoś czasu uruchamiać w panelu Workery usługi, ale teraz możesz wysyłać tagi niestandardowe:

1. Otwórz Narzędzia deweloperskie.
2. Otwórz panel Service Workers.
3. Wpisz tekst w polu tekstowym Synchronizuj.
4. Kliknij Synchronizuj.

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

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

• Przesyłaj opinie 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.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.