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

Kayce Basques

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

• Eager Evaluation (Ocena z zainteresowaniem). Podczas wpisywania wyrażeń konsola wyświetla podgląd wyniku.
• Wskazówki dotyczące argumentów. Podczas wpisywania funkcji konsola pokazuje oczekiwane argumenty .
• Autouzupełnianie funkcji. Po wpisaniu wywołania funkcji, na przykład document.querySelector('p'), konsola pokazuje funkcje i właściwości obsługiwane przez zwracaną wartość.
• Słowa kluczowe ES2017 w konsoli. Słowa kluczowe takie jak await są teraz dostępne w Konsoli .
• Lighthouse 3.0 w panelu Audyty. Szybsze, bardziej spójne audyty, nowy interfejs i nowe kontrole.
• zespołem pomocy BigInt. Wypróbuj w Konsoli nową funkcję JavaScriptu o dowolnej dokładności.
• Dodawanie ścieżek właściwości do panelu Obserwowanie. Dodaj właściwości z panelu Zakres do panelu obserwacyjnego panel.
• „Pokaż sygnatury czasowe” przeniesiony do Ustawień.

Przeczytaj poniższe informacje lub obejrzyj filmową wersję tych informacji.

Konsola asystująca

W Chrome 68 pojawiło się kilka nowych funkcji konsoli związanych z autouzupełnianiem i podglądem.

Ocena zachęcania do działania

Gdy wpiszesz wyrażenie w konsoli, może ona teraz wyświetlać podgląd jego wyniku poniżej kursora.

Rysunek 1. Konsola drukuje wynik operacji sort(), zanim została jawnie wykonane

Aby włączyć ocenę chaotyczną:

1. Otwórz konsolę.
2. Otwórz Ustawienia konsoli.
3. Zaznacz pole wyboru Zaangażowana ocena.

Narzędzia deweloperskie nie oceniają, czy wyrażenie powoduje efekty uboczne.

Wskazówki dotyczące argumentów

Podczas wpisywania funkcji Konsola pokazuje teraz argumenty, których oczekuje funkcja.

Rysunek 2. Różne przykłady wskazówek dotyczących argumentów w konsoli

Uwagi:

• Znak zapytania przed argumentem, np. ?options, to opcjonalny argument.
• Wielokropek przed argumentem, np. ...items, reprezentuje rozrzut.
• Niektóre funkcje, takie jak CSS.supports(), akceptują podpisy z wieloma argumentami.

Autouzupełnianie po wykonaniu funkcji

Po włączeniu oceny chaotycznej w konsoli zobaczysz też, które właściwości i funkcje są dostępne po wpisaniu funkcji.

Rysunek 3. Zrzut ekranu u góry przedstawia stary sposób działania, a dolny – nowy sposób, który obsługuje autouzupeł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 sugestię await w interfejsie autouzupełniania

Szybsze, bardziej niezawodne audyty, nowy interfejs i nowe kontrole

Chrome 68 jest wyposażony w Lighthouse w wersji 3.0. W kolejnych sekcjach znajduje się streszczenie najważniejszych zmian. Pełne informacje znajdziesz w artykule Ogłoszenie Lighthouse 3.0.

Szybsze, bardziej wiarygodne audyty

Lighthouse 3.0 ma nowy wewnętrzny mechanizm kontroli o kryptonimie Lantern, który przeprowadza wszystkie audyty przyśpieszyć i mniejsze różnice między uruchomieniami.

Nowe pozycje interfejsu użytkownika

Lighthouse 3.0 to także nowy interfejs, który powstał dzięki współpracy Lighthouse i UX Chrome. zespołu ds. badań i projektowania.

Rysunek 5. Nowy interfejs raportów w Lighthouse 3.0

Nowe audyty

W Lighthouse w wersji 3.0 pojawiły się też 4 nowe audyty:

• Pierwsze wyrenderowanie treści
• Plik robots.txt jest nieprawidłowy
• Używanie formatów wideo w treściach animowanych
• Unikaj wielu, kosztownych lotów w obie strony do dowolnego punktu początkowego

Obsługa BigInt

Chrome 68 obsługuje nowy podstawowy element numeryczny o nazwie BigInt. Firma BigInt pozwala Ci reprezentować liczb całkowitych z dowolną precyzją. Wypróbuj tę funkcję w konsoli:

Rysunek 6. Przykład BigInt w konsoli

Dodaj ścieżkę właściwości do obserwacji

Po wstrzymaniu usługi w punkcie przerwania kliknij prawym przyciskiem myszy usługę w panelu Zakres i wybierz Dodaj właściwość kliknij ścieżki do zegarka, aby dodać tę właściwość do panelu Obserwowanie.

Rysunek 7. Przykład użycia opcji Dodaj ścieżkę usługi do obserwowanych

„Pokaż sygnatury czasowe” przeniesiono do ustawień

Pole wyboru Pokaż sygnatury czasowe, które było wcześniej dostępne w Ustawieniach konsoli Aplikacja została przeniesiona do Ustawień.

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.