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

Kayce Basques

Witamy z powrotem. Nowe funkcje w Narzędziach deweloperskich w Chrome 64:

Czytaj dalej lub obejrzyj film z informacjami o tej wersji.

Monitorowanie wydajności

Korzystając z Monitora wydajności, możesz wyświetlać w czasie rzeczywistym różne aspekty wczytywania strony lub wydajności w czasie działania, w tym:

  • Wykorzystanie procesora.
  • Rozmiar sterty JavaScript.
  • Łączna liczba węzłów DOM, detektorów zdarzeń JavaScript, dokumentów i ramek na stronie.
  • Liczba ponownych obliczeń układów i stylów na sekundę.

Jeśli użytkownicy zgłaszają, że aplikacja działa wolno lub niepłynnie, sprawdź Monitor wydajności, aby uzyskać wskazówki.

Dlaczego szybkość wczytywania ma znaczenie: firma BookMyShow odnotowała wzrost liczby konwersji o 80%, gdy stworzyła progresywną aplikację internetową, która skupia się na szybkości. Więcej informacji

Aby korzystać z monitorowania wydajności:

  1. Otwórz Menu poleceń.

  2. Zacznij pisać Performance, a potem wybierz Show Performance Monitor.

    Monitor wydajności Rysunek 1. Monitor wydajności

  3. Kliknij dane, aby je wyświetlić lub ukryć. Na rysunku 1. widać wykresy Wykorzystanie procesora, Rozmiar sterty JS i Detektory zdarzeń JS.

Powiązane funkcje:

  • panel Wydajność. Przejdź przez kluczową ścieżkę użytkownika i zapisz wszystko, co dzieje się na stronie, w tym aktywność JavaScript, żądania sieciowe, wykorzystanie procesora i wiele innych informacji. Można go też używać do analizowania wydajności wczytywania. Więcej informacji
  • Panel Audyty. Uruchom zestaw automatycznych testów obciążenia i wydajności w czasie działania dla dowolnego adresu URL. Więcej informacji

Jeśli dopiero zaczynasz analizować skuteczność, zalecamy najpierw skorzystać z panelu Audyty, a potem zbadać dane za pomocą panelu Skuteczność lub monitora Skuteczność.

Pasek boczny konsoli

W przypadku dużych witryn konsola może szybko zostać zalana nieistotnymi wiadomościami. Użyj nowego paska bocznego Konsoli, aby ograniczyć ilość nieistotnych powiadomień i skupić się na wiadomościach, które są dla Ciebie ważne.

Używanie paska bocznego konsoli do wyświetlania tylko komunikatów o błędach

Rysunek 2. Używanie paska bocznego konsoli do wyświetlania tylko komunikatów o błędach

Pasek boczny konsoli jest domyślnie ukryty. Kliknij Pokaż pasek boczny konsoli Pokaż pasek boczny konsoli aby go wyświetlić.

Powiązane funkcje:

  • Pole tekstowe Filtr. Wpisz tekst, a Konsola będzie wyświetlać tylko wiadomości zawierające ten tekst. Obsługuje też wzorce wyrażeń regularnych, filtry negatywne i filtry adresów URL.

Grupowanie podobnych komunikatów w konsoli

Konsola domyślnie grupuje teraz podobne wiadomości. Na przykład na rysunku 3 widać 27 wystąpień wiadomości [Violation] Avoid using document.write().

Przykład grupowania podobnych komunikatów w konsoli

Rysunek 3. Przykład grupowania podobnych komunikatów w konsoli

Kliknij grupę, aby ją rozwinąć i zobaczyć wszystkie wystąpienia wiadomości.

Przykład rozwiniętej grupy komunikatów w konsoli

Rysunek 4 Przykład rozwiniętej grupy komunikatów w konsoli

Odznacz pole wyboru Grupuj podobne, aby wyłączyć tę funkcję.

Powiązane funkcje:

  • Możesz grupować własne wiadomości z Konsoli za pomocą console.group().

Zastąpienia lokalne

Ups! Pierwotnie planowaliśmy wdrożenie tej funkcji w Chrome 64, ale wprowadziliśmy ją tuż przed terminem, aby załatać kilka niedociągnięć. Wygląda na to, że interfejs Nowości nie aktualizuje się w czasie rzeczywistym. Przepraszamy.

Ta funkcja jest dostępna w Chrome 65, która zostanie udostępniona około 6 tygodni po Chrome 64. Aby dowiedzieć się więcej, zapoznaj się z artykułem Zastępowanie wartości lokalnych. Jeśli używasz systemu Windows lub macOS, możesz już teraz wypróbować Chrome 65, pobierając Chrome Canary.

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.