Wat is er nieuw in DevTools (Chrome 66)

Kayce Basken
Kayce Basques
X GitHub

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

Lees verder of bekijk hieronder de videoversie van de release-opmerkingen.

Script negeren in het netwerkpaneel

De kolom Initiator in het paneel Netwerk geeft aan waarom een resource is aangevraagd. Als JavaScript bijvoorbeeld een afbeelding ophaalt, toont de kolom Initiator de regel JavaScript-code die de aanvraag heeft veroorzaakt.

Voorheen was de kolom Initiator niet zo nuttig als je framework netwerkverzoeken in een wrapper verpakte. Alle netwerkverzoeken verwezen naar dezelfde regel wrappercode.

Wat u in dit scenario echt wilt, is de applicatiecode zien die de aanvraag veroorzaakt. Dat is nu mogelijk:

  1. Beweeg de muis over de kolom 'Initiator' . De call stack die de aanvraag heeft veroorzaakt, verschijnt in een pop-up.
  2. Klik met de rechtermuisknop op het gesprek dat u wilt verbergen in de initiatorresultaten.
  3. Selecteer Script toevoegen aan negeerlijst . De kolom Initiator verbergt nu alle oproepen van het script die u hebt genegeerd.

'requests.js' wordt genegeerd.

Figuur 1. requests.js negeren

Beheer uw genegeerde scripts via het tabblad Negeerlijst in Instellingen .

Zie Een script of een patroon van scripts negeren voor meer informatie over het negeren van scripts.

Mooi afdrukken op de tabbladen Voorbeeld en Reactie

Het tabblad Voorbeeld in het deelvenster Netwerk drukt bronnen nu standaard mooi af wanneer wordt gedetecteerd dat deze bronnen zijn geminimaliseerd.

Het tabblad Voorbeeld geeft de inhoud van analytics.js standaard mooi weer.

Figuur 2. Het tabblad Voorbeeld geeft de inhoud van analytics.js standaard mooi weer

Om de niet-geminimaliseerde versie van een resource te bekijken, gebruikt u het tabblad Reactie . U kunt resources ook handmatig mooi afdrukken via het tabblad Reactie , via de nieuwe knop Opmaak .

De inhoud van analytics.js handmatig mooi afdrukken via de knop Opmaak.

Figuur 3. Handmatig de inhoud van analytics.js mooi afdrukken via de knop Opmaak

Voorbeeld van HTML-inhoud bekijken op het tabblad Voorbeeld

Voorheen toonde het tabblad Voorbeeld in het paneel Netwerk in bepaalde situaties de code van een HTML-bron, terwijl in andere situaties een voorbeeld van de HTML werd weergegeven. Het tabblad Voorbeeld voert nu altijd een basisweergave van de HTML uit. Het is niet bedoeld als een volledige browser, dus het geeft de HTML mogelijk niet precies weer zoals u verwacht. Als u de HTML-code wilt bekijken, klikt u op het tabblad Reactie of klikt u met de rechtermuisknop op een bron en selecteert u Openen in paneel Bronnen .

Voorbeeld van HTML bekijken op het tabblad Voorbeeld.

Figuur 4. HTML-voorbeeld bekijken op het tabblad Voorbeeld

Automatisch zoomen aanpassen in de apparaatmodus

Open in de apparaatmodus de vervolgkeuzelijst Zoomen en selecteer Zoom automatisch aanpassen om de grootte van het venster automatisch aan te passen wanneer u de apparaatoriëntatie wijzigt.

Lokale overschrijvingen werken nu met sommige stijlen die in HTML zijn gedefinieerd

Toen DevTools Local Overrides in Chrome 65 introduceerde, was één van de beperkingen dat het geen wijzigingen in stijlen die in HTML waren gedefinieerd, kon bijhouden. In Figuur 7 staat bijvoorbeeld een stijlregel in de head van het document die font-weight: bold declareert voor h1 elementen.

Een voorbeeld van stijlen gedefinieerd binnen HTML

Figuur 5. Een voorbeeld van stijlen gedefinieerd binnen HTML

In Chrome 65 werd de wijziging niet bijgehouden door Local Overrides als u de declaratie font-weight wijzigde via het DevTools- stijlvenster . Met andere woorden: bij de volgende herlaadbeurt werd de stijl teruggezet naar font-weight: bold . Maar in Chrome 66 blijven dergelijke wijzigingen nu behouden bij het laden van pagina's.

Bonustip: negeer frameworkscripts om Event Listener Breakpoints nuttiger te maken

Toen ik de video ' Aan de slag met JavaScript debuggen' maakte, merkten sommige kijkers op dat event listener-breekpunten niet nuttig zijn voor apps die op frameworks zijn gebouwd, omdat de event listeners vaak in frameworkcode zijn ingepakt. In Figuur 8 heb ik bijvoorbeeld een click ingesteld in DevTools. Wanneer ik op de knop in de demo klik, pauzeert DevTools automatisch in de eerste regel van de listenercode. In dit geval pauzeert het in de wrappercode van Vue.js op regel 1802, wat niet zo handig is.

Het klikbreekpunt pauzeert in de wrappercode van Vue.js.

Figuur 6. Het click pauzeert in de wrappercode van Vue.js

Omdat het Vue.js-script zich in een apart bestand bevindt, kan ik dat script negeren vanuit het paneel Call Stack , waardoor dit click nuttiger wordt.

Het Vue.js-script uit het paneel Call Stack negeren.

Figuur 7. Het Vue.js-script negeren vanuit het paneel Call Stack

De volgende keer dat ik op de knop klik en het click activeer, wordt de Vue.js-code uitgevoerd zonder te pauzeren. Vervolgens wordt er gepauzeerd bij de eerste regel code in de listener van mijn app, terwijl ik eigenlijk de hele tijd al wilde pauzeren.

Het klikbreekpunt pauzeert nu op de listenercode van de app.

Figuur 8. Het click pauzeert nu op de luistercode van de app

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.