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

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

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

Pomoc przy zdalnym debugowaniu multiklientów

Jeśli próbowałeś/próbowałaś debugować aplikację w IDE, np. VS Code lub WebStorm, pewnie wiesz, że otwarcie narzędzi deweloperskich psuje sesję debugowania. Utrudniał również debugowanie testów WebDriver przy użyciu Narzędzi deweloperskich.

Od wersji Chrome 63 Narzędzia deweloperskie domyślnie obsługują wiele klientów zdalnego debugowania, więc nie trzeba niczego konfigurować.

Zdalne debugowanie multiklientów było najpopularniejszym problemem w Narzędziach deweloperskich w witrynie crbug.com i numerem 3 w całym projekcie Chromium. Obsługa multiklientów otwiera też całkiem nowe możliwości integracji innych narzędzi z Narzędziami deweloperskimi lub korzystania z tych narzędzi w nowy sposób. Na przykład:

  • Klienty protokołów, takie jak ChromeDriver lub rozszerzenia do debugowania Chrome dla VS Code i WebSocket, a także klienty WebSocket, takie jak Puppeteer, mogą teraz działać jednocześnie z Narzędziami deweloperskimi.
  • Dwa oddzielne klienty protokołu WebSocket, takie jak Puppeteer i 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 na tej samej karcie może teraz korzystać jednocześnie wiele różnych rozszerzeń do Chrome.

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 IDE. Po wprowadzeniu pewnych zmian w kodzie źródłowym w narzędziach deweloperskich zostaną one zachowane w 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 po transpilacji kodu. Początkowo ta funkcja miała zostać udostępniona niedługo po Chrome Developer Summit (CDS) 2016, ale zespół przełożył to na rozwiązanie pewnych problemów.

Obejrzyj fragment o tworzeniu (ok. 14:28) prezentacji z narzędzi deweloperskich z CDS 2016, aby zobaczyć, jak działa Workspaces 2.0.

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, które mają znane luki 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 do poprawiania 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 można wysyłać niestandardowych danych. Jednak dzięki nowemu polu tekstowemu Push w panelu Service Worker w Chrome 63 jest to już możliwe. 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.

    Symulowanie powiadomienia push z użyciem niestandardowych danych.

    Rysunek 1. Symulowanie powiadomienia push z danymi niestandardowymi za pomocą pola tekstowego Push w panelu skryptu service worker

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

    symulowane powiadomienie push,

    Rysunek 2. symulowane powiadomienie push,

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

Od jakiegoś czasu możesz wywoływać zdarzenia synchronizacji w tle w panelu Skrypty service worker, ale teraz możesz wysyłać tagi niestandardowe:

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

Aktywowanie niestandardowego zdarzenia synchronizacji w tle

Rysunek 3. Po kliknięciu Synchronizuj Narzędzia deweloperskie wysyłają zdarzenie synchronizacji w tle z tagiem niestandardowym update-content do mechanizmu 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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59