Wat is er nieuw in DevTools (Chrome 71)

Kayce Basken
Kayce Basques
X GitHub

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

Lees verder of bekijk de videoversie van deze pagina:

Beweeg de muis over een Live Expression om een ​​DOM-knooppunt te markeren

Wanneer een Live Expression wordt geëvalueerd naar een DOM-knooppunt, beweegt u de muisaanwijzer over het Live Expression-resultaat om dat knooppunt in de viewport te markeren.

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

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

DOM-knooppunten opslaan als globale variabelen

Als u een DOM-knooppunt als een globale variabele wilt opslaan, voert u een expressie uit in de console die wordt geëvalueerd tot 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-boom en selecteer Opslaan als globale variabele .

Opslaan als globale variabele in de DOM-boom.

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

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

Als u netwerklogboeken met collega's wilt analyseren, kunt u de netwerkaanvragen 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 paneel Netwerk te importeren, sleept u het er gewoon naartoe.

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

Het veld _initiator biedt meer context over de oorzaak van de resourceaanvraag. Dit veld wordt gekoppeld aan de kolom Initiator in de tabel Requests.

De initiatiefnemende kolom.

Figuur 9. De initiatorkolom

U kunt ook Shift ingedrukt houden en met de muis over een aanvraag bewegen om de initiator en afhankelijkheden ervan te bekijken.

Initiatoren en afhankelijkheden bekijken.

Figuur 10. Initiatoren en afhankelijkheden bekijken

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

De kolom Prioriteit.

Figuur 11. De kolom Prioriteit

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

Hoe de kolom Prioriteit wordt weergegeven.

Figuur 12. Hoe de kolom Prioriteit wordt weergegeven

Toegang tot het commandomenu vanuit het hoofdmenu

Met het opdrachtmenu krijgt u snel toegang tot DevTools-panelen, -tabbladen en -functies.

Het opdrachtmenu.

Figuur 13. Het opdrachtmenu

U kunt het menu Opdracht nu openen vanuit het hoofdmenu. Klik op het hoofdmenu voornaamst knop en selecteer Opdracht uitvoeren .

Het opdrachtmenu 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 Gebeurtenislistener-breekpunten.

Figuur 16. Picture-in-Picture-gebeurtenissen in het deelvenster Gebeurtenislistener-breekpunten

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

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

  1. Verwijzing naar het knooppunt verkrijgen.

    'Opslaan als globale variabele' gebruiken om een ​​referentie naar het knooppunt te krijgen.

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

  2. Geef het knooppunt door als 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 naar de console te stoppen.

unmonitorEvents(temp1);

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

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 .

Raadpleeg de Command Line Reference voor andere handige functies die u via de console kunt aanroepen.

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.