Wat is er nieuw in DevTools (Chrome 70)

Kayce Basques

Welkom terug! Het is ongeveer 12 weken geleden sinds onze laatste update, die voor Chrome 68 was. We hebben Chrome 69 overgeslagen omdat er niet genoeg nieuwe functies of UI-wijzigingen waren om een ​​bericht te rechtvaardigen.

Nieuwe functies en belangrijke wijzigingen in DevTools in Chrome 70 zijn onder andere:

• Live-expressies in de console .
• Markeer DOM-nodes tijdens Eager Evaluation .
• Optimalisaties van het prestatiepaneel .
• Betrouwbaardere foutopsporing .
• Schakel netwerkbeperking in via het opdrachtmenu .
• Voorwaardelijke breekpunten voor automatisch aanvullen .
• Stop bij AudioContext gebeurtenissen .
• Debug Node.js-apps met ndb .
• Bonustip: Meet daadwerkelijke gebruikersinteracties met de User Timing API .

Lees verder, of bekijk de videoversie van dit document:

Live-expressies in de console

Plaats een Live Expression bovenaan je console als je de waarde ervan in realtime wilt volgen.

1. Klik op Live-expressie maken De Live Expression UI wordt geopend.

   

   Afbeelding 1. De Live Expression UI

2. Voer de expressie in die u wilt bewaken.

   

   Afbeelding 2. Het typen van Date.now() in de Live Expression UI

3. Klik buiten de Live Expression-gebruikersinterface om uw expressie op te slaan.

   

   Afbeelding 3. Een opgeslagen Live Expression

De waarden van Live Expression worden elke 250 milliseconden bijgewerkt.

Markeer DOM-knooppunten tijdens Eager Evaluation.

Typ in de console een expressie die resulteert in een DOM-knooppunt, en Eager Evaluation markeert dat knooppunt nu in de viewport.

Figuur 4. Omdat de huidige expressie resulteert in een knooppunt, wordt dat knooppunt in de viewport gemarkeerd.

Hieronder vindt u enkele uitdrukkingen die u wellicht nuttig vindt:

• document.activeElement wordt gebruikt om het knooppunt te markeren dat momenteel de focus heeft.
• document.querySelector(s) voor het markeren van een willekeurig knooppunt, waarbij s een CSS-selector is. Dit is equivalent aan het hoveren over een knooppunt in de DOM-structuur .
• $0 voor het markeren van het knooppunt dat momenteel in de DOM-boom is geselecteerd.
• $0.parentElement om het bovenliggende element van het momenteel geselecteerde knooppunt te markeren.

Optimalisaties van het prestatiepaneel

Bij het profileren van een grote pagina duurde het in het prestatiepaneel voorheen tientallen seconden om de gegevens te verwerken en weer te geven. Ook het klikken op een gebeurtenis om er meer over te weten te komen in het tabblad Samenvatting duurde soms meerdere seconden. De verwerking en weergave verloopt sneller in Chrome 70.

Figuur 5. Verwerking en laden van prestatiegegevens

Betrouwbaarder debuggen

Chrome 70 verhelpt een aantal bugs die ervoor zorgden dat breakpoints verdwenen of niet werden geactiveerd.

Het verhelpt ook bugs met betrekking tot source maps. Sommige TypeScript-gebruikers gaven DevTools de opdracht om een ​​bepaald TypeScript-bestand te negeren tijdens het doorlopen van code, maar in plaats daarvan negeerde DevTools het volledige gebundelde JavaScript-bestand. Deze oplossingen verhelpen ook een probleem waardoor het Sources-paneel over het algemeen traag werkte.

Schakel netwerkbeperking in via het opdrachtmenu.

Je kunt nu via het Command Menu de netwerksnelheid beperken tot snel 3G of langzaam 3G.

Afbeelding 6. Netwerkbeperkingsopdrachten in het opdrachtmenu.

Voorwaardelijke breekpunten voor automatisch aanvullen

Gebruik de automatische aanvulfunctie om uw voorwaardelijke breakpoint- expressies sneller in te typen.

Afbeelding 7. De gebruikersinterface voor automatisch aanvullen.

Wist je dat? De Autocomplete-interface is mogelijk dankzij CodeMirror , dat ook de basis vormt voor de console.

Onderbreek bij AudioContext-gebeurtenissen

Gebruik het deelvenster Gebeurtenisluisteraar-onderbrekingspunten om te pauzeren op de eerste regel van een gebeurtenisafhandelaar voor de levenscyclus AudioContext .

AudioContext maakt deel uit van de Web Audio API, die je kunt gebruiken om audio te verwerken en te synthetiseren.

Afbeelding 8. AudioContext-gebeurtenissen in het deelvenster Gebeurtenisluisteraar-breekpunten.

Debug Node.js-apps met ndb

ndb is een nieuwe debugger voor Node.js-applicaties. Naast de gebruikelijke debugfuncties die je via DevTools krijgt , biedt ndb ook het volgende:

• Het detecteren van en koppelen aan onderliggende processen.
• Het is noodzakelijk om breakpoints vóór modules te plaatsen.
• Bestanden bewerken binnen de DevTools-interface.
• Standaard worden alle scripts buiten de huidige werkmap genegeerd.

Afbeelding 9. De ndb-gebruikersinterface

Bekijk de README van ndb voor meer informatie.

Bonustip: Meet daadwerkelijke gebruikersinteracties met de User Timing API.

Wil je meten hoe lang het daadwerkelijk duurt voordat gebruikers cruciale paginabezoeken op je pagina's voltooien? Overweeg dan om je code te voorzien van de User Timing API .

Stel bijvoorbeeld dat u wilt meten hoe lang een gebruiker op uw homepage blijft voordat hij of zij op uw call-to-action (CTA) knop klikt. U zou dan eerst het begin van het traject markeren in een eventhandler die gekoppeld is aan een pagina-laadgebeurtenis, zoals DOMContentLoaded :

document.addEventListener('DOMContentLoaded>9;, () = {
  window.performance.mark('start');
});

Vervolgens markeer je het einde van de reis en bereken je de duur ervan wanneer er op de knop wordt geklikt:

document.querySelector('#CTA').addEventListener('>click', () = {
  window.performance.mark('end');
  window.performance.measure(';CTA', 'start', 'end');
});

U kunt uw metingen ook extraheren, zodat u ze eenvoudig naar uw analyseservice kunt sturen om anonieme, geaggregeerde gegevens te verzamelen:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

DevTools markeert automatisch uw gebruikerstimingmetingen in het gedeelte 'Gebruikerstiming ' van uw prestatieopnames.

Figuur 10. Het gedeelte Gebruikerstiming

Dit komt ook van pas bij het debuggen of optimaliseren van code. Als je bijvoorbeeld een bepaalde fase van je lifecycle wilt optimaliseren, roep je window.performance.mark() aan aan het begin en einde van je lifecycle-functie. React doet dit in de ontwikkelmodus.

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.

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

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