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

Kayce Basques
Kayce Basques
X GitHub

Witamy w kolejnej części informacji o wersji Narzędzi deweloperskich. Obejrzyj poniższy film lub przeczytaj, co nowego pojawiło się w Narzędziach Chrome dla programistów w Chrome 59.

Najciekawsze

Nowe funkcje

Pokrycie kodu CSS i JS

Znajdź nieużywany kod CSS i JS na nowej karcie Coverage (Pokrycie). Gdy wczytasz lub uruchomisz stronę, karta pokaże, ile kodu zostało użyte w porównaniu z ilością wczytanego kodu. Możesz zmniejszyć rozmiar stron, wysyłając tylko potrzebny kod.

Karta Zasięg

Kliknięcie adresu URL powoduje wyświetlenie tego pliku w panelu Źródła wraz z informacjami o tym, które wiersze kodu zostały wykonane.

zestawienie pokrycia kodu w panelu Źródła.

Każdy wiersz kodu jest oznaczony kolorem:

  • Ciągła zielona linia oznacza, że ten wiersz kodu został wykonany.
  • Jednolity czerwony kolor oznacza, że nie została wykonana.
  • Wiersz kodu, który jest czerwony i zielony, np. wiersz 3 na powyższym zrzucie ekranu, oznacza, że wykonano tylko część kodu w tym wierszu. Na przykład wyrażenie trójargumentowe var b = (a > 0) ? a : 0 jest kolorowane na czerwono i zielono.

Aby otworzyć kartę Zasięg:

  1. Otwórz menu poleceń.
  2. Zacznij wpisywać Coverage i wybierz 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ę strona, gdy określony skrypt, arkusz stylów lub inny zasób jest niedostępny? Kliknij prawym przyciskiem myszy żądanie w panelu Sieć i wybierz Zablokuj adres URL żądania. W panelu pojawi się nowa karta Żądanie blokowania, na której możesz zarządzać zablokowanymi żądaniami.

Blokuj URL żądania

Wykonaj krok po kroku funkcję asynchroniczną

Do tej pory próba przechodzenia przez kod, taki jak poniższy fragment, była uciążliwa. W trakcie wykonywania test() przekroczysz linię, a potem wykonanie zostanie przerwane przez kod setInterval(). Teraz, gdy przechodzisz przez kod asynchroniczny, np. test(), Narzędzia deweloperskie przechodzą od pierwszego do ostatniego wiersza w spójny sposób.

  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 udoskonalić swoje umiejętności debugowania? Zapoznaj się z tymi nowymi dokumentami:

Zmiany

Menu poleceń

Gdy otworzysz teraz menu poleceń, zauważysz, że przed poleceniem znajduje się znak większości (>). Dzieje się tak, ponieważ menu poleceń zostało połączone z menu Otwórz plik, które otwiera się za pomocą skrótu Command+O (Mac) lub Control+O (Windows, Linux).

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Skontaktuj się z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.