Gebruik het paneel Elementen om DOM-elementen te inspecteren en te bewerken.
Overzicht
Het Elements- paneel biedt een robuuste interface voor het inspecteren en manipuleren van de DOM. U kunt de DOM-boom, die lijkt op een HTML-document, gebruiken om specifieke DOM-knooppunten te selecteren en deze met andere hulpmiddelen aan te passen.
Het paneel Elementen heeft ook de volgende tabbladen die relevante hulpmiddelen bevatten:
Stijlen :
- Bekijk en debug CSS-regels die zijn toegepast op een element uit alle stijlbladen.
- Vind ongeldige, overschreven, inactieve of andere CSS die niet werkt zoals bedoeld.
- Bewerk elementen door een declaratie toe te voegen , een klasse toe te passen en door interactie met het Box-model .
- Krijg toegang tot bewerkingsopties voor containers met badges in de DOM-structuur.
Berekend : geeft een overzicht van opgeloste eigenschappen die op een element zijn toegepast zoals ze worden weergegeven door Chrome.
Lay-out : Bevat opties om raster- en flexbox- overlays te wijzigen.
Gebeurtenislisteners : vermeldt alle gebeurtenislisteners en hun kenmerken. Hiermee kunt u de bron van gebeurtenislisteners vinden en filteren op passieve of blokkerende luisteraars .
DOM-breekpunten : geeft een overzicht van de DOM-wijzigingsbreekpunten die zijn toegevoegd vanuit het paneel Elementen en biedt u de mogelijkheid deze in te schakelen, uit te schakelen, te verwijderen of weer te geven.
Eigenschappen : Selecteer een DOM-knooppunt om de eigen en overgenomen eigenschappen van het object te inspecteren en sorteren.
Toegankelijkheid : vermeldt elementen met ARIA-labels en hun eigenschappen. Hiermee kunt u een toegankelijkheidsboom schakelen en inspecteren (experimenteel).
Open het paneel Elementen
Wanneer u DevTools opent , wordt standaard het paneel Elementen geopend. U kunt ook ergens op de pagina een knooppunt inspecteren om automatisch het paneel Elementen te openen.
Om het Elementenpaneel handmatig te openen:
- Open DevTools .
- Open het Commandomenu door op te drukken:
- macOS: Command + Shift + P
- Windows, Linux, ChromeOS: Control + Shift + P
- Begin met het typen van
Elements, selecteer Elementen weergeven en druk op Enter . DevTools geeft het paneel Elementen weer in de lade onder aan uw DevTools-venster.