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. Podczas wczytywania lub uruchamiania strony na tej karcie widać, ile kodu zostało użyte, a ile zostało wczytane. 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 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ę 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.

Blokuj żądania

Chcesz sprawdzić, jak zachowuje się Twoja strona, gdy nie jest dostępny określony skrypt, arkusz stylów lub inny zasób? 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);
  }

P.S. Chcesz rozwinąć swoje umiejętności w zakresie 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 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

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.