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.

Als een Live Expression resulteert in een DOM-node, beweeg dan de muis over het resultaat van de Live Expression om die node in de viewport te markeren.

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

Afbeelding 1. De muiscursor boven een Live Expression-resultaat plaatsen om het knooppunt in de viewport te markeren.

Sla DOM-nodes op als globale variabelen.

Om een ​​DOM-node als globale variabele op te slaan, voer je een expressie in de console uit die resulteert in een node, klik je met de rechtermuisknop op het resultaat en selecteer je vervolgens 'Opslaan als globale variabele' .

Sla dit op als een globale variabele in de console.

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

Sla dit op als een globale variabele in de DOM-structuur.

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

Informatie over initiatiefnemers en prioriteiten is nu beschikbaar in de HAR-import- en exportgegevens.

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

Netwerkverzoeken exporteren naar een HAR-bestand.

Afbeelding 8. Netwerkverzoeken exporteren naar een HAR-bestand.

Om het bestand terug te importeren in het netwerkpaneel, sleept u het er gewoon naartoe.

Wanneer u een HAR-bestand exporteert, voegt DevTools nu informatie over de initiator en prioriteit toe aan het HAR-bestand. Wanneer u HAR-bestanden weer in DevTools importeert, worden de kolommen ' Initiator' en 'Prioriteit' nu automatisch ingevuld.

Het veld _initiator geeft meer context over de oorzaak van het verzoek om de bron. Dit veld komt overeen met de kolom Initiator in de tabel Requests.

De kolom van de initiatiefnemer.

Figuur 9. De initiatorkolom

Je kunt ook Shift ingedrukt houden en met de muis over een verzoek bewegen om de initiatiefnemer en de 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 toegekend. Dit komt overeen met de kolom Priority in de tabel Requests, die standaard verborgen is.

De kolom Prioriteit.

Figuur 11. De kolom Prioriteit

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

Hoe toon ik de kolom Prioriteit?

Afbeelding 12. Hoe de kolom Prioriteit weer te geven.

Open het opdrachtmenu vanuit het hoofdmenu.

Gebruik het opdrachtmenu voor een snelle manier om toegang te krijgen tot de panelen, tabbladen en functies van DevTools.

Het commandomenu.

Afbeelding 13. Het commandomenu

Je kunt het opdrachtmenu nu openen vanuit het hoofdmenu. Klik op het hoofdmenu. voornaamst Klik op de knop en selecteer 'Opdracht uitvoeren' .

Het opdrachtmenu openen vanuit het hoofdmenu.

Afbeelding 14. Het opdrachtmenu 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 Gebeurtenisluisteraar-breekpunten.

Afbeelding 16. Picture-in-Picture-gebeurtenissen in het deelvenster Gebeurtenisluisteraar-breekpunten.

(Bonustip) Voer monitorEvents() uit in de console om te zien wanneer een element gebeurtenissen activeert.

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

  1. Verkrijg een verwijzing naar het knooppunt.

    Door 'Opslaan als globale variabele' te gebruiken om een ​​verwijzing naar het knooppunt te verkrijgen.

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

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

    Het knooppunt doorgeven aan monitorEvents().

    Figuur 18. Het knooppunt doorgeven aan monitorEvents()

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

    De gebeurtenissen van het knooppunt in de console.

    Afbeelding 19. De gebeurtenissen van het knooppunt in de console.

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

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 geeft DevTools de opdracht om alle muisgerelateerde gebeurtenissen, zoals mousedown en click te registreren. Andere ondersteunde typen zijn key , touch en control .

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

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