Overzicht elementenpaneel

Dale St. Marthe

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

Overzicht

The Elements panel provides a robust interface to inspect and manipulate the DOM. You can use the DOM tree, which resembles an HTML document, to select specific DOM nodes and modify them with other tools.

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 inschakelen, 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 de toegankelijkheidsstructuur van de pagina in- of uitschakelen en inspecteren.

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.