Webelementen inspecteren met uw browser

Wat te weten

  • In Chrome, Firefox of Safari: Klik met de rechtermuisknop op een element en selecteer Inspecteren.
  • Schakel in Internet Explorer of Edge inspecties in, klik met de rechtermuisknop op een element en selecteer Inspecteer element.

In dit artikel wordt uitgelegd hoe u elementen in Chrome, Firefox, Safari, Internet Explorer en Microsoft Edge kunt inspecteren, inclusief hoe u inspecties in IE en Edge kunt inschakelen.

Webelementen inspecteren met uw browser

Websites zijn opgebouwd uit regels code, maar de resultaten zijn pagina's met afbeeldingen, video's, lettertypen en andere functies. Als u een van die elementen wilt wijzigen of wilt zien waaruit het bestaat, zoekt u de regel code die het bestuurt. Gebruik hiervoor een elementinspectietool. U hoeft geen inspectietool te downloaden of een add-on voor uw favoriete webbrowser te installeren. Klik in plaats daarvan met de rechtermuisknop op het pagina-element en selecteer vervolgens Inspecteren of Inspecteer element. Hoe u toegang krijgt tot deze tool, verschilt echter per browser.

instagram viewer

Dit artikel gebruikt Rechtsaf-Klik om te verwijzen naar de muis-apparaatactie op een Windows-pc en de Controle+Klik actie op een Mac.

Elementen inspecteren in Google Chrome

In Google Chrome, zijn er twee manieren om een ​​webpagina te inspecteren met behulp van de ingebouwde browser Chrome DevTools:

  • Klik met de rechtermuisknop op een element op de pagina of in een leeg gebied en selecteer vervolgens Inspecteren.
  • Ga naar de Chroom menu en selecteer vervolgens Meer hulpmiddelen > Ontwikkelaarstools.
Webelementen in Chrome inspecteren

Gebruik de Chrome DevTools om de. te kopiëren of te bewerken Hypertext-opmaaktaal (HTML) markeren en elementen verbergen of verwijderen totdat de pagina opnieuw wordt geladen.

Wanneer Chrome DevTools aan de zijkant van de pagina wordt geopend, wijzigt u de positie, springt u het uit de pagina, zoekt u naar paginabestanden, selecteer elementen van de pagina om ze beter te bekijken, kopieer bestanden en URL's en pas de instellingen.

Elementen inspecteren in Mozilla Firefox

Mozilla Firefox heeft twee manieren om zijn inspectietool, genaamd Inspector, te openen:

  • Klik met de rechtermuisknop op een element op de webpagina en selecteer vervolgens Inspecteer element.
  • Selecteer in de Firefox-menubalk Hulpmiddelen > Webontwikkelaar > Inspecteur​.
Webelementen in Firefox inspecteren

Terwijl u de aanwijzer over elementen in Firefox beweegt, vindt Inspector automatisch de broncode-informatie van het element. Wanneer u een element selecteert, stopt het on-the-fly zoeken en kunt u het element bekijken vanuit het infovenster.

Klik met de rechtermuisknop op een element om de ondersteunde besturingselementen te vinden. Gebruik de bedieningselementen om de pagina als HTML-opmaak te bewerken, binnenste of buitenste HTML-opmaak te kopiëren of plakken, show Document Object Model (DOM) eigenschappen, maak een screenshot van of verwijder het knooppunt, pas nieuwe attributen toe, zie de Trapsgewijze stijlbladen (CSS), en meer.

Elementen inspecteren in Safari

Er zijn een aantal manieren om webelementen te onderzoeken in: Safari:

  • Klik met de rechtermuisknop op een item of ruimte op een webpagina en selecteer vervolgens Inspecteer element.
  • Ga naar de Ontwikkelen menu en selecteer vervolgens Webinspector tonen.
Inspecteer webelementen in Safari

Als u het menu Ontwikkelen niet ziet, gaat u naar de Safari menu en selecteer Voorkeuren. Op de Geavanceerd tabblad, selecteer de Toon Ontwikkel-menu in menubalk selectievakje.

Selecteer afzonderlijke elementen op de webpagina om de markeringen te zien die aan die sectie zijn gewijd.

Elementen inspecteren in Internet Explorer

Een soortgelijk hulpmiddel voor het inspecteren van elementen, dat toegankelijk is door de Developer Tools in te schakelen, is beschikbaar in Internet Explorer. Om Developer Tools in te schakelen, drukt u op F12. Of ga naar de Hulpmiddelen menu en selecteer Ontwikkelaarstools.

Om het menu Extra weer te geven, drukt u op Alt+X.

Om elementen op een webpagina te inspecteren, klikt u met de rechtermuisknop op de pagina en selecteert u vervolgens Inspecteer element. Selecteer in de Internet Explorer-tool Element selecteren een pagina-element om de HTML- of CSS-opmaak te zien. U kunt het markeren van elementen ook in- of uitschakelen terwijl u door de DOM Explorer bladert.

Webelementen in Internet Explorer inspecteren

Gebruik, net als de andere hulpprogramma's voor elementcontrole, Internet Explorer om elementen te knippen, kopiëren en plakken en om de HTML-opmaak te bewerken, attributen toe te voegen, elementen met bijgevoegde stijlen te kopiëren en meer.

Elementen inspecteren in Microsoft Edge

Voordat u elementen in Microsoft Edge kunt inspecteren, moet u inspectie inschakelen. Er zijn twee manieren om inspectie in te schakelen:

  • Ga naar de adresbalk en voer in over: vlaggen. Selecteer in het dialoogvenster de Toon Bron weergeven en Element inspecteren in het contextmenu selectievakje.
  • druk op F12en selecteer vervolgens DOM-verkenner.

Om een ​​element te inspecteren, klikt u met de rechtermuisknop op een element op een webpagina en selecteert u vervolgens Inspecteer element.

Inspecteer webelementen in Microsoft Edge
instagram story viewer