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

Kayce Basques
Kayce Basques
X GitHub

Obsługa wielu klientów w panelu Audyty

Możesz teraz używać panelu Audyty w połączeniu z innymi funkcjami Narzędzi deweloperskich, takimi jak blokowanie żądań i lokalne zastąpienia.

Załóżmy na przykład, że w raporcie w panelu Audyty podano, że wynik skuteczności Twojej strony to 70, a jedną z największych możliwości poprawy skuteczności jest wyeliminowanie zasobów blokujących renderowanie.

Początkowy wynik skuteczności to 70.

Rysunek 1. Początkowy wynik skuteczności.

Pierwszy raport wskazuje, że problemem są 3 skrypty blokujące renderowanie.

Rysunek 2. Pierwszy raport wskazuje, że problemem są 3 skrypty blokujące renderowanie.

Panel Audyty można teraz używać w połączeniu z blokowaniem żądań. Dzięki temu możesz szybko zmierzyć, jak skrypty blokujące renderowanie wpływają na wydajność wczytywania. W tym celu najpierw zablokuj żądania 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 wydajności wzrósł do 97.

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

Możesz też użyć lokalnych zastąpień, aby dodać atrybuty async do każdego tagu skryptu, ale „to już pozostawimy jako zadanie dla czytelnika”. Obejrzyj tego tweeta, aby zobaczyć film z prezentacją.

Problem w Chromium nr 991906

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

Sekcja Usługi w tle w panelu Aplikacja obsługuje teraz zdarzenia Payment Handler.

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

  3. Kliknij Nagraj. 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 innym źródle.

  5. Po wywołaniu zdarzenia Payment Handler kliknij wiersz zdarzenia, aby dowiedzieć się o nim 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 w Chromium nr 980291

Lighthouse 5.2 w panelu Audyty

Panel Audyty korzysta teraz z Lighthouse w wersji 5.2. Nowy test diagnostyczny Wykorzystanie kodu spoza witryny informuje, ile kodu spoza witryny zostało wysłane i jak długo blokował on główny wątek podczas wczytywania strony. Więcej informacji o tym, jak kod spoza witryny może spowalniać wczytywanie stron, znajdziesz w artykule Optymalizowanie zasobów pochodzących od innych firm.

Zrzut ekranu pokazujący kontrolę „Korzystanie z usług innych firm” w interfejsie raportu Lighthouse.

Rysunek 7. Kontrola Używanie kodu spoza witryny.

Problem w Chromium nr 772558

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

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 Czas.

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 obszarze wyświetlania.

    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 wybrać go 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 jeśli masz pomysł na ulepszenie Narzędzi deweloperskich i chcesz poprosić o dodanie nowej funkcji, kliknij Menu główne > Pomoc > Zgłoś problem z Narzędziami deweloperskimi, aby utworzyć zgłoszenie w trackerze zespołu inżynierów Narzędzi deweloperskich. Podanie minimalnego, powtarzalnego przykładu znacznie zwiększa możliwość naprawienia przez zespół błędu lub wdrożenia zgłoszonej przez Ciebie funkcji.

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

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

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.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.