Wat is er nieuw in DevTools (Chrome 66)

Kayce Basken
Kayce Basques
X GitHub

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

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

Negeer het script in het netwerkpaneel.

De kolom 'Initiator' in het paneel 'Netwerk' geeft aan waarom een ​​bron is opgevraagd. Als bijvoorbeeld JavaScript ervoor zorgt dat een afbeelding wordt opgehaald, toont de kolom 'Initiator' de regel JavaScript-code die de aanvraag heeft veroorzaakt.

Voorheen was de kolom 'Initiator' niet zo nuttig als uw framework netwerkverzoeken in een wrapper verpakte. Alle netwerkverzoeken verwezen immers naar dezelfde regel code in de wrapper.

Wat je in dit scenario echt wilt, is de applicatiecode zien die het verzoek veroorzaakt. Dat is nu mogelijk:

  1. Beweeg de muis over de kolom 'Initiator' . De aanroepstack die het verzoek heeft veroorzaakt, verschijnt in een pop-upvenster.
  2. Klik met de rechtermuisknop op het gesprek dat u wilt verbergen in de resultaten van de initiator.
  3. Selecteer 'Script toevoegen aan negeerlijst' . In de kolom 'Initiator' worden nu alle aanroepen van het script dat u hebt genegeerd, verborgen.

'requests.js' wordt genegeerd.

Afbeelding 1. requests.js negeren

Beheer de scripts die u negeert via het tabblad 'Negeerlijst' in de instellingen .

Zie Script of scriptpatroon negeren voor meer informatie over het negeren van scripts.

Opmaak van de tekst in de tabbladen Voorbeeld en Reactie

Het tabblad Voorbeeld in het paneel Netwerk geeft bronnen nu standaard mooi op wanneer wordt gedetecteerd dat deze bronnen zijn geminificeerd.

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

Afbeelding 2. Het tabblad Voorbeeld toont standaard de inhoud van analytics.js op een overzichtelijke manier.

Om de niet-geminificeerde versie van een bron te bekijken, gebruikt u het tabblad 'Reactie' . U kunt bronnen ook handmatig opmaken via het tabblad 'Reactie' met behulp van de nieuwe knop 'Opmaak' .

De inhoud van analytics.js handmatig netjes opmaken via de knop 'Formatteren'.

Afbeelding 3. De inhoud van analytics.js handmatig netjes opmaken via de knop 'Opmaak' .

HTML-inhoud bekijken in het tabblad Voorbeeld.

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

HTML bekijken in het tabblad Voorbeeld.

Afbeelding 4. HTML bekijken in het tabblad Voorbeeld .

Automatisch aanpassen van de zoom in de apparaatmodus

Wanneer u zich in de apparaatmodus bevindt, opent u het vervolgkeuzemenu Zoom en selecteert u 'Automatisch aanpassen van de zoom' om het weergavegebied automatisch te vergroten of verkleinen wanneer u de oriëntatie van het apparaat wijzigt.

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

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

Een voorbeeld van stijlen gedefinieerd binnen HTML

Afbeelding 5. Een voorbeeld van stijlen gedefinieerd binnen HTML.

In Chrome 65 werd een wijziging in de font-weight -declaratie via het DevTools -stijlpaneel niet bijgehouden door Local Overrides . Met andere woorden, bij de volgende herlaadbeurt werd de stijl teruggezet naar font-weight: bold . In Chrome 66 blijven dergelijke wijzigingen echter wel behouden, ook na het herladen van de pagina.

Bonustip: Negeer frameworkscripts om Event Listener Breakpoints nuttiger te maken.

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

Het klik-breakpoint pauzeert in de wrapper-code van Vue.js.

Figuur 6. Het click breakpoint pauzeert in de wrapper-code van Vue.js.

Omdat het Vue.js-script zich in een apart bestand bevindt, kan ik dat script negeren in het deelvenster 'Call Stack' om dit click breakpoint nuttiger te maken.

Het Vue.js-script wordt genegeerd in het paneel 'Call Stack'.

Afbeelding 7. Het Vue.js-script negeren in het deelvenster 'Oproepstapel' .

De volgende keer dat ik op de knop klik en het click breakpoint activeer, wordt de Vue.js-code uitgevoerd zonder te pauzeren, en pauzeert vervolgens op de eerste regel code in de listener van mijn app, precies waar ik al die tijd al wilde pauzeren.

Het klik-breakpoint pauzeert nu bij de luistercode van de app.

Afbeelding 8. Het click breakpoint pauzeert nu bij de luistercode van de app.

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.

Wat is er nieuw in DevTools?

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