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

Kayce Basques

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 wyświetlać pod kursorem podgląd wyniku tego wyrażenia.

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

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

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 konsola pokazuje 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 konsoli.

W interfejsie autouzupełniania konsoli wyświetla się teraz komunikat „Poczekaj”.

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

W Lighthouse 3.0 wprowadziliśmy nowy wewnętrzny mechanizm kontroli o nazwie Kryptonim Lantern, który szybciej przeprowadza audyty i umożliwia 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 zespołów Lighthouse i Chrome UX (badania i projektowania).

Nowy interfejs raportów w Lighthouse 3.0.

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. BigInt umożliwia podawanie liczb całkowitych z dowolną precyzją. Wypróbuj tę funkcję w konsoli:

Przykład BigInt w konsoli.

Rysunek 6. Przykład elementu 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 ścieżkę właściwości do obserwowanych, aby dodać ją 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

Opcja „Pokaż sygnatury czasowe” została przeniesiona do ustawień

Pole wyboru Pokaż sygnatury czasowe, które wcześniej było w Ustawieniach konsoli, Przycisk Ustawienia konsoli zostało przeniesione 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.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59