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 video hieronder 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 je een pagina laadt of uitvoert, laat het tabblad zien hoeveel code er is gebruikt en hoeveel er is geladen. Je kunt de grootte van je pagina's verkleinen door alleen de code te verzenden die je nodig hebt.

Het tabblad Dekking

Door op een URL te klikken, wordt het betreffende bestand in het paneel 'Bronnen ' weergegeven, met een overzicht van welke regels code zijn uitgevoerd.

Een overzicht van de code coverage in het Sources-paneel.

Elke regel code is voorzien van een kleurcode:

  • Een effen groene kleur betekent dat die regel code is uitgevoerd.
  • Volledig rood betekent dat de actie niet is uitgevoerd.
  • Een regel code die zowel rood als groen is, zoals regel 3 in de bovenstaande schermafbeelding, betekent dat slechts 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 'Show Coverage' .

Schermafbeeldingen van een volledige pagina

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

Blokkeer verzoeken

Wil je zien hoe je pagina zich gedraagt ​​wanneer een bepaald script, stylesheet of andere bron niet beschikbaar is? Klik met de rechtermuisknop op het verzoek in het netwerkpaneel en selecteer 'URL van verzoek blokkeren' . Er verschijnt een nieuw tabblad 'Verzoek blokkeren' in het zijpaneel, waarmee je geblokkeerde verzoeken kunt beheren.

Blokkeerverzoek-URL

Stap over async await heen

Tot nu toe was het doorlopen van code zoals het onderstaande fragment een hele klus. Je zat midden in test() , je ging een regel over, en dan werd je onderbroken door de setInterval() code. Nu, wanneer je asynchrone code zoals test() doorloopt, gaat 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 relatief nieuwe documentatie:

Wijzigingen

Gecombineerd opdrachtmenu

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

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

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

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .