Wat is er nieuw in DevTools (Chrome 70)

Kayce Basques

Welkom terug! Het is ongeveer twaalf weken geleden sinds onze laatste update, die voor Chrome 68 was. We hebben Chrome 69 overgeslagen omdat we niet genoeg nieuwe functies of wijzigingen in de gebruikersinterface hadden om een ​​bericht te rechtvaardigen.

Nieuwe functies en grote veranderingen voor DevTools in Chrome 70 zijn onder meer:

• Live-expressies in de console .
• Markeer DOM-knooppunten tijdens Eager Evaluation .
• Optimalisaties van prestatiepanelen .
• Betrouwbaarder debuggen .
• Schakel netwerkbeperking in via het Commandomenu .
• Voorwaardelijke breekpunten automatisch aanvullen .
• Pauzeer bij AudioContext gebeurtenissen .
• Debug Node.js-apps met ndb .
• Bonustip: meet gebruikersinteracties in de echte wereld met de User Timing API .

Lees verder of bekijk de videoversie van dit document:

Live-expressies in de console

Maak een Live-expressie vast aan de bovenkant van uw console als u de waarde ervan in realtime wilt controleren.

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

   

   Figuur 1 . De Live Expression-gebruikersinterface

2. Typ de expressie die u wilt controleren.

   

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

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

   

   Figuur 3 . Een opgeslagen live-expressie

Live-expressiewaarden worden elke 250 milliseconden bijgewerkt.

Markeer DOM-knooppunten tijdens Eager Evaluation

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

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

Hier zijn enkele uitdrukkingen die u wellicht nuttig vindt:

• document.activeElement voor het markeren van het knooppunt dat momenteel focus heeft.
• document.querySelector(s) voor het markeren van een willekeurig knooppunt, waarbij s een CSS-selector is. Dit komt overeen met het zweven over een knooppunt in de DOM-structuur .
• $0 voor het markeren van welk knooppunt dan ook dat momenteel in de DOM-structuur is geselecteerd.
• $0.parentElement om de ouder van het momenteel geselecteerde knooppunt te markeren.

Optimalisaties van prestatiepanelen

Bij het profileren van een grote pagina had het Prestatiepaneel voorheen tientallen seconden nodig om de gegevens te verwerken en te visualiseren. Het duurde soms ook enkele seconden om op een gebeurtenis te klikken om er meer over te lezen op het tabblad Samenvatting. Verwerken en visualiseren gaat sneller in Chrome 70.

Figuur 5 . Prestatiegegevens verwerken en laden

Betrouwbaarder debuggen

Chrome 70 repareert een aantal bugs die ervoor zorgden dat breekpunten verdwenen of niet werden geactiveerd.

Het repareert ook bugs gerelateerd aan bronkaarten. Sommige TypeScript-gebruikers instrueerden DevTools om een ​​bepaald TypeScript-bestand te negeren terwijl ze door de code stapten, en in plaats daarvan negeerde DevTools het volledige gebundelde JavaScript-bestand. Deze oplossingen verhelpen ook een probleem dat ervoor zorgde dat het Bronnenpaneel over het algemeen traag werkte.

Schakel netwerkbeperking in via het Commandomenu

U kunt de netwerkbeperking nu instellen op snel 3G of langzaam 3G via het Commandomenu .

Figuur 6 . Netwerkbeperkingsopdrachten in het Commandomenu

Voorwaardelijke breekpunten automatisch aanvullen

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

Figuur 7 . De gebruikersinterface voor automatisch aanvullen

Wist je dat? De gebruikersinterface voor automatisch aanvullen is mogelijk dankzij CodeMirror , die ook de console aanstuurt.

Pauzeer AudioContext-gebeurtenissen

Gebruik het deelvenster Event Listener Breakpoints om te pauzeren op de eerste regel van een AudioContext levenscyclusgebeurtenishandler.

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

Figuur 8 . AudioContext-gebeurtenissen in het deelvenster Event Listener Breakpoints

Debug Node.js-apps met ndb

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

• Het detecteren van en aansluiten op onderliggende processen.
• Het plaatsen van breekpunten vóór modules is vereist.
• Bestanden bewerken binnen de DevTools-gebruikersinterface.
• Standaard worden alle scripts buiten de huidige werkmap genegeerd.

Figuur 9 . De ndb-gebruikersinterface

Bekijk de README van ndb voor meer informatie.

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

Wilt u meten hoe lang het duurt voordat echte gebruikers een kritiek traject op uw pagina's voltooien? Overweeg om uw code te instrumenteren met de User Timing API .

Stel dat u bijvoorbeeld wilt meten hoe lang een gebruiker op uw startpagina doorbrengt voordat hij op uw call-to-action (CTA)-knop klikt. Eerst markeert u het begin van de reis in een gebeurtenishandler 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 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 prestatie-opnamen.

Figuur 10 . Het gedeelte Gebruikerstiming

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

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.

• Stuur feedback en functieverzoeken naar ons op crbug.com .
• Rapporteer een DevTools-probleem met more_vert Meer opties > Help > Rapporteer een DevTools-probleem in DevTools.
• Tweet op @ChromeDevTools .
• Laat reacties achter op Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

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