Wat is er nieuw in DevTools (Chrome 70)

Kayce Basken
Kayce Basques
X GitHub

Welkom terug! Het is ongeveer 12 weken geleden dat we onze laatste update uitbrachten, die voor Chrome 68 was. We hebben Chrome 69 overgeslagen omdat we niet genoeg nieuwe functies of gebruikersinterfacewijzigingen hadden om een ​​bericht te rechtvaardigen.

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

Lees verder of bekijk de videoversie van dit document:

Live-expressies in de console

Maak een Live Expression vast aan de bovenkant van je console als je de waarde ervan in real-time wilt bekijken.

  1. Klik op Live-expressie maken Creëer live-expressie De Live Expression-gebruikersinterface wordt geopend.

    De Live Expression-gebruikersinterface

    Figuur 1. De Live Expression-gebruikersinterface

  2. Typ de expressie die u wilt controleren.

    Typ Date.now() in de Live Expression UI.

    Figuur 2. Date.now() typen in de Live Expression UI

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

    Een opgeslagen Live Expression.

    Figuur 3. Een opgeslagen Live Expression

Live Expression-waarden worden elke 250 milliseconden bijgewerkt.

Markeer DOM-knooppunten tijdens Eager Evaluation

Typ een expressie die wordt geëvalueerd tot een DOM-knooppunt in de console. Eager Evaluation markeert nu dat knooppunt in de viewport.

Nadat u document.activeElement in de console hebt getypt, wordt een knooppunt in het venster gemarkeerd.

Figuur 4. Omdat de huidige expressie wordt geëvalueerd tot een knooppunt, wordt dat knooppunt gemarkeerd in het venster.

Hier zijn enkele uitdrukkingen die u wellicht nuttig vindt:

  • document.activeElement 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 gelijk aan het zweven boven een knooppunt in de DOM-boom .
  • $0 voor het markeren van het knooppunt dat op dat moment is geselecteerd in de DOM-boom.
  • $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 voorheen tientallen seconden voordat het Prestatiepaneel de gegevens verwerkte en visualiseerde. Ook het klikken op een gebeurtenis om er meer over te weten te komen in het tabblad Samenvatting duurde soms meerdere seconden. Verwerking en visualisatie gaat sneller in Chrome 70.

Prestatiegegevens verwerken en laden.

Figuur 5. Prestatiegegevens verwerken en laden

Betrouwbaardere foutopsporing

Chrome 70 verhelpt enkele bugs waardoor breekpunten verdwenen of niet werden geactiveerd.

Het verhelpt ook bugs met betrekking tot bronkaarten. Sommige TypeScript-gebruikers instrueerden DevTools om een ​​bepaald TypeScript-bestand te negeren tijdens het stapsgewijs doorlopen van code, terwijl DevTools in plaats daarvan het volledige gebundelde JavaScript-bestand negeerde. Deze oplossingen verhelpen ook een probleem waardoor het Bronnen-paneel over het algemeen traag werkte.

Netwerkbeperking inschakelen via het opdrachtmenu

U kunt nu de netwerksnelheid instellen op snel 3G of langzaam 3G via het menu Opdracht .

Opdrachten voor netwerkbeperking in het opdrachtmenu.

Figuur 6. Netwerkbeperkingsopdrachten in het opdrachtmenu

Voorwaardelijke breekpunten automatisch aanvullen

Gebruik de gebruikersinterface voor automatisch aanvullen om uw voorwaardelijke breekpuntexpressies sneller te typen.

De Autocomplete-gebruikersinterface

Figuur 7. De gebruikersinterface voor automatisch aanvullen

Wist je dat? De Autocomplete-gebruikersinterface is mogelijk dankzij CodeMirror , dat ook de console aanstuurt.

Pauze op AudioContext-evenementen

Gebruik het deelvenster Gebeurtenislisteneronderbrekingspunten om te pauzeren op de eerste regel van een AudioContext levenscyclusgebeurtenis-handler.

AudioContext is onderdeel van de Web Audio API, waarmee u audio kunt verwerken en synthetiseren.

AudioContext-gebeurtenissen in het deelvenster Gebeurtenislistener-breekpunten.

Figuur 8. AudioContext-gebeurtenissen in het deelvenster Gebeurtenislistener-breekpunten

Debug Node.js-apps met ndb

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

  • Detecteren en koppelen aan onderliggende processen.
  • Het plaatsen van breekpunten vóór modules is vereist.
  • Bestanden bewerken in de DevTools-gebruikersinterface.
  • Standaard worden alle scripts buiten de huidige werkmap genegeerd.

De ndb-gebruikersinterface.

Figuur 9. De ndb-gebruikersinterface

Bekijk ndb's README voor meer informatie.

Bonustip: meet gebruikersinteracties in de echte wereld met de User Timing API

Wil je meten hoe lang het duurt voordat echte gebruikers kritische routes op je pagina's voltooien? Overweeg dan om je code te instrumenteren met de User Timing API .

Stel dat u wilt meten hoe lang een gebruiker op uw homepage blijft voordat hij op uw call-to-action (CTA) klikt. Eerst markeert u het begin van de reis in een event handler die is gekoppeld aan een paginalaadgebeurtenis, zoals DOMContentLoaded :

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

Vervolgens markeert u het einde van de reis en berekent u de duur ervan wanneer u op de knop klikt:

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

U kunt uw metingen ook extraheren en ze vervolgens eenvoudig naar uw analyseservice sturen om anonieme, samengevoegde gegevens te verzamelen:

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

DevTools markeert automatisch uw User Timing-metingen in het gedeelte User Timing van uw Performance-opnamen.

Het gedeelte Gebruikerstiming.

Figuur 10. De sectie Gebruikerstiming

Dit is ook handig bij het debuggen of optimaliseren van code. Als je bijvoorbeeld een bepaalde fase in je levenscyclus wilt optimaliseren, roep je window.performance.mark() aan aan het begin en einde van je levenscyclusfunctie. React doet dit in de ontwikkelmodus.

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.