Wat is er nieuw in DevTools (Chrome 59)

Kayce Basken

Welkom bij een nieuwe aflevering van de release-opmerkingen van DevTools. Bekijk de onderstaande video of lees verder om te zien wat er nieuw is in Chrome DevTools in Chrome 59!

Hoogtepunten

Nieuwe functies

CSS- en JS-codedekking

Vind ongebruikte CSS- en JS-code op het nieuwe tabblad Dekking . Wanneer u een pagina laadt of uitvoert, vertelt het tabblad u hoeveel code er is gebruikt en hoeveel er is geladen. U kunt de grootte van uw pagina's verkleinen door alleen de code te verzenden die u nodig heeft.

Het tabblad Dekking

Als u op een URL klikt, wordt dat bestand weergegeven in het paneel Bronnen , met een uitsplitsing van welke regels code zijn uitgevoerd.

Een overzicht van de codedekking in het paneel Bronnen

Elke coderegel heeft een kleurcode:

  • Continu groen betekent dat de coderegel is uitgevoerd.
  • Continu rood betekent dat de actie niet is uitgevoerd.
  • Een coderegel die zowel rood als groen is, zoals regel 3 in de bovenstaande schermafbeelding, betekent dat slechts een deel van de code op die regel wordt uitgevoerd. Een ternaire expressie zoals var b = (a > 0) ? a : 0 is zowel rood als groen gekleurd.

Het tabblad Dekking openen:

  1. Open het Commandomenu .
  2. Begin met het typen van Coverage en selecteer Dekking tonen .

Schermafbeeldingen op volledige pagina

Bekijk de onderstaande video om te leren hoe je een screenshot maakt van de bovenkant van de pagina, helemaal naar beneden.

Blokkeer verzoeken

Wilt u zien hoe uw pagina zich gedraagt ​​als een bepaald script, stylesheet of andere bron niet beschikbaar is? Klik met de rechtermuisknop op het verzoek in het netwerkpaneel en selecteer Verzoek-URL blokkeren . Er verschijnt een nieuw tabblad Verzoeken blokkeren in de Lade, waarmee u geblokkeerde verzoeken kunt beheren.

Verzoek-URL blokkeren

Stap over asynchroon wachten

Tot nu toe was het lastig om door code zoals het onderstaande fragment te bladeren. Je zou midden in test() zitten, over een regel stappen, en dan zou je onderbroken worden door de setInterval() code. Wanneer u nu asynchrone code zoals test() doorloopt, stapt DevTools consistent van de eerste naar de laatste regel.

  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 wil je je foutopsporingsvaardigheden verbeteren? Bekijk deze nieuwe documenten:

Veranderingen

Uniform opdrachtmenu

Wanneer u nu het Commandomenu opent, ziet u dat uw opdracht wordt voorafgegaan door een groter dan-teken ( > ). Dit komt omdat het Command-menu is verenigd met het Open File- menu, dat Command + O (Mac) of Control + O (Windows, Linux) is.

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .