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

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

.

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.

Konsola drukuje wynik operacji sort(), zanim zostanie ona bezpośrednio wykonana.

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

Wskazówki dotyczące argumentów w konsoli.

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.

Po uruchomieniu metody document.querySelector('p') konsola może wyświetlić właściwości i funkcje dostępne w przypadku danego elementu.

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.

W konsoli pojawia się komunikat „Poczekaj”. w interfejsie autouzupełniania.

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 audyty przyśpieszać i przy mniejszych różnicach 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. ds. badań i projektowania.

Nowy interfejs raportów w Lighthouse 3.0.

Rysunek 5. Nowy interfejs raportów w Lighthouse 3.0

Nowe kontrole

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:

Przykład BigInt 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.

Przykład ścieżki „Dodaj właściwość do obserwacji”.

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 Przycisk Ustawienia konsoli 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   Więcej > 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.