Nieuw in DevTools (Chrome 67)

Kayce Basques
Kayce Basques
X GitHub

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

Videoversie van de release-opmerkingen:

Open het deelvenster Netwerk en druk op Command+F (Mac) of Ctrl+F (Windows, Linux, ChromeOS) om het nieuwe deelvenster Netwerkzoekopdracht te openen. DevTools doorzoekt de headers en hoofdteksten van alle netwerkverzoeken naar de query die je invoert.

Zoeken naar de tekst 'cache-control' met het nieuwe deelvenster Netwerkzoekopdracht.

Afbeelding 1. Zoeken naar de tekst cache-control met het nieuwe deelvenster Netwerkzoekopdracht

Klik op Hoofdlettergevoelig Hoofdlettergevoelig om je zoekopdracht hoofdlettergevoelig te maken. Klik op Reguliere expressie gebruiken Reguliere expressie gebruiken om resultaten te tonen die overeenkomen met het patroon dat je invoert. U hoeft uw RegEx niet tussen slashes te zetten.

Een zoekopdracht met een reguliere expressie in het deelvenster Netwerk zoeken.

Afbeelding 2. Een zoekopdracht met een reguliere expressie in het deelvenster Netwerk zoeken.

De UI van het deelvenster Wereldwijd zoeken komt nu overeen met de UI van het nieuwe deelvenster Netwerk zoeken. De resultaten worden nu ook mooi afgedrukt, zodat ze makkelijker te scannen zijn.

De oude en nieuwe UI.

Afbeelding 3. De oude UI links en de nieuwe UI rechts

Druk op Command+Option+F (Mac) of Ctrl+Shift+F (Windows, Linux, ChromeOS) om Algemeen zoeken te openen. Je kunt het ook openen via het opdrachtmenu.

Voorbeelden van CSS-variabelewaarden in het deelvenster Stijlen

Als de waarde van een CSS-kleureigenschap, zoals background-color of color, is ingesteld op een CSS-variabele, toont DevTools nu een voorbeeld van die kleur.

Een voorbeeld van kleurwaarden voor CSS-variabelen.

Afbeelding 4. In de oude UI links staat er geen kleurvoorbeeld naast color: var(--main-color), terwijl dat in de nieuwe UI rechts wel het geval is.

Kopiëren als fetch

Klik met de rechtermuisknop op een netwerkverzoek en selecteer Kopiëren > Kopiëren als ophalen om de fetch()-equivalente code voor dat verzoek naar het klembord te kopiëren.

De fetch()-equivalentcode voor een verzoek kopiëren.

Afbeelding 5. De fetch()-equivalente code voor een verzoek kopiëren

DevTools produceert code zoals deze:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Updates voor het deelvenster Controles

Nieuwe controles

Het deelvenster Controles bevat 2 nieuwe controles, waaronder:

Nieuwe configuratieopties

Je kunt het deelvenster Controles nu instellen om het volgende te doen:

  • Instellingen voor viewport en user-agent voor desktops behouden. Met andere woorden, je kunt voorkomen dat het deelvenster Controles een mobiel apparaat simuleert.
  • Zet netwerk- en CPU-beperking uit.
  • Opslag, zoals LocalStorage en IndexedDB, behouden tijdens controles.

Nieuwe opties voor controleconfiguratie.

Afbeelding 6. Nieuwe opties voor controleconfiguratie

Trace-gegevens bekijken

Nadat je een pagina hebt gecontroleerd, klik je op Trace bekijken om de gegevens over de laadprestaties waarop je controle is gebaseerd, te bekijken in het deelvenster Prestaties.

De knop Tracering bekijken.

Afbeelding 7. De knop Tracering bekijken

Oneindige lussen stoppen

Als je veel met for-loops, do...while-loops of recursie werkt, heb je waarschijnlijk per ongeluk een oneindige loop uitgevoerd tijdens de ontwikkeling van je site. Je kunt nu het volgende doen om de oneindige lus te stoppen:

  1. Open het deelvenster Bronnen.
  2. Klik op Onderbreken Onderbreken. De knop verandert in Scriptuitvoering hervatten Hervatten.
  3. Houd Scriptuitvoering hervatten Hervatten ingedrukt en selecteer Huidige JavaScript-aanroep stoppen Stoppen.

In de video hierboven wordt de klok geüpdatet via een setInterval()-timer. Als je op Oneindige lus starten klikt, wordt er een do...while-lus uitgevoerd die nooit stopt. Het interval wordt hervat omdat het niet actief was toen Huidige JavaScript-aanroep stoppen Stoppen werd geselecteerd.

Gebruikerstiming op de tabbladen Prestaties

Als je een prestatieopname bekijkt, klik je op het gedeelte Gebruikerstiming om de metingen voor Gebruikerstiming te bekijken op de tabbladen Overzicht, Bottom-up, Aanroepstructuur en Gebeurtenislogboek.

Metingen van Gebruikerstiming bekijken op het tabblad Bottom-up.

Afbeelding 8. Metingen van gebruikerstiming bekijken op het tabblad Bottom-up. De blauwe balk links van het gedeelte Gebruikerstiming geeft aan dat dit gedeelte is geselecteerd.

In het algemeen kun je nu een van de gedeelten selecteren (Hoofdthread, Gebruikerstiming, GPU, ScriptStreamer, enzovoort) en de activiteit van dat gedeelte bekijken op de tabbladen.

JavaScript VM-instanties selecteren in het deelvenster Geheugen

In het deelvenster Geheugen staan nu alle JavaScript VM-instanties die aan een pagina zijn gekoppeld, in plaats van dat ze verborgen zijn achter het dropdownmenu Doel, zoals eerder.

Screenshots van het deelvenster Geheugen voor en na.

Afbeelding 9. In de oude UI aan de linkerkant zijn de JavaScript VM-instanties verborgen achter het dropdownmenu Target, terwijl ze in de nieuwe UI aan de rechterkant worden getoond in de tabel Select JavaScript VM Instance (JavaScript VM-instantie selecteren).

Naast de instantie developers.google.com staan 2 waarden: 8.7 MB en 13.3 MB. De linkerwaarde staat voor geheugentoewijzing vanwege JavaScript. De rechterwaarde vertegenwoordigt al het OS-geheugen dat wordt toegewezen vanwege die VM-instantie. De rechterwaarde is inclusief de linkerwaarde. In Taakbeheer van Chrome komt de linkerwaarde overeen met JavaScript Memory en de rechterwaarde met Memory Footprint.

Naam van tabblad Netwerk gewijzigd in tabblad Pagina

In het deelvenster Bronnen heet het tabblad Netwerk nu het tabblad Pagina.

2 DevTools-vensters naast elkaar, die de naamswijziging tonen.

Afbeelding 10. In de oude UI aan de linkerkant heet het tabblad met de bronnen van de pagina Netwerk, terwijl het in de nieuwe UI aan de rechterkant Pagina heet.

Updates voor het donkere thema

Chrome 67 bevat een aantal kleine wijzigingen in het kleurenschema van het donkere thema. De breakpoint-iconen en de huidige uitvoeringsregel zijn nu bijvoorbeeld groen.

Een screenshot van het nieuwe breakpoint-icoon en het kleurenschema van de huidige uitvoeringsregel.

Afbeelding 11. Een screenshot van het nieuwe breakpoint-icoon en het kleurenschema van de huidige uitvoeringsregel

Certificaattransparantie in het deelvenster Beveiliging

Het deelvenster Beveiliging meldt nu informatie over certificaattransparantie.

Informatie over certificaattransparantie in het deelvenster Beveiliging.

Afbeelding 12. Informatie over certificeringstransparantie in het deelvenster Beveiliging

Site-isolatie in het deelvenster Prestaties

Als je Site-isolatie hebt aangezet, biedt het deelvenster Prestaties nu een flame chart voor elk proces, zodat je het totale werk kunt zien dat elk proces veroorzaakt.

Flame charts per proces in een prestatieopname.

Afbeelding 13. Flame charts per proces in een prestatie-opname

De voorbeeldkanalen downloaden

Overweeg Chrome Canary, Dev of Bèta te gebruiken als je standaardbrowser voor ontwikkeling. Deze previewkanalen geven je toegang tot de nieuwste DevTools-functies, laten je geavanceerde webplatform-API's testen en helpen je problemen op je site te vinden voordat je gebruikers dat doen.

Contact opnemen met het Chrome DevTools-team

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

Nieuw in DevTools

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