Hallo! Tu jeszcze raz Kayce – autorka tekstów technicznych w Narzędziach deweloperskich. W związku z tym podsumowaniem narzędzi dla deweloperów chcę je trochę zmienić i przygotować podsumowanie kilku ulepszeń w narzędziach deweloperskich dostępnych w ostatnich wersjach Chrome.
Wszystkie funkcje są już dostępne w wersji stabilnej Chrome, chyba że wskazano inaczej.
Ograniczanie wykorzystania procesora w świecie urządzeń mobilnych
Dostępne w Chrome 54 (obecnie Canary).
Oprogramowanie zabija świat, a telefony komórkowe – oprogramowanie. Narzędzia deweloperskie stale się zmieniają, aby lepiej zaspokajać potrzeby środowiska programistycznego nastawionego na urządzenia mobilne. Najnowsze wprowadzone w narzędziach deweloperskich narzędzia zoptymalizowane pod kątem urządzeń mobilnych to ograniczanie wykorzystania procesora. Dzięki tej funkcji możesz lepiej poznać wydajność witryny na urządzeniach z ograniczonymi zasobami.
Wybierz jedną z opcji z menu Ograniczanie procesora w panelu Oś czasu, aby ograniczyć moc obliczeniową komputera, którego używasz.
![ALT_TEXT_HERE](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/alttexthere-4d2a07a478acb.png?authuser=9&hl=pl)
Kilka uwag na temat ograniczania wykorzystania procesora:
- Ograniczanie zaczyna obowiązywać od razu i trwa, dopóki go nie wyłączysz, tak samo jak w przypadku ograniczania przepustowości sieci.
- Ta funkcja pozwala ogólnie określić, jak powinna działać witryna na urządzeniu o ograniczonych zasobach. Narzędzia deweloperskie nie są w stanie w pełni naśladować wydajności urządzeń mobilnych.
- Ograniczanie jest zależne od komputera, którego używasz do programowania. Oznacza to, że 5-krotne ograniczanie w przypadku zaawansowanych komputerów stacjonarnych daje inne wyniki niż 5-krotne ograniczanie w przypadku pięcioletniego, budżetowego laptopa.
Mimo to jeśli połączysz ograniczanie wykorzystania procesora z funkcją ograniczania sieci i trybem urządzenia, zyskasz lepszy wgląd w wygląd i wydajność witryny na urządzeniach mobilnych bezpośrednio w przeglądarce komputera.
Widok sieci w nagraniach osi czasu
Aby sprawdzić, jak strona pobiera zasoby, podczas nagrywania na osi czasu zaznacz pole wyboru Sieć. Kliknij zasób, aby w panelu Podsumowanie wyświetlić więcej informacji na jego temat.
![Widok sieci na osi czasu](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/network-view-timeline-b37a7ed4d8b.png?authuser=9&hl=pl)
Szczególnie przydatne jest pole Inicjator w podsumowaniu. To pole informuje o miejscu żądania zasobu.
Pasywne detektory zdarzeń
Pasywne detektory zdarzeń to nowy standard poprawiający wydajność przewijania. Przeczytaj ten artykuł, aby dowiedzieć się więcej:
Ulepszanie wydajności przewijania za pomocą pasywnych detektorów zdarzeń
W Narzędziach deweloperskich wprowadziliśmy kilka funkcji, które pomogą Ci znaleźć słuchaczy, którym {passive: true}
przyda się odrobina Twojej uznania.
Przede wszystkim konsola wyświetla ostrzeżenie, gdy synchroniczny detektor blokuje przewijanie strony przez bezzasadny czas.
![Ostrzeżenie synchronicznego detektora](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/synchronous-listener-warn-0e6fbc2a7bf36.png?authuser=9&hl=pl)
Możesz to sprawdzić samodzielnie w tej prezentacji:
Zacinanie się z powodu demonstracji obsługi dotyku/kółka
Następnie możesz skorzystać z menu w panelu Detektory zdarzeń, aby przefiltrować detektory pasywne lub blokujące.
![Filtr biernych detektorów](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/passive-listeners-filter-dec2e483dc09.png?authuser=9&hl=pl)
Możesz też przełączyć stan pasywnego lub blokującego detektora, najeżdżając na niego kursorem i klikając Toggle Passive (Przełącz pasywny). Ta funkcja jest obecnie ograniczona do detektorów zdarzeń touchstart
, touchmove
, mousewheel
i wheel
.
![Przełącz pasywny](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/toggle-passive-5b52cd4553b19.png?authuser=9&hl=pl)
Na koniec skorzystam z małej podpowiedzi. Aby zobaczyć wizualizację potencjalnych problemów z przewijaniem, zaznacz pole wyboru Problemy z wydajnością przewijania w panelu renderowania. Jeśli sekcja strony jest podświetlona, oznacza to, że jest z nią powiązany detektor, który może negatywnie wpłynąć na szybkość przewijania.
![Wersja demonstracyjna problemów z wydajnością przewijania](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/scrolling-performance-iss-b5baa74fac517.gif?authuser=9&hl=pl)
Grupuj według aktywności
W połowie czerwca w panelu Drzewo połączeń w panelu Oś czasu pojawiła się nowa kategoria sortowania: Grupuj według aktywności. Dzięki temu możesz sprawdzić, ile czasu Twoja strona poświęciła na analizowanie kodu HTML, ocenę skryptów, malowanie itd.
![Grupuj według aktywności](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/group-activity-28e0f3f6c9ebf.png?authuser=9&hl=pl)
Statystyki osi czasu w panelu Źródła
Utwórz nagranie na osi czasu z włączoną opcją Profil JS. Czas wykonywania możesz sprawdzić w panelu Źródła z podziałem na poszczególne funkcje.
![Statystyki osi czasu w panelu Źródła](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/timeline-stats-sources-p-d1443a034c712.png?authuser=9&hl=pl)
Podziel się swoją opinią
Jak zawsze, chętnie poznamy Twoje opinie i pomysły dotyczące Narzędzi deweloperskich.
- Odwiedź ChromeDevTools na Twitterze, aby zadać krótkie pytania, podzielić się z nami swoją opinią lub podzielić się nowymi pomysłami.
- W przypadku dłuższych dyskusji najlepszym rozwiązaniem będzie lista adresowa lub Stack Overflow.
- W przypadku jakichkolwiek problemów związanych z dokumentami otwórz problem w naszym repozytorium dokumentów.
Do przyszłego miesiąca.