Als we op internet surfen, hebben we de neiging niet veel na te denken over wat er achter de schermen gebeurt. Tekst, afbeeldingen en video verschijnen gewoon, of niet. Telkens wanneer u een pagina bezoekt, wordt er echter een enorme hoeveelheid code in uw browser of webserver uitgevoerd. Soms is het dus handig om die code te kunnen zien. Bijvoorbeeld als een pagina niet correct wordt geladen, of als u wilt weten hoe een videospeler is ingesloten.
In dit artikel laten we u zien hoe u Element in Safari, Chrome en Firefox kunt inspecteren.
Wat is Inspecteer Element?
Inspect Element is een geavanceerde functie in de meeste webbrowsers waarmee u een venster kunt openen waarin de HTML-, CSS-, JavaScript- en andere codering wordt weergegeven die wordt gecombineerd om de webpagina te bouwen. In sommige webbrowsers moet je dit inschakelen in Instellingen, maar in de meeste browsers staat het al in het menu. Het is vooral bedoeld voor ontwikkelaars om hen in staat te stellen fouten in websites te maken, maar het kan ook in andere situaties nuttig zijn.
Waarom Element in een webbrowser inspecteren?
Naast het debuggen van een pagina is Inspect Element een uitstekend hulpmiddel om te controleren of code zoals Google Analytics, toegevoegd in een contentmanagementsysteem als WordPress, correct is geïmplementeerd. Het kan ook handig zijn om uit te zoeken waarom een video niet wordt afgespeeld of het bestand niet wil downloaden.
Als u een ontwikkelaar bent die graag wil weten hoe een website een specifiek effect heeft bereikt, gebruik dan Inspect Element. U kunt de code zelfs in een browser bewerken om te testen hoe deze eruitziet als u wijzigingen aanbrengt. De webpagina in het hoofdbrowservenster wordt onmiddellijk bijgewerkt om alle wijzigingen te laten zien.
Element inspecteren in een webbrowser
De manier waarop u elementen inspecteert, is afhankelijk van de browser die u gebruikt. We laten u zien hoe u dit doet in Safari, Firefox en Chrome.
Element in Safari inspecteren
Het eerste dat u hoeft te doen om Safari-elementen te inspecteren, is het menu Ontwikkelen inschakelen. Hier ziet u hoe u dat kunt doen.
- Start Safari.
- Klik op het Safari-menu en kies vervolgens Instellingen.
- Kies het tabblad Geavanceerd.
- Vink het vakje 'Toon ontwikkelmenu in de menubalk' aan.
- Sluit Instellingen.
Zodra je het Ontwikkel-menu hebt ingeschakeld, klik je erop en kies je Paginabron weergeven, of druk je op Command-Option-U. Onderaan de browser ziet u een venster geopend met bovenaan een groot aantal tabbladen. Er zijn verschillende dingen die u hier kunt doen.
- Klik op Bronnen om een lijst met alle verschillende delen van de pagina weer te geven. In de zijbalk zie je een lijst met mappen, zoals Frames, Afbeeldingen en Scripts. Klik op de map Afbeeldingen om een galerij met afbeeldingen op de pagina te bekijken. Klik op de vervolgkeuzelijst naast een map om de elementen in die map te bekijken. Klik op een ervan en er verschijnt een voorbeeld in het hoofdvenster.
- Kies het tabblad Elementen om een geneste weergave te zien van de code waaruit de webpagina bestaat. Als u een sectie uitvouwt, zal de code in die sectie zichtbaar zijn; als u dat selecteert, wordt de paginapassage weergegeven waarop deze betrekking heeft.
- Open het infovenster Elementen in een nieuw venster door op de overlappende rechthoeken in de werkbalk te klikken.
- Klik op het tabblad Elementen op het liniaalpictogram om de exacte positionering van elk element te zien.
Hoe u een specifiek webpagina-element in Safari kunt inspecteren en wijzigen
Met de bovenstaande methode krijgt u een goed overzicht van een webpagina in Safari. Maar wat als u een bepaald element op een pagina wilt vinden en dit wilt wijzigen om iets te testen? Hier ziet u hoe:
- Navigeer naar het element dat u op een webpagina wilt inspecteren, bijvoorbeeld een regel tekst.
- Selecteer de tekst en houd de Control-toets ingedrukt en klik erop. Kies vervolgens Element inspecteren in het contextuele menu.
- Het venster wordt onderaan de webpagina geopend en u ziet de code die dat element bestuurt.
- U kunt de tekst in uw browser wijzigen door erop te dubbelklikken in de infovenster en nieuwe tekst te typen. Als het een afbeelding is, kunt u de URL ook vervangen door de URL van een andere afbeelding.
Hoe Inspect Element te gebruiken in Google Chrome
- Start Chrome. Klik op het menu Beeld, verplaats de aanwijzer naar Ontwikkelaar onderaan en kies Elementen inspecteren, of druk op Command-Option-C.
- Rechts van het browservenster wordt een venster geopend waarin de elementen op de webpagina worden weergegeven.
- U zult merken dat de tabbladen bovenaan het infovenster vergelijkbaar zijn met die in Safari: Elementen, Console en Bronnen.
- Ga op het tabblad Elementen met de muis over een sectie om het gedeelte van de webpagina dat hierdoor wordt beheerd te markeren.
- Op het tabblad Bronnen worden alle verschillende soorten elementen samengebracht in mappen, net zoals in Safari.
Meer informatie:Fix Bootrec / fixboot-element niet gevonden in Windows 11/10/7 [Handleiding 2024]
Hoe u een specifiek webpagina-element in Chrome kunt inspecteren en wijzigen
Het proces voor het beoordelen en wijzigen van bepaalde elementen op een webpagina is in Chrome hetzelfde als in Safari.
- Zoek het element op de webpagina. Vervolgens Control-klik erop.
- Kies Inspecteren in het menu. In de zijbalk aan de rechterkant zie je het codegedeelte dat betrekking heeft op het element dat je hebt geselecteerd.
- Klik op de pijl om het hele gedeelte weer te geven.
- Wanneer u de tekstregel vindt die u wilt wijzigen, selecteert u deze, verwijdert u de tekst en typt u de nieuwe tekst. Als het een afbeelding is die u wilt wijzigen, typt of plakt u de URL van de nieuwe afbeelding.
Hoe Inspect Element in Firefox te gebruiken
- Start Firefox. Klik op het menu Extra.
- Beweeg de muisaanwijzer over Browsertools en kies Web Developer Tools.
- Onderaan het scherm ziet u een venster geopend, vergelijkbaar met het venster dat in Safari wordt geopend.
- In dit geval zijn er geen afzonderlijke tabbladen Elementen of Bron. Om de code te inspecteren, kiest u het tabblad Inspecteur.
- U zult merken dat wanneer u op het tabblad Inspecteur over codegedeelten beweegt, de gedeelten van de bovenstaande pagina worden gemarkeerd.
Hoe u een specifiek webpagina-element kunt inspecteren en wijzigen in Firefox
Al het bovenstaande werkt in Firefox, net als in Safari en Chrome.
- Control-klik op het element dat u op de webpagina wilt inspecteren of wijzigen.
- Kies Inspecteren in het menu.
- Klik op de vervolgkeuzepijl om de code weer te geven.
- Selecteer tekst, verwijder deze en typ nieuwe tekst (of selecteer een afbeeldings-URL en vervang deze door de URL voor een andere afbeelding.)
Als u eenmaal weet hoe u een element op de Mac kunt inspecteren, kunt u de broncode op een website analyseren of zelfs wijzigingen aanbrengen en resultaten testen. Het proces is voor de meeste browsers vrijwel hetzelfde. Er is meestal een menu met ontwikkelaarstools of een opdracht voor het weergeven van broncode in een weergavemenu. In Safari is het alleen zichtbaar als je het ontwikkelaarsmenu inschakelt in Instellingen, maar in de meeste browsers staat het in de menubalk. Volg de bovenstaande stappen om elementen in Safari, Chrome of Firefox te inspecteren.