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

Kayce Basques

Nowe funkcje i ważne zmiany w Narzędziach deweloperskich w Chrome 61:

• Symulacja ograniczania urządzenia mobilnego. Aby symulować średniej klasy lub słabsze urządzenia mobilne, ustaw jednocześnie ograniczanie procesora i sieci.
• Wykorzystanie miejsca na dane. Sprawdź, ile miejsca na dane wykorzystuje domena, z podziałem według technologii (IndexedDB, pamięć podręczna, lokalna, sesji itd.).
• Zapisz sygnatury czasowe w pamięci podręcznej. Sprawdź, kiedy skrypt service worker zapisał odpowiedź w pamięci podręcznej.
• Włącz licznik FPS w menu poleceń.
• Zmienianie zachowania kółka myszy i touchpada w panelu Wydajność
• Natywnie debuguj moduły ES6.

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

Symulowanie urządzeń mobilnych niskiej i średniej klasy w trybie urządzenia

Menu Ograniczanie w trybie urządzenia jest teraz wyświetlane domyślnie i umożliwia symulowanie nisko- i średnio-wydajnego urządzenia mobilnego za pomocą kilku kliknięć.

Rysunek 1 Menu ograniczania

Rysunek 2. Aby wyświetlić definicje średnich i niskich urządzeń mobilnych, najedź kursorem na menu Ograniczanie lub otwórz menu Ustawienia rejestrowania.

Wyświetlanie wykorzystania miejsca na dane

Nowa sekcja Wykorzystanie na karcie Wyczyść pamięć w panelu Aplikacja pokazuje, ile miejsca na dane zajmuje źródło, a także maksymalny limit miejsca na dane dla tego źródła na danym urządzeniu.

Rysunek 3. Sekcja Wykorzystanie pokazuje, że https://airhorner.com zużywa 66,9 KB z limitu dostawcy 15214 MB.

Wyświetlanie informacji o tym, kiedy usługa wątek usługi zapisała odpowiedzi w pamięci podręcznej

Nowa kolumna Czas przechowywania w pamięci podręcznej na karcie Pamięć podręczna pokazuje, kiedy usługa workera zapisała odpowiedzi w pamięci podręcznej.

Rysunek 4 Kolumna Czas przechowywania w pamięci podręcznej

Włączanie licznika FPS w menu poleceń

W menu poleceń możesz teraz włączyć licznik FPS.

Rysunek 5. Włączanie licznika FPS w menu poleceń

Konfigurowanie kółka myszy w celu powiększania lub przewijania podczas nagrywania wydajności

Otwórz Ustawienia i ustaw nowe ustawienie Działanie kółka myszy w wykresie słupkowym, aby zmienić sposób działania kółka myszy w panelu Wydajność.

Jeśli na przykład użyjesz kółka myszy w sekcji Główna nagrania lub przesuniesz 2 palcami po trackpadzie, domyślnie nastąpi powiększenie lub pomniejszenie. Gdy zmienisz ustawienie na Przewijanie, gest ten będzie przewijać w górę lub w dół.

Rysunek 6. Ustawienie Działanie kółka myszy na wykresie płomieniowym

Obsługa debugowania w przypadku modułów ES6

Moduł ES6 jest domyślnie dostępny w Chrome 61. W przypadku DevTools nie ma tu zbyt wiele do roboty, poza tym, że debugowanie działa zgodnie z oczekiwaniami. Aby się o tym przekonać, spróbuj ustawić w tym kodzie kilka punktów przerwania i przejść przez TodoMVC, który wykorzystuje implementację ES6-Module Paula Irisha.

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.