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

Kayce Basques

Nowości w Narzędziach deweloperskich w Chrome 68:

• Wartościowanie zachłanne Podczas wpisywania wyrażeń konsola wyświetla podgląd wyniku.
• Wskazówki dotyczące argumentów Podczas wpisywania funkcji konsola wyświetla oczekiwane argumenty tej funkcji.
• Autouzupełnianie funkcji. Po wpisaniu wywołania funkcji, np. document.querySelector('p'), konsola wyświetli funkcje i właściwości, które obsługuje wartość zwracana.
• Słowa kluczowe ES2017 w konsoli Słowa kluczowe, takie jak await, są teraz dostępne w interfejsie autouzupełniania w konsoli.
• Lighthouse 3.0 w panelu Audyty. Szybsze i bardziej spójne audyty, nowy interfejs i nowe audyty.
• BigInt zespołem pomocy. Wypróbuj w konsoli nowy dowolnie precyzyjny typ danych całkowitych w JavaScript.
• Dodawanie ścieżek właściwości do panelu Obserwowane Dodaj właściwości z panelu Zakres do panelu Obserwowane.
• „Pokaż sygnatury czasowe” przeniesiono do Ustawień.

Przeczytaj poniższe informacje o wersji lub obejrzyj film z informacjami o wersji.

Konsola ułatwień dostępu

Chrome 68 zawiera kilka nowych funkcji konsoli związanych z autouzupełnianiem i podglądem.

Wartościowanie zachłanne

Gdy wpiszesz w konsoli wyrażenie, może ona teraz wyświetlić pod kursorem podgląd wyniku tego wyrażenia.

Rysunek 1. Konsola wyświetla wynik operacji sort(), zanim zostanie ona jawnie wykonana.

Aby włączyć wartościowanie zachłanne:

1. Otwórz konsolę.
2. Otwórz Ustawienia konsoli.
3. Zaznacz pole wyboru Eager evaluation (Wczesna ocena).

Narzędzia deweloperskie nie obliczają wartości wyrażenia, jeśli powoduje ono efekty uboczne.

Wskazówki dotyczące argumentów

Podczas wpisywania funkcji konsola wyświetla teraz argumenty, których oczekuje funkcja.

Rysunek 2. Różne przykłady podpowiedzi argumentów w konsoli

Uwagi:

• Znak zapytania przed argumentem, np. ?options, oznacza opcjonalny argument.
• Wielokropek przed argumentem, np. ...items, oznacza rozszerzenie.
• Niektóre funkcje, np. CSS.supports(), akceptują wiele sygnatur argumentów.

Autouzupełnianie po wykonaniu funkcji

Po włączeniu funkcji Eager Evaluation konsola pokazuje też, które właściwości i funkcje są dostępne po wpisaniu funkcji.

Rysunek 3. Górny zrzut ekranu przedstawia stare działanie, a dolny zrzut ekranu przedstawia nowe działanie, które obsługuje automatyczne uzupełnianie funkcji.

Słowa kluczowe ES2017 w autouzupełnianiu

Słowa kluczowe ES2017, takie jak await, są teraz dostępne w interfejsie autouzupełniania w konsoli.

Rysunek 4. Konsola sugeruje teraz await w interfejsie autouzupełniania.

Szybsze i bardziej niezawodne audyty, nowy interfejs i nowe audyty

Chrome 68 zawiera Lighthouse 3.0. W kolejnych sekcjach znajdziesz podsumowanie najważniejszych zmian. Więcej informacji znajdziesz w ogłoszeniu o Lighthouse 3.0.

Szybsze i bardziej wiarygodne audyty

Lighthouse 3.0 ma nowy wewnętrzny mechanizm audytu o nazwie kodowej Lantern, który przeprowadza audyty szybciej i z mniejszymi różnicami między poszczególnymi uruchomieniami.

Nowe pozycje interfejsu użytkownika

Lighthouse 3.0 ma też nowy interfejs użytkownika, który powstał dzięki współpracy zespołów Lighthouse i Chrome UX (badania i projektowanie).

Rysunek 5. Nowy interfejs raportu w Lighthouse 3.0

Nowe audyty

Lighthouse 3.0 zawiera też 4 nowe audyty:

• Pierwsze wyrenderowanie treści
• Plik robots.txt jest nieprawidłowy
• Używanie formatów wideo w przypadku treści animowanych
• Unikaj wielokrotnych, kosztownych podróży w obie strony do dowolnego miejsca docelowego.

Obsługa typu BigInt

Chrome 68 obsługuje nowy typ danych liczbowych o nazwie BigInt. BigInt umożliwia reprezentowanie liczb całkowitych z dowolną precyzją. Wypróbuj w konsoli:

Rysunek 6. Przykład BigInt w konsoli

Dodawanie ścieżki właściwości do obserwowanych

Gdy program jest wstrzymany w punkcie przerwania, kliknij prawym przyciskiem myszy właściwość w panelu Zakres i wybierz Dodaj ścieżkę właściwości do obserwowanych, aby dodać tę właściwość do panelu Obserwowane.

Rysunek 7. Przykład użycia opcji Dodaj ścieżkę właściwości do obserwowanych

Opcja „Wyświetlaj sygnatury czasowe” została przeniesiona do ustawień

Pole wyboru Pokaż sygnatury czasowe, które wcześniej znajdowało się w Ustawieniach konsoli , zostało przeniesione do Ustawień.

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.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

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