Hoe Inspect Element te gebruiken

Apparaatkoppelingen

• Android
• Chromebook
• Mac
• ramen
• Toestel ontbreekt?

De meeste mensen zijn zich er niet van bewust dat er een schat aan ontwikkelaarstools tot hun beschikking staat en dat deze verborgen is in hun favoriete browser.

Elke webbrowser biedt hulpmiddelen voor ontwikkelaars om de codering van een website te controleren. Het is echter een vreemde entiteit voor de gemiddelde internetgebruiker. Wie wil er immers naar de codering van een website kijken, 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.

De meeste browsers hebben hulpmiddelen om elementen van een website te inspecteren, maar over het algemeen werken ze allemaal op dezelfde manier.

Inspect Element gebruiken in Google Chrome

1. Open de website die u wilt inspecteren.
   
2. Klik met de rechtermuisknop ergens op de pagina en selecteer Inspecteren .
   
   OF
3. Klik op de drie verticale stippen in de rechterhoek van uw werkbalk.
   
4. Ga naar Meer hulpprogramma's .
   
5. Selecteer Hulpprogramma's voor ontwikkelaars .
   
   OF
6. Druk op de sneltoets F12 op een pc (of CMD + Opties + I op een Mac.)
   

Inspect Element gebruiken in Microsoft Edge

1. Een website openen.
   
2. Klik op de drie verticale stippen in de rechterbovenhoek van de werkbalk van de browser.
   
3. Scroll naar beneden en klik op More Tools .
   
4. Klik op Hulpprogramma's voor ontwikkelaars .
   
   OF
5. Klik met de rechtermuisknop ergens op de website en klik op Inspecteren .
   
   OF
6. Druk op Ctrl+Shift+I .
   

Elk van deze drie methoden geeft hetzelfde resultaat.

Als je dit correct hebt gedaan, wordt er een nieuw venster geopend onder aan je browser. Dit zijn de ontwikkelaarstools en omvatten 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 deelvenster Hulpprogramma's voor ontwikkelaars te verplaatsen:

1. Klik op de drie horizontale stippen in de bovenhoek van het paneel Developer Tools.
   
2. Selecteer een dokzijde (links, onder of rechts) of ontkoppel naar een apart venster.
   

Door de cursor naast de rand van het paneelframe van Developer Tools te houden en te slepen, wordt de werkruimte smaller of breder. Als u er bijvoorbeeld voor kiest om het paneel aan de rechterkant van het browservenster vast te zetten, kunt u de muisaanwijzer op de linkerrand plaatsen. U kunt het paneel slepen om het formaat te wijzigen wanneer u de pijlcursor ziet.

Inspect Element gebruiken (OS-specifiek)

Hoewel veel van de betrokken stappen misschien zijn behandeld door u alleen te laten zien hoe u Inspect Element in de browser gebruikt, laten we u hoe dan ook zien 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 Inspect Element te openen . Hier is een kleine opfriscursus voor u:

1. Een website openen.
   
2. Klik op de drie verticale stippen in de rechterbovenhoek van de werkbalk.
   
3. Selecteer Meer hulpprogramma's .
   
4. Klik op Hulpprogramma's voor ontwikkelaars .
   

U kunt ook de rechtsklikmethode of de F12- functietoets gebruiken om sneller naar de Developer Tools te gaan.

Inspect Element gebruiken op een Android-apparaat

Het uitvoeren van Inspect Element op een Android-apparaat is iets anders. Bekijk hoe u bij het Inspect Element-paneel op Android komt:

1. Druk op de functietoets F12 .
   
2. Kies Toggle Device Bar .
   
3. 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 Inspect Element-functie 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 hebben in hun Developer Tools genaamd Device Simulation.

Het werkt ook op dezelfde manier voor iPhone-apparaten. U hoeft alleen maar de juiste te selecteren in het vervolgkeuzemenu.

Element inspecteren gebruiken in Windows

De Inspect Element-tool is niet noodzakelijkerwijs OS-specifiek, maar wel browserspecifiek. Dat betekent dat Developer Tools een functie zijn van de browser die u gebruikt en niet noodzakelijkerwijs Windows. U kunt echter naar het Inspect Element-paneel gaan, ongeacht welke browser 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:

1. Open de website die u wilt inspecteren.
   
2. Tik op de drie verticale stippen in de hoek van het browservenster.
   
3. Scroll naar beneden en selecteer Meer tools .
   
4. Klik op Hulpprogramma's voor ontwikkelaars .
   

U kunt ook de functietoets F12 gebruiken om Inspect Element sneller te openen. Ook klikken met de rechtermuisknop op de webpagina en Inspecteren selecteren werkt 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:

1. Open de Safari-browser.
   
2. Klik op Safari in het kopteksttabblad en selecteer Voorkeuren in het vervolgkeuzemenu.
   
3. Klik op het geavanceerde tandwielpictogram bovenaan het scherm.
   
4. Vink het vakje aan met de tekst Toon ontwikkelmenu 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 het sneltoetsencommando gebruiken: CMD + Option + I (inspecteren).

Hoe Inspect Element op iOS te gebruiken

Wilt u de functie Inspect Elements 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 Web Inspector inschakelen voor uw iOS-apparaat:

1. Ga naar Instellingen .
   
2. Selecteer nu Safari .
   
3. Scroll naar beneden en tik op het menu Geavanceerd .
   
4. Tik nu op de tuimelschakelaar om Web Inspector in te schakelen .
   

Zorg er ook voor dat het Ontwikkel-menu is ingeschakeld op uw Mac door de stappen in het bovenstaande gedeelte te volgen.

Nadat u zowel mobiele iOS-apparaten als Macs hebt ingeschakeld, ziet u het menu Ontwikkelen in de bovenste balk op uw Mac. Klik erop om de aangesloten iPhone en de actieve webpagina op het apparaat te zien. Als u de webpagina selecteert, wordt ook een Web Inspector-venster geopend voor dezelfde pagina op uw Mac-scherm.

Houd er echter rekening mee dat deze aanwijzingen alleen werken voor Safari met een Mac, niet voor Safari op Windows.

Element inspecteren 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 - Schakel Javascript uit

1. Ga naar Instellingen .
   
2. Zoek Javascript .
   
3. JavaScript uitschakelen .
   

Methode 2 - Toegang tot ontwikkelaarstools op de lange weg

In plaats van met de rechtermuisknop op de muis te klikken om te inspecteren, doet u het volgende:

1. Ga naar Instellingen in uw browser.
   
2. Selecteer Meer hulpprogramma's .
   
3. Scroll naar beneden en klik op Developer tools .
   

Methode 3 - De functietoets gebruiken

U kunt ook proberen de F12- functietoets te gebruiken 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 kunt u ook proberen de broncode te bekijken door view-source: [enter full url] in te typen .

Inspect Element gebruiken op een school-Chromebook

Als uw Chromebook is uitgegeven door een school, omvat het gebruik van de functie Inspect Element een paar eenvoudige stappen:

1. Klik met de rechtermuisknop of tik met twee vingers op de webpagina en selecteer Inspecteren .
   
2. Druk op Ctrl+Shift+I .
   
3. Probeer de view-source:[url] methode te gebruiken, zoals view-source:https://www.wikipedia.com .
   
   

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.

Element inspecteren gebruiken om antwoorden te vinden

U kunt Inspect Element gebruiken om antwoorden te vinden op verschillende zaken, zoals:

• Voorbeeld van site-ontwerp op mobiele apparaten.
• Ontdek zoekwoorden die concurrenten gebruiken.
• Snelheidstests.
• Tekst op een webpagina wijzigen.
• Zoek snelle voorbeelden om ontwikkelaars te laten zien wat je nodig hebt.

Wanneer u het Inspect Element-paneel start, ziet u alle codering voor de website. Dat omvat alle JavaScript-, CSS- en HTML-codering die erin is ingebouwd. Het is alsof u de broncode van een webpagina ziet, behalve dat u wijzigingen in de code kunt aanbrengen. Bovendien krijgt u in realtime te zien welke wijzigingen zijn doorgevoerd.

Deze tool maakt het van onschatbare waarde voor marketeers, ontwerpers en ontwikkelaars om ontwerpwijzigingen te bekijken voordat ze worden afgerond. Het aanbrengen van wijzigingen in de codering met Inspect Element duurt echter niet eeuwig. Wanneer u de pagina opnieuw laadt, keert deze terug naar de standaardstatus.

Aanvullende veelgestelde vragen

Als u na het lezen van bovenstaande geen expert bent op het gebied van Inspect Element, vindt u hier meer antwoorden.

Hoe gebruik ik de opdracht Element inspecteren om antwoorden te vinden?

De enige manier om antwoorden te vinden met behulp van de Inspect Element-functie is als de website deze onmiddellijk onthult na indiening. In dit geval zijn de antwoorden aanwezig in de codering.

Anders bekijkt u gewoon de codering voor de quiz of test wanneer u de Inspect Element-functie gebruikt, evenals alle antwoorden die u indient.

Is Inspect Element illegaal?

Nee, de tool Inspect Element is niet illegaal; het is ontworpen voor webontwikkelaars. Het bekijken van de broncode van een website is niet illegaal; het wordt alleen een probleem als u de verzamelde informatie gebruikt voor snode doeleinden, zoals pogingen tot exploits, enz.

Is het mogelijk om Inspect Element in Browser uit te schakelen?

Het korte antwoord is nee.

U kunt Inspect Element in een browser niet uitschakelen, 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 in zijn geheel uitschakelen.

Maak kennis met de ingewanden van een webpagina

Het bekijken van de Inspect Element-functie van een webpagina is waarschijnlijk een hulpmiddel voor ontwikkelaars waarvan u niet wist dat u het nodig had, zelfs als u zelf geen ontwikkelaar bent. Het heeft tal van ontwerp- en marketingtoepassingen die ervoor kunnen zorgen dat uw website soepeler werkt. En misschien geeft u een voorsprong op een concurrent.

Waar gebruik je Inspect Element voor? Vertel het ons in de comments hieronder.