De meeste mensen zijn zich er niet van bewust dat er een schat aan ontwikkelaarstools tot hun beschikking is en dat deze verborgen zijn in hun favoriete browser.
Elke webbrowser biedt ontwikkelaarstools om de codering van een website te bekijken, maar het is een vreemde entiteit voor de gemiddelde internetgebruiker. Wie wil er tenslotte kijken naar de codering van een website, toch?
Het blijkt dat er veel dingen zijn die je kunt leren door naar de codering van een website te kijken. Lees verder om erachter te komen wat de functie voor het inspecteren van elementen te bieden heeft en hoe u deze kunt gebruiken.
Hoe Inspect Element in een specifieke browser te gebruiken
De meeste browsers hebben tools om elementen van een website te inspecteren, maar ze werken over het algemeen allemaal op dezelfde manier.
Inspect Element gebruiken in Google Chrome
- Open de website die u wilt inspecteren.
- Klik met de rechtermuisknop ergens op de pagina en selecteer Inspecteren.
OF
- Klik op de drie verticale stippen in de rechterhoek van uw werkbalk.
- Ga naar Meer hulpmiddelen.
- Selecteer Ontwikkelaarstools.
OF
- druk de F12 sneltoets op pc of CMD + Opties + I op een Mac.
Inspect Element gebruiken in Microsoft Edge
- Open een website.
- Klik op de drie verticale stippen in de rechterbovenhoek van de werkbalk van de browser.
- Scroll naar beneden en klik op Meer hulpmiddelen.
- Klik op Ontwikkelaarstools.
OF
- Klik met de rechtermuisknop ergens op de website.
- Klik op Inspecteren.
OF
- druk op Ctrl + Shift + I.
Elk van deze drie methoden geeft hetzelfde resultaat.
Als je dit correct hebt gedaan, zie je een nieuw venster onderaan je browser. Dit zijn de Developer Tools en bevatten het tabblad Elementen. Dit is de tool die je nodig hebt om Element te inspecteren.
Het paneel wordt standaard onder aan uw scherm geopend, maar u kunt altijd wijzigen hoe het wordt weergegeven. Volg deze eenvoudige stappen om het paneel Developer Tools te verplaatsen:
- Klik op de drie verticale stippen in de bovenhoek van het deelvenster Developer Tools.
- Selecteer een dockzijde (links, onder of rechts) of ontkoppel naar een apart venster.
Door de cursor naast de rand van het paneelframe van Developer Tools te plaatsen en te slepen, wordt de werkruimte smaller of breder. Als u er bijvoorbeeld voor kiest om het paneel aan de rechterkant van het browservenster te dokken, probeer dan de muisaanwijzer op de linkerrand te plaatsen. U kunt het paneel slepen om het formaat te wijzigen wanneer u de pijlcursor ziet.
Inspect Element gebruiken (specifiek besturingssysteem)
Hoewel veel van de betrokken stappen mogelijk zijn behandeld door u alleen te laten zien hoe u Inspect Element in de browser gebruikt, waar het in de eerste plaats bestaat, maar we zullen u hoe dan ook laten zien hoe op de meeste besturingssystemen.
Inspect Element gebruiken op een Chromebook
De standaardbrowser op een Chromebook is Google, dus volg de instructies van de Chrome-browser om toegang te krijgen Inspecteer element. Hier is een kleine opfriscursus voor jou:
- Open een website.
- Klik op de drie verticale lijnen in de rechterbovenhoek van de werkbalk.
- Selecteer Meer hulpmiddelen.
- Klik op Ontwikkelaarstools.
U kunt ook de rechtsklikmethode gebruiken of F12 functietoets om sneller naar de Developer Tools te gaan.
Hoe Inspect Element op een Android-apparaat te gebruiken?
Het uitvoeren van Inspect Element op een Android-apparaat is iets anders. Bekijk hoe u naar het Inspect Element-paneel op Android gaat:
- druk de F12 functietoets.
- Kiezen Toggle Apparaatbalk.
- Selecteer het Android-apparaat in het vervolgkeuzemenu.
Wanneer u een specifiek Android-apparaat selecteert, zult u merken dat een mobiele versie van de website wordt geladen. Vanaf hier bent u vrij om de functie Inspect Element op uw Android-apparaat te gebruiken vanuit het comfort van uw desktop.
Deze methode werkt voor zowel Chrome- als Firefox-browsers omdat ze een functie in hun ontwikkelaarstools hebben met de naam Apparaatsimulatie.
Het werkt ook op dezelfde manier voor iPhone-apparaten. U hoeft alleen de juiste te selecteren in het vervolgkeuzemenu.
Hoe Inspect Element in Windows te gebruiken
De tool Inspect Element is niet per se OS-specifiek, maar browserspecifiek. Dat betekent dat Developer Tools een functie zijn van de browser die u gebruikt en niet noodzakelijkerwijs Windows. U kunt echter naar het paneel Inspect Element gaan, ongeacht de browser die u verkiest.
Als u Windows OS gebruikt, gebruikt u waarschijnlijk ook de Microsoft Edge-browser. Bekijk hoe u toegang krijgt tot Inspect Element op MS Edge:
- Open de website die u wilt inspecteren.
- Tik op de drie verticale stippen in de hoek van het browservenster.
- Scroll naar beneden en selecteer Meer hulpmiddelen.
- Klik op Ontwikkelaarstools.
U kunt ook de F12 functietoets als u Inspect Element sneller wilt openen. Ook werkt het rechtsklikken op de webpagina en het selecteren van Inspecteren ook.
Hoe Inspect Element op een Mac te gebruiken
Als u een Mac gebruikt, is uw favoriete browser waarschijnlijk Safari. Het openen van Inspect Elements in Safari is iets anders dan in Chrome en Firefox. Maar het is net zo eenvoudig met deze stappen:
- Open de Safari-browser.
- Klik op Safari in het kopteksttabblad.
- Selecteer Voorkeuren uit het vervolgkeuzemenu.
- Klik op de Geavanceerd tandwielpictogram bovenaan het scherm.
- Vink het vakje aan dat zegt: Toon Ontwikkel-menu in menubalk.
Als u deze stappen doorloopt, wordt de functie Inspect Element in uw browser ingeschakeld. Als u Inspect Element niet eerst inschakelt, ziet u de optie niet wanneer u een website opent.
Nadat u deze stap hebt voltooid, klikt u met de rechtermuisknop op een geopende webpagina en selecteert u Inspecteren. U kunt ook de opdracht sneltoetsen gebruiken: CMD + Optie + I (inspecteren).
Hoe Inspect Element op een iPhone te gebruiken
Wilt u de functie Elementen inspecteren gebruiken om te zien hoe een mobiele versie van een webpagina op een iPhone wordt weergegeven? U kunt dit en meer doen met slechts een paar eenvoudige stappen. Maar voordat u naar een element kijkt, moet u inschakelen Webinspecteur voor uw iOS-apparaat:
- Ga naar Instellingen.
- Selecteer nu Safari.
- Scroll naar beneden en tik op de Geavanceerd menu.
- Tik nu op de tuimelschakelaar om in te schakelen Webinspecteur.
Je moet er ook voor zorgen dat het menu Ontwikkelen is ingeschakeld op je Mac:
- Safari openen.
- Selecteer Safari van de bovenste koppen.
- Klik vervolgens op Voorkeuren.
- Klik vervolgens op Geavanceerd.
- Vink het vakje aan dat zegt: Toon Ontwikkel-menu in menubalk.
Nadat u zowel het mobiele iOS-apparaat als de Mac hebt ingeschakeld, ziet u het menu Ontwikkelen in de bovenste balk op uw Mac. Klik erop om de verbonden iPhone en de actieve webpagina op het apparaat te zien. Als u de webpagina selecteert, wordt ook een Web Inspector-venster voor dezelfde pagina op uw Mac-scherm geopend.
Houd er echter rekening mee dat deze aanwijzingen alleen werken voor Safari met een Mac, niet voor Safari op Windows.
Hoe Inspect Element te gebruiken in Google Formulieren
U kunt het Inspect Element ook gebruiken op Google Formulieren. Als u echter op zoek bent naar antwoorden op een quiz, heeft u pech. U vindt de antwoorden niet ingebed in de codering. U kunt antwoorden alleen bekijken als u de maker of bewerker van het formulier bent. Hoe dan ook, als je een student bent die een quiz op Google Formulieren beantwoordt, zie je alleen je eigen antwoorden.
- U kunt met de rechtermuisknop op het formulier klikken en kiezen voor Inspecteren om alle code voor het formulier te zien.
Hoe u Inspect Element gebruikt wanneer het is geblokkeerd
Af en toe zult u merken dat u een webpagina niet kunt inspecteren en dat de selectie Inspecteren grijs wordt weergegeven als u er met de rechtermuisknop op probeert te klikken. Je denkt misschien dat het geblokkeerd is, maar er zijn verschillende manieren om dit te omzeilen:
Methode 1 – Javascript uitschakelen
- Ga in Instellingen.
- Zoekopdracht "JavaScript”.
- Uitzetten JavaScript.
Methode 2 - Krijg toegang tot ontwikkelaarstools op de lange weg
Doe dit in plaats van met de rechtermuisknop op de muis te klikken om te Inspecteren:
- Ga naar Instellingen in uw browser.
- Selecteer Meer hulpmiddelen.
- Scroll naar beneden en klik op Ontwikkelaarstools.
Methode 3 - De functietoets gebruiken
U kunt ook proberen met behulp van de F12 functietoets op webpagina's die de rechtermuisknop voor Inspecteren blokkeren.
Mogelijk moet u al deze methoden proberen voordat u er een tegenkomt die voor u werkt. Als laatste redmiddel kun je ook proberen de broncode te bekijken door in te typen view-source: [vul de volledige url in]. 
Hoe gebruik je Inspect Element op Discord?
Het controleren van uw codering op Discord is een eenvoudig proces. Gebruik gewoon de Ctrl + Shift + I commando of F12 sleutel op een Discord-pagina.
Inspect Element gebruiken op een school-Chromebook
Als uw Chromebook is uitgegeven door een school, vereist het gebruik van de functie Inspect Element een paar eenvoudige stappen:
- Klik met de rechtermuisknop of tik met twee vingers op de webpagina en selecteer Inspecteren.
- druk op Ctrl + Shift + I.
- Probeer en gebruik de view-source:[url] methode, zoals “bekijk-bron://www.wikipedia.com", zonder de aanhalingstekens.
Sommige scholen en organisaties blokkeren deze functie echter. Dus als het niet voor u werkt, moet u mogelijk contact opnemen met uw organisatie of schoolbeheerder.
Hoe u Inspect Element kunt gebruiken om antwoorden te vinden
U kunt Inspect Element gebruiken om antwoorden te vinden op verschillende dingen, zoals:
- Een voorbeeld van het site-ontwerp op mobiele apparaten.
- Ontdek zoekwoorden die concurrenten gebruiken.
- Snelheid testen.
- Tekst op een webpagina wijzigen.
- Vind snelle voorbeelden om ontwikkelaars te laten zien wat u nodig heeft.
Wanneer u het deelvenster Inspect Element start, ziet u alle codering voor de website. Dat omvat alle ingebouwde JavaScript-, CSS- en HTML-codering. Het is alsof je de broncode van een webpagina ziet, behalve dat je de code kunt wijzigen. Bovendien krijgt u alle wijzigingen die in realtime zijn doorgevoerd, te zien.
Deze tool maakt het van onschatbare waarde voor marketeers, ontwerpers en ontwikkelaars om eventuele ontwerpwijzigingen te bekijken voordat ze definitief worden gemaakt. Het aanbrengen van wijzigingen in de codering met Inspect Element duurt echter niet voor altijd. Wanneer u de pagina opnieuw laadt, keert deze terug naar de standaardstatus.
Aanvullende veelgestelde vragen
Hoe gebruik ik de opdracht Inspect Element om antwoorden te vinden?
De enige manier om antwoorden te vinden met behulp van de functie Inspect Element is als de website deze direct na indiening onthult. In dit geval zijn antwoorden aanwezig in de codering.
Anders bekijkt u gewoon de codering voor de quiz of test wanneer u de functie Inspect Element gebruikt, evenals alle antwoorden die u indient.
Is het inspecteren van het element illegaal?
Nee, de tool Inspect Element is niet illegaal, het is ontworpen voor webontwikkelaars. Het bekijken van de broncode voor een website is niet illegaal, het wordt alleen een probleem als je de verzamelde informatie gebruikt voor snode doeleinden, zoals pogingen tot exploits, enz.
Is het mogelijk om Inspect Element in de browser uit te schakelen?
Het korte antwoord is nee.
U kunt het Inspect Element niet uitschakelen in een browser. Maar u kunt parameters instellen die voorkomen dat gebruikers bepaalde acties uitvoeren, zoals rechtsklikken op een webpagina. Er zijn talloze tutorials online om de juiste scripts in te stellen om bepaalde gebeurtenissen uit te schakelen. U kunt de functie Inspect Element echter niet volledig uitschakelen.
Leer de ingewanden van een webpagina kennen
Het bekijken van de Inspect Element-functie van een webpagina is waarschijnlijk een ontwikkelaarstool waarvan u nooit wist dat u deze nodig had - zelfs als u zelf geen ontwikkelaar bent. Het heeft talloze ontwerp- en marketingtoepassingen die uw website soepeler kunnen laten werken. En misschien een voorsprong geven op een concurrent.
Waarvoor gebruik je Inspect Element? Vertel ons erover in de comments hieronder.
