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. Po wczytaniu lub uruchom stronę, zobaczysz na karcie, ile kodu zostało użyte wczytano. Możesz zmniejszyć rozmiar stron, wysył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:

  • Ciągłe zielone światło oznacza, że wiersz kodu został wykonany.
  • Świeci się na czerwono, co oznacza, że nie zostało wykonane.
  • Czerwony i zielony wiersz kodu, np. 3. na zrzucie ekranu powyżej oznacza, że uruchomiono tylko część kodu w tym wierszu. Na przykład potrójny takie jak var b = (a > 0) ? a : 0 ma kolor czerwony i zielony.

Aby otworzyć kartę Pokrycie:

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

Zrzuty całego ekranu

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 prawym przyciskiem myszy żądanie w sekcji Sieć. i wybierz Zablokuj URL żądania. W szufladzie pojawi się nowa karta Blokowanie żądań, która umożliwia zarządzanie zablokowanymi żądaniami.

Zablokuj URL żądania

Przeskakiwanie nad instrukcją asynchroniczną await

Do tej pory próba przejścia kodu takiego jak ten poniżej była ból głowy. Jesteś w środku trasy test(), przejeżdżasz przez linę, a następnie przeszkodzi Ci kod setInterval(). Teraz, gdy przejdziesz przez kod asynchroniczny, np. test(), kroki w Narzędziach deweloperskich od pierwszego do ostatniego wiersza z i zapewniać spójność.

  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 w zakresie debugowania? Zapoznaj się z tymi dokumentami:

Zmiany

Menu jednolitego polecenia

Zwróć uwagę, że po otwarciu menu poleceń jest poprzedzany znakiem większości (>). Dzieje się tak, ponieważ Command Wprowadziliśmy w nim menu Otwórz plik, które jest dostępne Command+O (Mac) lub Control+O (Windows, Linux).

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

Co nowego w Narzędziach deweloperskich

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