Elementen inspecteren op Mac, Windows, iPhone en iPad

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

Elementen inspecteren in de Windows Chrome-browser

• Wanneer u Google Chrome gebruikt , klikt u met de rechtermuisknop ergens op een website.
• Het contextmenu met de rechtermuisknop verschijnt.
• Onderaan zie je Inspecteren .
• Klik op Inspecteren om de HTML- en CSS-codes in een rechterdeelvenster te bekijken .

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 + Shift + C
• De functietoets F12

De bovenstaande sneltoetsen werken ook op de Mozilla-browser voor Windows.

Mozilla Inspector-tool

Elementen inspecteren in de Windows Mozilla-browser

In de Mozilla-browser is het proces hetzelfde als in Google Chrome. Het Inspector- venster verschijnt echter onderaan de browser in plaats van aan de rechterkant, zoals in Google Chrome.

Microsoft Edge Inspect-tool

Elementen inspecteren in Windows Edge Browser

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:

• Start de Safari-browser .
• Bezoek een website waarin u webelementen wilt inspecteren.
• Selecteer Safari in de bovenste menubalk van de Safari-browser.
• Klik op Voorkeuren in het contextmenu dat wordt geopend.
• Selecteer Geavanceerd in het voorkeurenscherm .
• Vink het Show Develop -menu onderaan het scherm Geavanceerde voorkeuren aan .

Je hebt met succes ontwikkelaarstools ingeschakeld in Safari voor Mac. Volg nu deze stappen om Inspect Element te gebruiken:

• Klik met de rechtermuisknop op elk element van een website, zoals een tekst of afbeelding .
• Er verschijnt een contextmenu. Onderaan zie je Inspect Element .
• Klik daarop om een ​​foutopsporingsgedeelte onder de website te openen met HTML- en CSS- codes.

What Are the Keys for Inspect Element?

Mogelijk bent u op zoek naar snelkoppelingen voor Inspect Element op Mac. U kunt de volgende gebruiken:

• Command + Shift + C
• Druk op de Control- toets en selecteer 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:

Why Can’t I Inspect on My School Chromebook?

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 op Safari in het navigatievenster aan de linkerkant.

Safari-instellingen openen op iPad of iPhone

• Blader vervolgens aan de rechterkant naar beneden om Geavanceerd te vinden en te selecteren .

Web Inspector activeren op iPad en iPhone

• Activeer de schakelaar voor Web Inspector .
• Verbind nu het mobiele apparaat met de Mac via USB .
• Autoriseer de iPhone/iPad op Mac.
• Open een website op een mobiel apparaat in Safari.
• Start nu Safari 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 tool Inspect Element 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. U 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? Leer nu hoe u snel een webpagina als PDF kunt opslaan !