Overzicht elementenpaneel

Dale St. Marthe

Gebruik het paneel Elementen om DOM-elementen te inspecteren en te bewerken.

Overzicht

Het paneel Elementen biedt een krachtige interface om de DOM te inspecteren en te manipuleren. U kunt de DOM-structuur, die lijkt op een HTML-document, gebruiken om specifieke DOM-knooppunten te selecteren en deze met andere tools te bewerken.

Het paneel Elementen bevat ook de volgende tabbladen met relevante tools:

• Stijlen :

  • Bekijk en debug de CSS-regels die op een element zijn toegepast vanuit alle stylesheets.
  • Zoek naar ongeldige, overschreven, inactieve of andere CSS-regels die niet naar behoren werken.
  • Bewerk elementen door een declaratie toe te voegen , een klasse toe te passen en door interactie met het Box-model .
  • Via de badges in de DOM-structuur krijgt u toegang tot de bewerkingsopties voor containers.

• Berekend : Geeft een overzicht van de opgeloste eigenschappen die op een element worden toegepast tijdens de weergave door Chrome.

• Indeling : Bevat opties om raster- en flexbox- overlays aan te passen.

• Gebeurtenislisteners : Toont een lijst van alle gebeurtenislisteners en hun kenmerken. Hiermee kunt u de bron van gebeurtenislisteners vinden en filteren op passieve of blokkerende listeners .

• DOM-breakpoints : Hier worden de DOM-wijzigingsbreakpoints weergegeven die zijn toegevoegd vanuit het Elementen-paneel. Je kunt ze in- of uitschakelen, verwijderen of weergeven.

• Eigenschappen : Selecteer een DOM-node om de eigen en overgeërfde eigenschappen van het object te inspecteren en te sorteren.

• Toegankelijkheid : Toont een lijst met elementen die ARIA-labels en hun eigenschappen hebben. Hiermee kunt u een toegankelijkheidsboom in- en uitschakelen en inspecteren (experimenteel).

Open het paneel Elementen

Standaard wordt het paneel Elementen geopend wanneer je DevTools opent . Je kunt ook een knooppunt ergens op de pagina inspecteren om het paneel Elementen automatisch te openen.

Om het paneel Elementen handmatig te openen:

1. Open DevTools .
2. Open het Command-menu door op de volgende toets te drukken:
   • macOS: Command + Shift + P
   • Windows, Linux, ChromeOS: Control + Shift + P
3. Begin met het typen van Elements , selecteer Show Elements en druk op Enter . DevTools toont het Elements -paneel in het zijpaneel onderaan uw DevTools-venster.