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

Witamy w kolejnych informacjach o wersji Narzędzi dla deweloperów. Obejrzyj film poniżej lub przeczytaj ten artykuł, aby dowiedzieć się, co nowego w Narzędziach Chrome dla programistów w Chrome 59.

Najciekawsze

Nowe funkcje

Pokrywanie kodu CSS i JS

Znajdź nieużywany kod CSS i JS za pomocą nowej karty Pokrycie. Gdy wczytujesz lub uruchamiasz stronę, karta pokazuje, ile kodu zostało użyte w porównaniu z załadowanym. Możesz zmniejszyć rozmiar stron, przesyłając tylko kod, którego potrzebujesz.

Karta Zasięg

Kliknięcie adresu URL spowoduje wyświetlenie tego pliku w panelu Źródła wraz z podziałem na wykonane wiersze kodu.

Zestawienie pokrycia kodu w panelu Źródła

Każdy wiersz kodu jest oznaczony kolorem:

  • Zielony oznacza, że wiersz kodu został wykonany.
  • Czerwony oznacza, że nie został wykonany.
  • Wiersz kodu, który jest zarówno czerwony, jak i zielony, np. 3. wiersz kodu na powyższym zrzucie ekranu, oznacza, że wykonywany jest tylko fragment kodu. Na przykład wyrażenie ternarne var b = (a > 0) ? a : 0 jest podświetlone na czerwono i zielono.

Aby otworzyć kartę Stan:

  1. Otwórz menu poleceń.
  2. Zacznij pisać Coverage i kliknij Pokaż zasięg.

Zrzuty ekranu całej strony

Obejrzyj poniższy film, aby dowiedzieć się, jak zrobić zrzut ekranu od góry do dołu strony.

Blokowanie żądań

Chcesz sprawdzić, jak zachowuje się Twoja strona, gdy dany skrypt, arkusz stylów lub inny zasób jest niedostępny? Kliknij prawym przyciskiem myszy żądanie w panelu Sieć i wybierz Zablokuj URL żądania. W szufladzie pojawi się nowa karta Blokowanie żądań, która umożliwia zarządzanie zablokowanymi żądaniami.

Blokowanie adresu URL żądania

Przeskakiwanie nad instrukcją asynchroniczną await

Do tej pory próba przejścia przez kod, taki jak ten poniżej, była prawdziwym koszmarem. W środku test(), gdy przechodzisz przez linię, zostaniesz przerwany przez kod setInterval(). Gdy teraz przechodzisz po kodzie asynchronicznym, np. test(), narzędzia deweloperskie przechodzą konsekwentnie od pierwszego do ostatniego wiersza.

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

PS. Chcesz rozwinąć swoje umiejętności debugowania? Zapoznaj się z tymi dokumentami:

Zmiany

Menu jednolitego polecenia

Gdy otworzysz menu poleceń, zauważysz, że polecenie jest poprzedzone znakiem większym (>). Dzieje się tak, ponieważ menu poleceń zostało scalone z menu Otwórz plik, które jest Command + O (Mac) lub Control + O (Windows, Linux).

Pobieranie kanałów podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. 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

Użyj poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne informacje związane z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

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