Wat is er nieuw in DevTools (Chrome 66)

Kayce Basken

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

Lees verder of bekijk de videoversie van de releaseopmerkingen hieronder.

Negeer het script in het netwerkpaneel

In de kolom Initiator in het paneel Netwerk kunt u zien waarom er om een ​​bron is verzocht. Als JavaScript er bijvoorbeeld voor zorgt dat een afbeelding wordt opgehaald, wordt in de kolom Initiator de regel JavaScript-code weergegeven die het verzoek heeft veroorzaakt.

Als uw raamwerk voorheen netwerkverzoeken in een wrapper verpakte, zou de kolom Initiator niet zo nuttig zijn. Alle netwerkverzoeken verwezen naar dezelfde regel wrappercode.

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

  1. Beweeg over de kolom Initiator . De call-stack die het verzoek heeft veroorzaakt, verschijnt in een pop-up.
  2. Klik met de rechtermuisknop op het gesprek dat u wilt verbergen voor 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 scriptpatroon negeren voor meer informatie over het negeren van scripts.

Mooie afdrukken op de tabbladen Voorbeeld en Reactie

Het tabblad Voorbeeld in het paneel Netwerk drukt nu standaard bronnen mooi af wanneer het detecteert dat deze bronnen zijn verkleind.

Het tabblad Voorbeeld drukt standaard de inhoud van analytics.js mooi af.

Figuur 2 . Het tabblad Voorbeeld drukt standaard de inhoud van analytics.js mooi af

Om de niet-verkleinde versie van een bron te bekijken, gebruikt u het tabblad Reactie . U kunt bronnen ook handmatig mooi afdrukken vanaf het tabblad Reactie , via de nieuwe knop Opmaak .

Handmatig de inhoud van analytics.js afdrukken via de knop Opmaak.

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

Een 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 gevallen 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 kan zijn dat HTML niet precies wordt 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 .

Een voorbeeld van HTML bekijken op het tabblad Voorbeeld.

Figuur 4 . Een voorbeeld van HTML bekijken op het tabblad Voorbeeld

Automatisch zoomen aanpassen in apparaatmodus

Open in de Apparaatmodus de vervolgkeuzelijst Zoom en selecteer Zoom automatisch aanpassen om het formaat van de viewport automatisch aan te passen wanneer u de richting van het apparaat wijzigt.

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

Toen DevTools Local Overrides lanceerde in Chrome 65, was een beperking dat het geen wijzigingen kon volgen in stijlen die in HTML waren gedefinieerd. In Figuur 7 staat er bijvoorbeeld een stijlregel in de head van het document die font-weight: bold voor h1 -elementen.

Een voorbeeld van stijlen die in HTML zijn gedefinieerd

Figuur 5 . Een voorbeeld van stijlen die in HTML zijn gedefinieerd

Als u in Chrome 65 de declaratie font-weight wijzigt via het deelvenster DevTools -stijl , wordt de wijziging niet bijgehouden door Lokale overschrijvingen . Met andere woorden: bij de volgende herlaadbeurt keert de stijl terug naar font-weight: bold . Maar in Chrome 66 blijven dit soort veranderingen nu bestaan ​​bij het laden van pagina's.

Bonustip: negeer raamwerkscripts 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 breekpunten van gebeurtenislisteners niet nuttig zijn voor apps die bovenop frameworks zijn gebouwd, omdat de gebeurtenislisteners vaak in raamwerkcode zijn verpakt. In Figuur 8 heb ik bijvoorbeeld een click ingesteld in DevTools. Wanneer ik op de knop in de demo klik, pauzeert DevTools automatisch op de eerste regel met luisteraarcode. 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 uit het Call Stack- paneel negeren om dit click nuttiger te maken.

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

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

De volgende keer dat ik op de knop klik en het click activeer, wordt de Vue.js-code uitgevoerd zonder daarin te pauzeren, en wordt vervolgens gepauzeerd op de eerste regel code in de luisteraar van mijn app, waar ik eigenlijk de hele tijd wilde pauzeren.

Het klikbreekpunt pauzeert nu op de luisteraarcode van de app.

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

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.

Wat is er nieuw in DevTools

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