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

Kayce Basques

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, a ile wczytano. Możesz zmniejszyć rozmiar stron, przesyłając tylko kod, którego potrzebujesz.

Karta Zasięg

Kliknięcie adresu URL powoduje 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żda linia kodu jest oznaczona kolorem:

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

Aby otworzyć kartę Pokrycie:

  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 nie jest dostępny określony skrypt, arkusz stylów lub inny zasób? Kliknij żądanie prawym przyciskiem myszy w panelu Sieć i wybierz Zablokuj adres 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ę, przerwie Ci kod setInterval(). Teraz, gdy przechodzisz przez kod asynchroniczny, 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 nowymi 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 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.

Co nowego w Narzędziach deweloperskich

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