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

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 skutecznoś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 stosu 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 JSDetektory 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ążeniowych i testów wydajności w czasie działania dla dowolnego adresu URL. Więcej informacji

Jeśli dopiero zaczynasz analizować skuteczność, zalecamy najpierw użycie panelu Sprawdzanie, a potem dalsze analizowanie danych w panelu Skuteczność lub monitorze Skuteczność.

Pasek boczny konsoli

W przypadku dużych witryn konsola może szybko zostać zalana nieistotnymi wiadomościami. Korzystaj z nowej bocznej kolumny Konsoli, aby ograniczyć ilość nieistotnych powiadomień i skupić się na tych, 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 negatywnefiltry 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ą dopiero tuż przed terminem, aby móc w tym czasie usunąć ewentualne błędy. 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 przeglądarki Chrome w wersji Canary, Dev lub Beta. 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ędziech deweloperskich.