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

Kayce Basques

Witamy z powrotem. W Narzędziach deweloperskich w Chrome 64 pojawią się nowe funkcje:

• Monitorowanie skuteczności. Sprawdzanie skuteczności strony w czasie rzeczywistym.
• Pasek boczny konsoli. Ogranicz szum konsoli i skup się na wiadomościach, które są dla Ciebie ważne.
• Grupowanie podobnych komunikatów w konsoli Podobne wiadomości są teraz domyślnie grupowane w konsoli.

Poniżej możesz przeczytać lub obejrzeć filmową wersję tych informacji.

Monitorowanie wydajności

Korzystając z Monitora wydajności, możesz obserwować różne aspekty wczytywania strony w czasie rzeczywistym. wydajności środowiska wykonawczego, w tym:

• Wykorzystanie procesora.
• Rozmiar sterty JavaScriptu.
• Łączna liczba węzłów DOM, detektorów zdarzeń JavaScript, dokumentów i ramek na stronie.
• Układy i ponowne obliczenia stylów na sekundę.

Jeśli użytkownicy zgłaszają, że aplikacja działa wolno lub wolno działać, sprawdź Monitor wydajności: wskazówek.

Dlaczego wydajność wczytywania ma znaczenie: witryna BookMyShow odnotowała 80-procentowy wzrost liczby konwersji, gdy Progresywna aplikacja internetowa skoncentrowana na szybkości. Więcej informacji

Aby skorzystać z Monitora wydajności:

1. Otwórz menu poleceń.

2. Zacznij pisać Performance i wybierz Show Performance Monitor.

   Rysunek 1. Monitorowanie wydajności

3. Kliknij dane, aby je wyświetlić lub ukryć. Na rys. 1 dane Wykorzystanie procesora, Rozmiar sterty JS oraz JS detektorów zdarzeń.

Powiązane funkcje:

• Skuteczność. Zapoznaj się z najważniejszą ścieżką użytkownika i zapisuj wszystko, co dzieje się na w tym aktywność JavaScript, żądania sieciowe, wykorzystanie procesora itd. Można też używane do analizowania wydajności wczytywania. Więcej informacji
• Panel Kontrole. Uruchamianie zestawu zautomatyzowanych testów wczytywania i wydajności działania w przypadku dowolnego adresu URL. Więcej informacji

Jeśli dopiero zaczynasz analizować skuteczność, zalecamy skorzystanie z Audyty, a następnie zbadać je dokładniej przy użyciu panelu Skuteczność lub Skuteczność. monitorowania.

Pasek boczny konsoli

W dużych witrynach konsola może szybko zapełnić się nieistotnymi wiadomościami. Korzystanie z nowej konsoli na pasku bocznym, aby ograniczyć szum i skupić się na wiadomościach, które są dla Ciebie ważne.

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

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

Podobne funkcje:

• Pole tekstowe Filtr. Wpisz tekst, a Konsola wyświetli tylko wiadomości zawierające tekstu. Obsługuje także wzorce wyrażeń regularnych, filtry wykluczające i filtry adresów URL.

Grupuj podobne komunikaty w konsoli

Podobne wiadomości są teraz domyślnie grupowane w konsoli. Na przykład na rys. 3 jest 27 wystąpienia wiadomości [Violation] Avoid using document.write().

Rysunek 3. Przykład grupowania podobnych wiadomości w konsoli

Kliknij grupę, aby ją rozwinąć i zobaczyć każde wystąpienie wiadomości.

Rysunek 4. Przykład rozwiniętej grupy wiadomości w konsoli

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

Podobne funkcje:

• Własne wiadomości w Konsoli możesz grupować za pomocą narzędzia console.group().

Lokalne zastąpienia

Ups! Początkowo planowaliśmy wprowadzenie tej funkcji w Chrome 64, ale przybliżyliśmy ją do termin, aby wygładzić niedoskonałości. Wygląda na to, że interfejs Co nowego nie został zaktualizowany obecnie się znajdujesz. Przepraszamy.

Ta funkcja jest dostępna w Chrome 65, który będzie dostępny po około 6 tygodniach od wersji Chrome 64. Sprawdź Więcej informacji znajdziesz w artykule o zastąpieniach lokalnych. Jeśli korzystasz z systemu Windows lub Mac, możesz wypróbować Chrome 65 przez pobierz Chrome Canary.

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