Wat is er nieuw in DevTools (Chrome 59)

Kayce Basken
Kayce Basques
X GitHub

Welkom bij een nieuwe aflevering van de release-opmerkingen voor 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 met het nieuwe tabblad Dekking . Wanneer u een pagina laadt of uitvoert, geeft het tabblad aan 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 hebt.

Het tabblad Dekking

Als u op een URL klikt, wordt het betreffende bestand weergegeven in het paneel Bronnen , met een overzicht van de uitgevoerde coderegels.

Een overzicht van de codedekking in het paneel Bronnen

Elke regel code is kleurgecodeerd:

  • Massief groen betekent dat de coderegel is uitgevoerd.
  • Effen rood betekent dat de opdracht niet is uitgevoerd.
  • Een regel code die zowel rood als groen is, zoals regel 3 in de schermafbeelding hierboven, betekent dat alleen een deel van de code op die regel is uitgevoerd. Een ternaire expressie zoals var b = (a > 0) ? a : 0 is bijvoorbeeld zowel rood als groen gekleurd.

Om het tabblad Dekking te openen:

  1. Open het opdrachtmenu .
  2. Begin met het typen Coverage en selecteer Dekking weergeven .

Schermafbeeldingen van de volledige pagina

Bekijk de onderstaande video om te leren hoe u een screenshot maakt van de bovenkant van de pagina tot aan de onderkant.

Blokkeerverzoeken

Wilt u zien hoe uw pagina zich gedraagt ​​wanneer een bepaald script, stylesheet of andere bron niet beschikbaar is? Klik met de rechtermuisknop op de aanvraag in het paneel Netwerk en selecteer 'URL voor aanvragen blokkeren' . Er verschijnt een nieuw tabblad 'Aanvragen blokkeren' in de Lade, waar u geblokkeerde aanvragen kunt beheren.

Blokkeerverzoek-URL

Stap over async wait

Tot nu toe was het doorlopen van code zoals het onderstaande fragment een hoofdpijndossier. Je zat midden in test() en stapte over een regel, waarna je werd onderbroken door de setInterval() code. Nu, wanneer je door asynchrone code zoals test() stapt, 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 debugvaardigheden verbeteren? Bekijk dan deze nieuwe documentatie:

Wijzigingen

Geünificeerd commandomenu

Wanneer u nu het menu Opdrachten opent, ziet u dat uw opdracht voorafgegaan wordt door een groter-dan-teken ( > ). Dit komt doordat het menu Opdrachten is samengevoegd met het menu Bestand openen , dat u kunt openen met Command + O (Mac) of Control + O (Windows, Linux).

Download de previewkanalen

Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om nieuwe functies, updates of iets anders met betrekking tot DevTools te bespreken.

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.