HomeTechPersonal TechHoe een element inspecteren...

Hoe een element inspecteren op Chromebook

Heeft u een vraag over hoe u de broncode van het visuele element op uw Chromebook kunt bekijken? Hiervoor kunt u de speciale DevTools gebruiken in de Google Chrome-app, of op een willekeurige browserpagina. De DevTools zijn een lijst met speciale ontwikkelaarstools die zijn ingebouwd in de Google Chrome-browser. Hiermee kunnen gebruikers onderweg pagina’s bewerken en mogelijke problemen in de gaten houden.

Hoe gebruik je Inspect Element op Chromebook

Voor Chromebooks is de standaardbrowser Google, om de ontwikkelaarshulpprogramma’s op dit apparaat te openen heb je nodig.

  • Open de pagina die u wilt
  • Klik op de 3 puntjes in de rechterbovenhoek van de applicatie
  • Selecteer “Meer Gereedschap
  • Klik op “Developer Tools

Alternatieve manieren om deze functie te gebruiken zijn de F12-toets indrukken of met de rechtermuisknop klikken op het gewenste item

Dit is een universele instructie die geldt voor de meeste browsers op Windows of een ander systeem.

Hoe gebruik je Inspect Element op Mac of Iphone

Is het mogelijk om hetzelfde te doen met een Mac of zelfs een iPhone? Je hoeft alleen maar een paar eenvoudige stappen hieronder te volgen:

Hoe gebruik je het op Mac

Als u een Mac hebt, kunt u het beste kiezen voor Safari. Het openen van de Developer Tools in deze browser is iets anders dan hetzelfde proces in Chrome of Firefox. U zult het volgende moeten doen:

  1. Open de browser
  2. Klik Safari op de naam van de tab
  3. Selecteer “Voorkeuren
  4. Klik dan op het Geavanceerd tandwiel icoon, het zal bovenaan het scherm te vinden zijn
  5. Vink het vakje naast Ontwikkelmenu tonen in menubalk aan

Zodra u dit doet, zal Inspect Element beschikbaar zijn op uw webpagina’s. Je kunt het ook oproepen met CMD + Option + I.

Hoe te gebruiken op iPhone

Als u wilt controleren hoe de mobiele versie van de webpagina er op uw iPhone uitziet met de functie Inspect Elements, moet u eerst de Web Inspector voor uw iOS-apparaat inschakelen:

  • Ga naar Instellingen
  • Selecteer de Safari-app
  • Scroll naar beneden en klik op “Geavanceerd menu
  • Schakel nu het selectievakje naast “Web Inspector” in

Je moet ook het Developermenu op je Mac inschakelen, zoals hierboven is aangegeven. Zodra u deze functies op uw iOS-apparaat en Mac hebt ingeschakeld, zou u het menu Ontwikkelen boven aan uw Mac moeten kunnen zien. U moet er op klikken om de gekoppelde iPhone en de webpagina die daarop geopend is te zien. Wanneer u naar een andere pagina overschakelt, schakelt u ook het venster Web Inspector voor die pagina op uw Mac

Wat is Elemental Panel

Het eerste wat je moet weten is wat het Elementenpaneel is. Als je het ontwerp of externe elementen van de pagina wilt veranderen, moet je de CSS of HTML aanpassen. Je kunt dit doen met een ontwikkelaarstool genaamd het Elementenpaneel. Hiermee kun je je pagina controleren en wijzigen vanaf de front-end. Enkele van de elementen die je daar kunt zien zijn :

  • Informatie over het beeld, zoals de grootte en de bron
  • CSS paneel – deze optie wordt gebruikt om de uiterlijke stijl van de pagina te veranderen. U kunt de parameters zoals lettertypes, groottes, kleuren hier veranderen
  • DOM informatie of DOM paneel met deze optie kunt u het uiterlijk van de pagina controleren. U kunt de positie van elementen wijzigen en volledig navigeren naar de HTML-bestanden
  • Consolepaneel presenteert de nieuwe functies onder de ontwikkelaarstools
  • Element event luisteraars
  • HTML-commentaar
  • Feedback

Inspectie van de gerenderde en natuurlijke afmetingen van een afbeelding

Heel vaak moet je informatie weten over een plaatje op een webpagina, je kunt het “inspecteren”. Dit geeft je de mogelijkheid om bijvoorbeeld de grootte van de afbeelding te weten. Om dit te doen moet je met je muisaanwijzer over die IMG gaan terwijl je in de DOM-boom bent

Inspecteren van specifiek gebruikt beeld uit een bronset (srcset)

Dan kun je controleren welke versie van het plaatje geladen is en wat de exacte srcset bron is. De srcset zal de browser helpen om de versie van de afbeelding op te vragen met de kleinste afmetingen, die iets groter is dan de echte afbeelding. Dit wordt gebruikt om een reeks afbeeldingen met verschillende resoluties te bekijken waaruit de browser kan kiezen. Selecteer eerst het IMG item en controleer vervolgens de $0.currentSrc informatie in de console. Merk op dat je de eigenschappen van afbeeldingen kunt verhogen met srcset als je apparaten met een hogere DPI moet gebruiken.

Verwante artikelen

Voor jou