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 Gdy wpisujesz funkcje, konsola wyświetla oczekiwane argumenty dla danej funkcji.
• Autouzupełnianie funkcji. Po wpisaniu wywołania funkcji, np. document.querySelector('p'), konsola wyświetla funkcje i właściwości, które obsługuje zwracana wartość.
• 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 Audyt. Szybsze i bardziej spójne kontrole, nowy interfejs i nowe kontrole.
• BigInt. Wypróbuj w Konsoli nową liczbę całkowitą JavaScripta o dowolnej precyzji.
• Dodawanie ścieżek właściwości do panelu Obserwowane. Dodaj właściwości z panelu Zakres do panelu Obserwowane.
• Opcja „Pokaż sygnaturę czasową” została przeniesiona do ustawień.

Czytaj dalej lub obejrzyj film z informacjami o wersji.

Konsola wspomagająca

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

Wartościowanie zachłanne

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

Rysunek 1 Konsola wypisuje wynik operacji sort(), zanim zostanie ona wyraźnie wykonana.

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

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

Narzędzia deweloperskie nie przeprowadzają oceny pospiesznej, jeśli wyrażenie powoduje efekty uboczne.

Wskazówki dotyczące argumentów

Gdy wpisujesz funkcje, konsola wyświetla argumenty, których oczekuje dana funkcja.

Rysunek 2. Różne przykłady podpowiedzi dotyczących argumentów w Konsoli

Uwagi:

• Zapytanie przed argumentem, np. ?options, oznacza opcjonalny argument.
• Wielokropek przed argumentem, np. ...items, oznacza rozpięcie.
• Niektóre funkcje, np. CSS.supports(), akceptują wiele podpisów argumentów.

Autouzupełnianie po wykonaniu funkcji

Po włączeniu szybkiej oceny konsola pokazuje teraz, 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 – nowe działanie, które obsługuje automatyczne uzupełnianie funkcji.

Słowa kluczowe ES2017 w autouzupełnianiu

Słowa kluczowe ES2017, np. await, są teraz dostępne w interfejsie autouzupełniania w Konsoli.

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

Szybsze i bardziej niezawodne kontrole, nowy interfejs i nowe rodzaje kontroli

Chrome 68 zawiera Lighthouse 3.0. W kolejnych sekcjach znajdziesz podsumowanie najważniejszych zmian. Więcej informacji znajdziesz w artykule Ogłoszenie Lighthouse 3.0.

Szybsze i bardziej niezawodne kontrole

Lighthouse 3.0 zawiera nowy wewnętrzny mechanizm sprawdzania o nazwie Lantern, który przeprowadza audyty szybciej i z mniejszą zmiennością między przebiegami.

Nowe pozycje interfejsu użytkownika

Lighthouse 3.0 wprowadza też nowe UI dzięki współpracy zespołów Lighthouse i Chrome UX (Research & Design).

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 do treści animowanych
• Unikaj wielokrotnych, kosztownych podróży powrotnych do dowolnego miejsca pochodzenia

Obsługa BigInt

Chrome 68 obsługuje nowy typ liczbowy o nazwie BigInt. BigInt umożliwia reprezentowanie liczb całkowitych z dowolną dokładnością. Wypróbuj to w Konsoli:

Rysunek 6. Przykład BigInt w Konsoli

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

Gdy się zatrzymasz na punkcie przerwania, kliknij prawym przyciskiem myszy usługę w panelu Zakres i wybierz Dodaj ścieżkę właściwości do obserwowanych, aby dodać tę usługę do panelu Obserwowany.

Rysunek 7. Przykład dodawania ścieżki właściwości do obserwowanych

Opcja „Pokaż sygnaturę czasową” została przeniesiona do ustawień

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

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.

• Przesyłaj opinie 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.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.