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

Kayce Basques

Witamy w kolejnej części informacji o wersji Narzędzi deweloperskich. Obejrzyj film poniżej lub zapoznaj się z nowościami w Narzędziach deweloperskich w Chrome w wersji 59.

Najciekawsze

Nowe funkcje

Pokrycie kodu CSS i JS

Znajdź nieużywany kod CSS i JS na nowej karcie Pokrycie. Podczas wczytywania lub uruchom stronę, zobaczysz na karcie, ile kodu zostało użyte wczytano. Możesz zmniejszyć rozmiar stron, przesyłając tylko kod których potrzebujesz.

Karta Zasięg

Kliknięcie adresu URL powoduje wyświetlenie pliku w panelu Źródła wraz z zestawieniem których wiersze kodu zostały wykonane.

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ę Stan:

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

Zrzuty całego ekranu

Obejrzyj film poniżej, by dowiedzieć się, jak zrobić zrzut ekranu u góry do końca strony, aż do samego dołu.

Blokuj żądania

chcesz zobaczyć, jak zachowuje się strona, gdy określony skrypt, arkusz stylów lub lub inne zasoby nie są dostępne? Kliknij prawym przyciskiem myszy żądanie w sekcji Sieć. i wybierz Zablokuj URL żądania. Nowa karta Żądania blokowania pojawi się w panelu, który pozwala zarządzać zablokowanymi żądaniami.

Zablokuj URL żądania

Koniec z asynchronizacją

Do tej pory próba przejścia kodu takiego jak ten poniżej była trudna ból głowy. Jesteś w środku trasy test(), przejeżdżasz przez linę, a potem 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

Ujednolicone menu poleceń

Zwróć uwagę, że po otwarciu menu poleceń jest poprzedzany znakiem większości (>). Dzieje się tak, ponieważ Command Ujednolicono 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 ds. Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

  • Prześlij nam sugestię lub opinię na crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.