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

Kayce Basques

Obsługa multikonta w panelu Audyt

Panel Audyty możesz teraz używać w połączeniu z innymi funkcjami DevTools, takimi jak blokowanie żądań i zastępowanie lokalne.

Załóżmy na przykład, że w raporcie w panelu Audyt widać, że skuteczność strony wynosi 70%, a jedną z największych możliwości poprawy skuteczności jest usunięcie zasobów blokujących renderowanie.

Początkowy wynik skuteczności to 70.

Rysunek 1. Początkowy wynik Skuteczność.

W pierwszym raporcie stwierdzono, że problemem są 3 skrypty blokujące renderowanie.

Rysunek 2. W pierwszym raporcie stwierdzono, że problemem są 3 skrypty blokujące renderowanie.

Teraz, gdy panel sprawdzeń można używać w połączeniu z blokowaniem żądań, możesz szybko sprawdzić, w jaki sposób skrypty blokujące renderowanie wpływają na wydajność wczytywania. Aby to zrobić, najpierw zablokuj żądania dotyczące skryptów blokujących renderowanie:

Użyj karty Blokowanie żądań, aby zablokować problematyczne skrypty.

Rysunek 3. Użyj karty Blokowanie żądań, aby zablokować problematyczne skrypty.

Następnie ponownie sprawdź stronę:

Po włączeniu blokowania żądań wynik skuteczności wzrósł do 97.

Rysunek 4. Po zablokowaniu problematycznych skryptów wynik Wydajność wzrósł do 97.

Możesz też użyć zastępów lokalnych, aby dodać atrybuty async do każdego tagu skryptu, ale „zostawimy to jako ćwiczenie dla czytelnika”. Aby wypróbować tę funkcję, otwórz prezentację dla wielu klientów. Możesz też obejrzeć ten tweet, aby zobaczyć film z demonstracją.

Problem Chromium #991906

Debugowanie modułu do obsługi płatności

Sekcja Usługi w tle w panelu Aplikacja obsługuje teraz zdarzenia Handlera płatności.

  1. Otwórz panel Aplikacja.
  2. Otwórz panel Moduł do obsługi płatności.

  3. Kliknij Nagrywaj. Narzędzia deweloperskie rejestrują zdarzenia modułu obsługi płatności przez 3 dni, nawet gdy są zamknięte.

    Rejestrowanie zdarzeń modułu obsługi płatności.

    Rysunek 5. Rejestrowanie zdarzeń modułu obsługi płatności.

  4. Włącz opcję Pokaż zdarzenia z innych domen, jeśli zdarzenia modułu obsługi płatności występują w innej domenie.

  5. Po wywołaniu zdarzenia Handlera płatności kliknij jego wiersz, aby dowiedzieć się więcej.

    Wyświetlanie zdarzenia modułu obsługi płatności.

    Rysunek 6. Wyświetlanie zdarzenia modułu obsługi płatności.

Problem Chromium #980291

Lighthouse 5.2 w panelu Audyty

Panel Audyty korzysta teraz z wersji Lighthouse 5.2. Nowa diagnostyka Używanie kodu spoza witryny pokazuje, ile razy został przesłany kod innej firmy i jak długo blokował on główny wątek podczas wczytywania strony. Aby dowiedzieć się więcej o tym, jak kod zewnętrzny może spowalniać wczytywanie stron, przeczytaj artykuł Optymalizacja zasobów zewnętrznych.

Zrzut ekranu pokazujący kontrolę „Użycie przez osoby trzecie” w interfejsie raportu Lighthouse

Rysunek 7. Korzystanie z kodu spoza witryny.

Problem Chromium #772558

Największe wyrenderowanie treści w panelu Skuteczność

Podczas analizowania wydajności wczytywania w panelu Wydajność sekcja Czasy zawiera teraz znacznik największego wyrenderowania treści (LCP). LCP wskazuje czas renderowania największego elementu treści wyświetlanego w widocznym obszarze.

znacznik LCP w sekcji Czasy wyświetlania;

Rysunek 8. znacznik LCP w sekcji Czasy.

Aby wyróżnić węzeł DOM powiązany z LCP:

  1. W sekcji Czasy kliknij znacznik LCP.

  2. Najedź kursorem na powiązany węzeł na karcie Podsumowanie, aby wyróżnić węzeł w widoku.

    Sekcja Powiązany węzeł na karcie Podsumowanie.

    Rysunek 9. Sekcja Powiązany węzeł na karcie Podsumowanie.

  3. Kliknij Powiązany węzeł, aby go wybrać w drzewie DOM.

zgłaszanie problemów z Narzędziami deweloperskimi w menu głównym,

Jeśli napotkasz błąd w Narzędziach deweloperskich i chcesz zgłosić problem lub masz pomysł, jak ulepszyć Narzędzia deweloperskie i chcesz zasugerować nową funkcję, kliknij Menu główne > Pomoc > Zgłoś problem z Narzędziami deweloperskimi, aby zgłosić problem w systemie śledzenia zespołu inżynierów Narzędzi deweloperskich. Udostępnienie minimalnego, odtwarzalnego przykładu w Glitch znacznie zwiększa szanse zespołu na naprawienie błędu lub wdrożenie żądanej funkcji.

Pomoc > Zgłoś problem z Narzędziami deweloperskimi." width="800" height="604">

Rysunek 10. Menu główne > Pomoc > Zgłoś problem z Narzędziami deweloperskimi.

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.

Co nowego w Narzędziach deweloperskich

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