Wat is er nieuw in DevTools (Chrome 71)

Kayce Basken

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 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 .