Wat is er nieuw in DevTools (Chrome 71)

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

Lees verder of bekijk de videoversie van deze pagina:

Beweeg over een Live-expressie om een ​​DOM-knooppunt te markeren

Wanneer een Live Expression evalueert tot een DOM-knooppunt, beweegt u de muis over het Live Expression-resultaat om dat knooppunt in de viewport te markeren.

Beweeg over een Live Expression-resultaat om het knooppunt in de viewport te markeren.

Figuur 1 . Beweeg over een Live Expression-resultaat om het knooppunt in de viewport te markeren

Bewaar DOM-knooppunten als globale variabelen

Om een ​​DOM-knooppunt op te slaan als een globale variabele, voert u in de console een expressie uit die resulteert in een knooppunt, klikt u met de rechtermuisknop op het resultaat en selecteert u vervolgens Opslaan als globale variabele .

Opslaan als globale variabele in de console.

Figuur 2 . Opslaan als globale variabele in de console

Of klik met de rechtermuisknop op het knooppunt in de DOM-structuur en selecteer Opslaan als globale variabele .

Opslaan als globale variabele in de DOM-structuur.

Figuur 3 . Opslaan als globale variabele in de DOM-structuur

Initiator- en prioriteitsinformatie nu in HAR-import en -export

Als u samen met collega's netwerklogboeken wilt diagnosticeren, kunt u de netwerkverzoeken exporteren naar een HAR-bestand .

Netwerkverzoeken exporteren naar een HAR-bestand.

Figuur 8 . Netwerkverzoeken exporteren naar een HAR-bestand

Om het bestand weer in het netwerkpaneel te importeren, hoeft u het alleen maar te slepen en neer te zetten.

Wanneer u een HAR-bestand exporteert, neemt DevTools nu initiator- en prioriteitsinformatie op in het HAR-bestand. Wanneer u HAR-bestanden weer in DevTools importeert, worden de kolommen Initiator en Prioriteit nu ingevuld.

Het veld _initiator biedt meer context over de reden waarom de bron is aangevraagd. Dit komt overeen met de kolom Initiator in de tabel Verzoeken.

De initiatiefnemerskolom.

Figuur 9 . De initiatiefnemerskolom

U kunt ook Shift ingedrukt houden en de muisaanwijzer op een verzoek plaatsen om de initiator en afhankelijkheden ervan te bekijken.

Initiators en afhankelijkheden bekijken.

Figuur 10 . Initiators en afhankelijkheden bekijken

Het veld _priority geeft aan welk prioriteitsniveau de browser aan de bron heeft toegewezen. Dit wordt toegewezen aan de kolom Prioriteit in de tabel Verzoeken, die standaard verborgen is.

De kolom Prioriteit.

Figuur 11 . De kolom Prioriteit

Klik met de rechtermuisknop op de kop van de tabel Verzoeken en selecteer Prioriteit om de kolom Prioriteit weer te geven.

Hoe de kolom Prioriteit wordt weergegeven.

Figuur 12 . Hoe de kolom Prioriteit wordt weergegeven

Open het Commandomenu vanuit het Hoofdmenu

Gebruik het Commandomenu voor een snelle manier om toegang te krijgen tot DevTools-panelen, tabbladen en functies.

Het Commandomenu.

Figuur 13 . Het Commandomenu

U kunt nu het Commandomenu openen vanuit het Hoofdmenu. Klik op het Hoofdmenu voornaamst en selecteer Opdracht uitvoeren .

Het Commandomenu openen vanuit het Hoofdmenu.

Figuur 14 . Het Commandomenu openen vanuit het Hoofdmenu

Picture-in-Picture-breekpunten

Picture-in-Picture is een nieuwe experimentele API waarmee een pagina een zwevend videovenster over het bureaublad kan creëren.

Schakel de selectievakjes enterpictureinpicture , leavepictureinpicture en resize in het deelvenster Event Listener Breakpoints in om te pauzeren wanneer een van deze picture-in-picture-gebeurtenissen wordt geactiveerd. DevTools pauzeert op de eerste regel van de handler.

Picture-in-Picture-gebeurtenissen in het deelvenster Event Listener Breakpoints.

Figuur 16 . Picture-in-Picture-gebeurtenissen in het deelvenster Event Listener Breakpoints

(Bonustip) Voer monitorEvents() uit in de console om te zien hoe de gebeurtenissen van een element worden geactiveerd

Stel dat u een rode rand rond een knop wilt toevoegen nadat u erop hebt scherpgesteld en op R , E , D hebt gedrukt, maar u weet niet aan welke gebeurtenissen u luisteraars moet toevoegen. Gebruik monitorEvents() om alle gebeurtenissen van het element in de console te loggen.

  1. Haal een verwijzing naar het knooppunt op.

    Gebruik 'Opslaan als globale variabele' om een ​​verwijzing naar het knooppunt te krijgen.

    Figuur 17 . Gebruik Store als globale variabele om een ​​verwijzing naar het knooppunt te verkrijgen

  2. Geef het knooppunt door als het eerste argument aan monitorEvents() .

    Het knooppunt doorgeven aan monitorEvents().

    Figuur 18 . Het knooppunt doorgeven aan monitorEvents()

  3. Interactie met het knooppunt. DevTools registreert alle gebeurtenissen van het knooppunt in de console.

    De gebeurtenissen van het knooppunt in de console.

    Figuur 19 . De gebeurtenissen van het knooppunt in de console

Roep unmonitorEvents() aan om het loggen van gebeurtenissen in de console te stoppen.

unmonitorEvents(temp1);

Geef een array door als tweede argument aan monitorEvents() als u alleen bepaalde gebeurtenissen of typen gebeurtenissen wilt monitoren:

monitorEvents(temp1, ['mouse', 'focus']);

Het mouse vertelt DevTools dat alle muisgerelateerde gebeurtenissen, zoals mousedown en click , moeten worden geregistreerd. Andere ondersteunde typen zijn key , touch en control .

Bekijk Command Line Reference voor andere handige functies die u vanuit de console kunt oproepen.

Download de voorbeeldkanalen

Overweeg het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

Wat is er nieuw in DevTools

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

,

Nieuwe functies en grote veranderingen komen naar Chrome Devtools in Chrome 71 omvatten:

Lees verder of bekijk de videoverversie van deze pagina:

Beweeg over een live -uitdrukking om een ​​DOM -knooppunt te markeren

Wanneer een live -uitdrukking evalueert naar een DOM -knooppunt, zweeft u over het live -expressieresultaat om dat knooppunt in de viewport te benadrukken.

Zwevend over een live expressieresultaat om het knooppunt in de Viewport te benadrukken.

Figuur 1 . Zwevend over een live -expressieresultaat om het knooppunt in de viewport te markeren

Bewaar DOM -knooppunten als globale variabelen

Om een ​​DOM-knooppunt op te slaan als een globale variabele, voert u een uitdrukking uit in de console die evalueert naar een knooppunt, klikt u met de rechtermuisknop op het resultaat en selecteert u vervolgens op de winkel als globale variabele .

Bewaar als globale variabele in de console.

Figuur 2 . Bewaren als globale variabele in de console

Of klik met de rechtermuisknop op het knooppunt in de DOM-boom en selecteer de winkel als globale variabele .

Bewaar als globale variabele in de DOM -boom.

Figuur 3 . Bewaar als globale variabele in de DOM -boom

Initiator en prioriteitsinformatie nu in HAR -import en exporteren

Als u netwerklogboeken met collega's wilt diagnosticeren, kunt u de netwerkverzoeken naar een HAR -bestand exporteren .

Netwerkverzoeken exporteren naar een HAR -bestand.

Figuur 8 . Netwerkverzoeken exporteren naar een HAR -bestand

Om het bestand terug in het netwerkpaneel te importeren, sleept en laat het gewoon slepen.

Wanneer u een HAR -bestand exporteert, bevat DevTools nu initiator- en prioriteitsinformatie in het HAR -bestand. Wanneer u HAR -bestanden terug in Devtools importeert, worden de initiator- en prioriteitskolommen nu ingevuld.

Het veld _initiator biedt meer context rond waardoor de bron werd gevraagd. Dit is in kaart gebracht naar de kolom Initiator in de aanvraagtabel.

De initiatorkolom.

Figuur 9 . De initiatorkolom

U kunt ook verschuiving houden en zweven over een verzoek om zijn initiator en afhankelijkheden te bekijken.

Initiatiefnemers en afhankelijkheden bekijken.

Figuur 10 . Initiatiefnemers en afhankelijkheden bekijken

Het veld _priority stelt welk prioriteitsniveau de browser die aan de bron is toegewezen. Dit is in kaart gebracht naar de kolom Prioriteit in de aanvragende tabel, die standaard verborgen is.

De prioriteitskolom.

Figuur 11 . De prioriteitskolom

Klik met de rechtermuisknop op de koptekst van de aanvragen en selecteer Prioriteit om de kolom Prioriteit weer te geven.

Hoe de prioriteitskolom te tonen.

Figuur 12 . Hoe de prioriteitskolom te tonen

Keer toegang tot het opdrachtmenu in het hoofdmenu

Gebruik het opdrachtmenu voor een snelle manier om toegang te krijgen tot Devtools -panelen, tabbladen en functies.

Het opdrachtmenu.

Figuur 13 . Het opdrachtmenu

U kunt nu het opdrachtmenu openen vanuit het hoofdmenu. Klik op het hoofdmenu voornaamst knop en selecteer RUN -opdracht .

Het opdrachtmenu openen in het hoofdmenu.

Figuur 14 . Het opdrachtmenu openen vanuit het hoofdmenu

Picture-in-Picture breekpunten

Picture-in-Picture is een nieuwe experimentele API waarmee een pagina een zwevend videowindelijk over het bureaublad kan maken.

Schakel de enterpictureinpicture , leavepictureinpicture in en resize van selectievakjes in het deelvenster Luisteraar om te pauzeren wanneer een van deze picture-in-Picture-evenementen brandt. Devtools pauzeert op de eerste lijn van de handler.

Picture-in-Picture-gebeurtenissen in het deelvenster Luisteraar Breakpoints.

Figuur 16 . Picture-in-Picture-gebeurtenissen in het deelvenster Evenement Luisteraar Breakpoints

(Bonustip) Ren MonitorEvents () in de console om te kijken naar de evenementen van een element.

Stel dat u een rode rand rond een knop wilt toevoegen nadat u deze hebt gefocust en op R , E , D drukt, maar u weet niet naar welke gebeurtenissen u luisteraars toevoegt. Gebruik monitorEvents() om alle gebeurtenissen van het element op de console te loggen.

  1. Krijg een verwijzing naar het knooppunt.

    'Store als globale variabele' gebruiken om een ​​verwijzing naar het knooppunt te krijgen.

    Figuur 17 . Store gebruiken als globale variabele om een ​​verwijzing naar het knooppunt te krijgen

  2. Geef het knooppunt door als het eerste argument aan monitorEvents() .

    Het knooppunt doorgeven aan monitorevents ().

    Figuur 18 . Het knooppunt doorgeven aan monitorEvents()

  3. Interactie met het knooppunt. DevTools registreert alle gebeurtenissen van het knooppunt op de console.

    De gebeurtenissen van het knooppunt in de console.

    Figuur 19 . De gebeurtenissen van het knooppunt in de console

Bel unmonitorEvents() om te stoppen met logboekingsgebeurtenissen naar de console.

unmonitorEvents(temp1);

Geef een array door als het tweede argument aan monitorEvents() als u alleen bepaalde gebeurtenissen of soorten gebeurtenissen wilt controleren:

monitorEvents(temp1, ['mouse', 'focus']);

Het mouse vertelt Devtools om alle muisgerelateerde gebeurtenissen te loggen, zoals mousedown en click . Andere ondersteunde typen zijn key , touch en control .

Bekijk de opdrachtregelreferentie voor andere handige functies die u vanuit de console kunt aanroepen.

Download de voorbeeldkanalen

Overweeg het gebruik van de Chrome Canary , Dev of Beta als uw standaardontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, test geavanceerde webplatform-API's en vinden problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome Devtools -team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders dat verband houdt met Devtools.

Wat is er nieuw in Devtools

Een lijst van alles wat is behandeld in de serie What's New in Devtools .