Wat is Inspect Element en Developer Tools?
Inspect element (of Developer Tools) is als het ware de magische tool van moderne browsers. Klik met de rechtermuisknop op een pagina, klik op inspecteren en voilà! Hier ziet u een gedetailleerde beschrijving van de pagina met de volgende informatie:
- Alle HTML-code die de website structureert
- De CSS-codes die de structuur stijlen en vormgeven
- JS-codes die de animaties aandrijven
- Statistieken over hoe lang het laden van de pagina duurt
- De bestandsgroottes van alle assets
- De volgorde van het laden van bestanden
- Een console pagina om de problemen of verborgen boodschappen van een ondeugende ontwikkelaar te zien.
Alles wat je moet weten over de pagina staat hier! En wil je het beste gedeelte weten? Je hoeft geen nerd of ontwikkelaar (of beide) te zijn om het te gebruiken. Het is voor iedereen! Misschien ben je een ontwerper en wil je weten hoe je ontwerp eruit ziet op een mobiel apparaat of misschien wil je gewoon een andere tint van een kleur zien op je nieuwe header en de tekstgrootte veranderen om het beter zichtbaar te maken. Het belangrijkste is dat uw wijzigingen geen problemen kunnen veroorzaken of iets kapot kunnen maken, omdat alle wijzigingen alleen aan uw kant worden toegepast.
Als u een website-eigenaar bent, wilt u misschien weten hoe snel uw site is, gewoon om te zien of uw klanten problemen hebben om uw website te openen. Of misschien bent u marketeer en wilt u weten welke zoekwoorden uw concurrenten gebruiken. Je snapt het al-inspect element is een goudmijn voor details waar iedereen bij kan! In dit artikel geef ik een aantal nuttige tips over hoe inspect element nuttig kan zijn voor je site.
Hoe kan inspect element nuttig zijn voor je site?
Stel je voor dat je wat tekst wilt wijzigen, een afbeelding of stijl op je website wilt testen, maar daarvoor geen staging-omgeving wilt maken. Je wilt het ook niet serveren aan bezoekers. Geen probleem, dat is waar de Developer Tools van pas kunnen komen.
Hier staat wat je kunt doen met de Developer Tools (Inspect Element):
- Wijzig elke tekst
- Verander kleuren
- Opzoeken van fouten op uw site
- Test uw site in responsive mode
- Monitor de snelheid van het laden van bestanden
Teksten wijzigen, Stijl eigenschappen en nieuwe stijlen toevoegen
Voor het wijzigen van teksten, kunt u gewoon dubbelklikken op het element in de Developer tool. Dan kun je de tekst direct wijzigen. Echter, het veranderen van kleuren en het toevoegen van nieuwe stijlen vereisen een andere aanpak. Voor het wijzigen van stijlen moet u de juiste CSS-klassen aan de rechterkant van het Developer tool vinden.
Het toevoegen van nieuwe stijlen voor de elementen is ook eenvoudig. U kunt gewoon op “element.style” klikken, dat zich aan de rechterkant van de Developer Tools (bovenste gedeelte) bevindt, en dan kunt u daar uw CSS-eigenschappen toevoegen.
Fouten vinden in Developer Tools
U kunt eenvoudig de fouten zien die in Developer Tools worden weergegeven als u worstelt met een probleem dat u niet kunt definiëren. U kunt alle fouten zien op het tabblad Console in Developer Tools. Als er geen fout is en alles werkt prima, dan zie je de tekst “ready for rock” (alleen in Artbees Themes).
Responsive Mode van Developer Tools
U kunt de Responsive Mode in de Developer Tools activeren door op het pictogram “Telefoon en Tablet” te klikken dat rechtsboven in de Developer Tools staat. Na het klikken, zult u in staat om uw website te zien in elke dimensie. Het is een behoorlijk geweldige functie waarmee u uw website in verschillende dimensies kunt testen.
Bronnen controleren in Developer Tools
U kunt in Developer Tools ook de bronnen van uw website controleren, zoals afbeeldingen, javascript bestanden, CSS bestanden, video’s, etc… Je kunt dan alle statistieken zien op het Network Tab in Developer Tools.
Pluk de motorkap van je website met Inspect Element
Ik wil een einde maken aan de perceptie dat alleen een technisch onderlegde ontwikkelaar kan navigeren door alle details die samen het framework van je website vormen. Onderschat niet wat u kunt doen met Inspect Element en hoe informatief de details binnenin kunnen zijn, zodat u kunt zien wat er werkelijk achter het ontwerp van uw website zit.