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

Kayce Basques

Witamy z powrotem Nowe funkcje, które pojawią się w Narzędziach deweloperskich w Chrome 63, to:

• Obsługa debugowania zdalnego na wielu klientach.
• Workspaces 2.0.
• 4 nowe kontrole.
• Symulowanie powiadomień push z danymi niestandardowymi
• Aktywowanie zdarzeń synchronizacji w tle za pomocą tagów niestandardowych

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

Obsługa zdalnego debugowania wielu klientów

Jeśli kiedykolwiek zdarzyło Ci się debugować aplikację w środowisku IDE, takim jak VS Code czy WebStorm, prawdopodobnie wiesz, że otwarcie Narzędzi deweloperskich powoduje przerwanie sesji debugowania. Ten problem uniemożliwiał też debugowanie testów WebDrivera za pomocą Narzędzi deweloperskich.

Od Chrome 63 narzędzia deweloperskie domyślnie obsługują wielu klientów debugowania zdalnego i nie wymagają konfiguracji.

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

• Klienci protokołów, np. ChromeDriver czy rozszerzenia do debugowania Chrome w VS Code i Webstorm, oraz klienci WebSocket, np. 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 Chrome korzystające z interfejsu API chrome.debugger mogą teraz działać w tym samym czasie co Narzędzia deweloperskie.
• Wiele różnych rozszerzeń Chrome może teraz jednocześnie używać interfejsu chrome.debugger na tej samej karcie.

Obszary robocze 2.0

Obszary robocze są dostępne w Narzędziach deweloperskich od jakiegoś czasu. Ta funkcja umożliwia używanie 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.

Obszary robocze 2.0 są rozwinięciem wersji 1.0. Zapewniają bardziej przydatny interfejs i ulepszone automatyczne mapowanie skompilowanego kodu. Ta funkcja miała zostać udostępniona wkrótce po konferencji Chrome Developer Summit (CDS) w 2016 r., ale zespół odłożył jej wprowadzenie, aby rozwiązać pewne problemy.

Obejrzyj fragment prezentacji o narzędziach deweloperskich z konferencji CDS 2016 (około 14:28) poświęcony tworzeniu, aby zobaczyć, jak działają obszary robocze 2.0.

4 nowe audyty

W Chrome 63 panel Audyty zawiera 4 nowe audyty:

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

Więcej informacji o korzystaniu z panelu Audyty w celu poprawy jakości stron znajdziesz w artykule Uruchamianie Lighthouse w Narzędziach deweloperskich w Chrome.

Więcej informacji o projekcie, który obsługuje panel Audyty, znajdziesz w artykule Lighthouse.

Symulowanie powiadomień push z danymi niestandardowymi

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

1. Otwórz Simple Push Demo (Proste powiadomienia push – wersja demonstracyjna).
2. Kliknij Włącz powiadomienia push.
3. Gdy Chrome poprosi Cię o zezwolenie na powiadomienia, kliknij Zezwól.
4. Otwórz Narzędzia deweloperskie.
5. Otwórz panel Service Workers (Worker usług).

6. Wpisz coś w polu tekstowym Push.

   

   Rysunek 1. Symulowanie powiadomienia push z danymi niestandardowymi za pomocą pola tekstowego Push w panelu Service Worker

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

   

   Rysunek 2. Symulowane powiadomienie push

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

Uruchamianie zdarzeń synchronizacji w tle jest już od jakiegoś czasu możliwe w panelu Service Workers, ale teraz możesz wysyłać tagi niestandardowe:

1. Otwórz Narzędzia deweloperskie.
2. Otwórz panel Service Workers (Worker usług).
3. Wpisz tekst w polu tekstowym Synchronizacja.
4. Kliknij Synchronizuj.

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

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.

• 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.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube 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.