Ontwikkelaars en UI-ontwerpers gebruiken de Inspect Element-functie om websites online aan te passen zonder de broncode te wijzigen. Maar hoe elementen te inspecteren zonder een cursus webontwikkeling te volgen?
Inspect Element is een handige tool voor ontwikkelaars die standaard wordt meegeleverd met populaire webbrowsers. U hoeft alleen maar te weten hoe u de tool met een paar klikken kunt implementeren terwijl u door websites bladert.
U kunt veel goocheltrucs uitvoeren, zoals het wijzigen van de lay-out van de website, het maken van schermafbeeldingen zonder tekst, het wijzigen van lettertypen, het wijzigen van getallen en meer.
Hieronder vindt u een beknopte stapsgewijze handleiding om te leren hoe u moeiteloos elementen kunt inspecteren.
Wat is Inspect Element?
Inspect Element is een webontwikkelingstool die beschikbaar is in de meeste webbrowsers. U kunt het gebruiken om de front-end broncode te bewerken van elke website die u bezoekt.
De wijzigingen die u aanbrengt, vinden plaats in een sandbox in uw webbrowser. U brengt dus geen wijzigingen aan in de eigenlijke website. Ook verdwijnen de oppervlakkige wijzigingen die u aanbrengt wanneer u de pagina vernieuwt.
Hier zijn enkele creatieve manieren om het te gebruiken:
- U moet een screenshot van een website maken en de teksten op de afbeelding irriteren u. Gebruik het gereedschap Element inspecteren om die teksten te verwijderen.
- Je wilt je vrienden voor de gek houden door ze je naam te laten zien in de New York Times of de Washington Post. Inspect Element is de beste manier om dit te doen.
- Test foutopsporingscodes op websites door ze in realtime toe te passen met behulp van de tool Inspect Element. Als het werkt, kunt u de broncode van de backend wijzigen.
- Als digitale marketeer kunt u de zoekwoorden, SEO-titels, metatags, enz. van concurrenten onthullen met behulp van deze machtige tool voor webontwikkeling.
Elementen op Windows inspecteren
Het gebruik van de Inspect Element-tool op Windows is belachelijk eenvoudig. Hieronder vindt u een stapsgewijze handleiding om elementen te inspecteren met behulp van verschillende webbrowsers op Windows:
Google Chrome Inspect-tool
- Tijdens gebruik Google Chrome, klik met de rechtermuisknop overal op een website.
- Het contextmenu met de rechtermuisknop verschijnt.
- Onderaan zie je Inspecteren.
- Klik Inspecteren om de HTML- en CSS-codes op een rechterzijpaneel.
Hoe open ik Inspect Element in Chrome zonder met de rechtermuisknop te klikken?
Er zijn enkele handige snelkoppelingen om de Inspect Element-tool te openen in Google Chrome voor Windows. Deze sneltoetsen zijn als volgt:
- Ctrl + Verschuiving + C
- De functietoets F12
De bovenstaande sneltoetsen werken ook op de Mozilla-browser voor Windows.
Mozilla Inspector-tool
In de Mozilla-browser is het proces hetzelfde als in Google Chrome. echter, de Inspecteur venster verschijnt onderaan de browser in plaats van aan de rechterkant, zoals in Google Chrome.
Microsoft Edge Inspect-tool
Verrassend genoeg werkt Inspect Element van Microsoft Edge op dezelfde manier als de Google Chrome-browser. De tool Inspecteren is beschikbaar door met de rechtermuisknop te klikken. Ook worden de HTML- en CSS-codes aan de rechterkant weergegeven, vergelijkbaar met Google Chrome.
Elementen inspecteren op Mac
Gebruikt u Google Chrome, Mozilla Firefox of Microsoft Edge op de Mac-computers van Apple? Zo ja, dan kunt u de Inspect Element-tool implementeren door de bovenstaande stappen in de Windows-sectie te volgen.
Maar als u de standaard macOS-webbrowser Safari gebruikt, is het gebruik van de Inspect Element-tool een lastig spel. Standaard toont Safari Inspect Element niet op een Mac. Dit is wat u moet doen:
Hoe Inspect Element op Mac te openen
Allereerst moet u ontwikkelaarstools activeren in Safari op een Mac. Hier is hoe:
- Loop de Safari-browser.
- Bezoek een website waarin u webelementen wilt inspecteren.
- Selecteer Safari vanuit de bovenste menubalk van de Safari-browser.
- Klik Voorkeuren vanuit het contextmenu dat wordt geopend.
- Op de Voorkeuren scherm, selecteer Geavanceerd.
- Vink de aan Toon Ontwikkelen menu aan de onderkant van de Geavanceerde voorkeuren scherm.
Je hebt ontwikkelaarstools met succes ingeschakeld in Safari voor Mac. Volg nu deze stappen om Inspect Element te gebruiken:
- Op elk element van een website, zoals een tekst of afbeelding, klik met de rechtermuisknop.
- Er verschijnt een contextmenu. Onderaan zie je Element inspecteren.
- Klik daarop om een foutopsporingssectie te openen onder de website met HTML en CSS codes.
Wat zijn de sleutels voor Inspect Element?
Mogelijk bent u op zoek naar snelkoppelingen voor Inspect Element op Mac. U kunt de volgende gebruiken:
- Commando + Verschuiving + C
- druk de Controle toets en selecteer vervolgens een willekeurig element.
- Klik met twee vingers op het trackpad
Elementen op Chromebooks inspecteren
Chromebook gebruikt Google Chrome als standaardbrowser. Vandaar dat u na het openen van een website met de rechtermuisknop klikt om de optie Element inspecteren te vinden in het contextmenu dat volgt.
Als u een Chromebook gebruikt op het werk of op school, stelt u zich mogelijk deze vraag:
Waarom kan ik mijn Chromebook op school niet inspecteren?
De meeste school- en bedrijfsbeheerders schakelen geavanceerde functies uit op de Chromebook die ze je geven voor werk of studie. Aangezien ontwikkelaarstools geavanceerde functies zijn, is de kans groot dat uw Chromebook op school of op het werk de Inspect Element-tool niet laat zien.
Elementen inspecteren op iPad/iPhone
Helaas kunt u de Inspect Element-tool niet gebruiken op een iPhone of iPad zonder een Mac.
iOS en iPadOS hebben Web Inspector voor de Safari-app. Het werkt echter alleen als u het mobiele apparaat verbindt met een Mac waarop u al ontwikkelaarstools voor Safari hebt geactiveerd. Hieronder staan de stappen die u kunt proberen:
- Open de iPad/iPhone Instellingen app.
- Klik Safari in het navigatievenster aan de linkerkant.
- Blader vervolgens aan de rechterkant naar beneden om te zoeken en te selecteren Geavanceerd.
- Activeer de schakelaar voor Web inspecteur.
- Verbind nu het mobiele apparaat met Mac met behulp van USB.
- Autoriseer de iPhone/iPad op Mac.
- Open een website op een mobiel apparaat in Safari.
- Voer nu Safari uit op de Mac en selecteer Ontwikkelen in de bovenste menubalk.
- Zoek in het contextmenu dat wordt geopend naar de naam van uw mobiele apparaat.
- Beweeg de cursor over het mobiele apparaat om alle geopende websites te bekijken.
- Selecteer nu een website om de HTML- en CSS-broncode in de Safari-browser van Mac te bekijken.
Conclusie
U hebt alle mogelijke manieren onderzocht om de Inspect Element-tool te gebruiken voor het tijdelijk bewerken van webpagina's. U hebt ook geleerd hoe u elementen kunt inspecteren voor verschillende apparaten, zoals Mac, Windows, Chromebook, iPad en iPhone.
De volgende keer dat u voor uw plezier of voor professionele doeleinden een webpagina moet aanpassen, kunt u deze methoden eens proberen. Je zult zeker genieten van deze moeiteloze stappen boven andere gecompliceerde methoden die elders worden uitgelegd.
Vergeet niet om hieronder opmerkingen achter te laten als de bovenstaande stappen u hebben geholpen, elke methode die u uitdagend vindt, of geheime tips over de Inspect Element-tool.
Een webpagina nodig als gedrukte referentie? Leren hoe te sla snel een webpagina op als pdf nu!