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

Kayce Basques
Kayce Basques

Obsługa wielu klientów w panelu Kontrole

Panelu Audyty można teraz używać w połączeniu z innymi funkcjami Narzędzi deweloperskich, takimi jak Request Blokowanie i zastąpienia lokalne.

Załóżmy na przykład, że w raporcie panelu Audycje podano, że wynik wydajności strony to 70. a jednym 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ść.

Wstępny raport podaje, że problem dotyczy 3 skryptów blokujących renderowanie.

Rysunek 2. Wstępny raport podaje, że problem dotyczy 3 skryptów blokujących renderowanie.

Panel Kontrole może być teraz używany w połączeniu z blokowaniem żądań. zmierzyć wpływ skryptów blokujących renderowanie na wydajność wczytywania przez blokowanie dla skryptów blokujących renderowanie:

Użycie karty Request Blokowanie w celu zablokowania skryptów, które powodują problemy.

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

Następnie sprawdź stronę jeszcze raz:

Po włączeniu blokowania żądań wynik wydajności poprawił się do 97.

Rysunek 4. Po zablokowaniu problematycznych skryptów wynik skuteczności poprawił się do 97.

Możesz też użyć lokalnych zastąpień, aby dodać atrybuty async do każdego skryptu ale „pozostawimy to na użytek czytelnika”. Przejdź do wersji demonstracyjnej dla wielu klientów, aby ją wypróbować. na zewnątrz. Możesz też obejrzeć ten tweet, w którym znajdziesz film z prezentacją.

Problem nr 991906 z Chromium

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

Sekcja Usługi w tle w panelu Aplikacja obsługuje teraz moduł obsługi płatności zdarzeń.

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

  3. Kliknij przycisk Nagraj. Narzędzia deweloperskie rejestrują zdarzenia modułu obsługi płatności przez 3 dni, nawet jeśli zamknięto.

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

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

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

  5. Po wywołaniu zdarzenia modułu obsługi płatności kliknij wiersz tego 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 nr 980291 z Chromium

Lighthouse 5.2 w panelu Audyty

W panelu Audyty działa teraz Lighthouse 5.2. Nowa diagnostyka dotycząca korzystania z usług firm zewnętrznych informuje, ile żądań kodu zewnętrznego żądano i na jak długo został on zablokowany w głównym wątku podczas wczytywania strony. Więcej informacji znajdziesz w artykule Optymalizowanie zasobów firm zewnętrznych. o sposobach zmniejszania wydajności wczytywania stron.

Zrzut ekranu „Korzystanie z rozwiązań zewnętrznych” w interfejsie raportu Lighthouse.

Rysunek 7. Audyt Korzystanie z usług innych firm.

Problem nr 772558 z Chromium

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

Podczas analizowania wydajności wczytywania w panelu Skuteczność w sekcji Czas zawiera znacznik największego wyrenderowania treści (LCP). LCP raportuje czas renderowania największego elementu treści widocznego w widocznym obszarze.

Znacznik LCP w sekcji Czasy.

Rysunek 8. Znacznik LCP w sekcji Czasy.

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

  1. Kliknij znacznik LCP w sekcji Czasy.

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

    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.

Przesyłaj problemy z Narzędziami deweloperskimi w menu głównym

Jeśli natrafisz na błąd w Narzędziach deweloperskich i będziesz chciał zgłosić problem lub jeśli wiesz, jak jeśli chcesz poprosić o nową funkcję w Narzędziach deweloperskich, otwórz Menu główne > Pomoc > Zgłoś Problem z Narzędziami deweloperskimi, aby utworzyć problem w narzędziu do śledzenia narzędzi zespołu inżynierów. Udostępnienie Minimalny, możliwy do odtworzenia przykład w Usterce znacznie zwiększa możliwości zespołu w zakresie naprawiania błędów. zgłosić błąd lub wdrożyć propozycję funkcji.

Pomoc > Zgłoś problem z Narzędziami deweloperskimi”. szerokość="800" wysokość="604">

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

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 w Narzędziach deweloperskich.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o 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.