‘René, ken jij de functie Element Inspecteren in Chrome?’, vraagt Erik, een bevriende vormgever.

‘Nee, ik gebruik Chrome nog niet zo lang. Ik gebruik wel een paar aardige functies en heb een paar apps geïnstalleerd’.

‘Nou, de functie Element Inspecteren zul je beslist ook heel interessant vinden. Ik zal het je laten zien’. Erik gaat achter mijn computer zitten en enkele seconden later zie ik inderdaad een functie die interessant is en praktische en creatieve mogelijkheden biedt’.

De functie Element Inspecteren

De functie “Element Inspecteren” bevindt zich in het optiemenu dat je met een rechter muisklik opent in de browser Google Chrome. Door er op te klikken opent zich een venster met talrijke mogelijkheden. Laat je niet afschrikken door de technisch ogende inhoud, want er kan niets gebeuren.

De functie Element Inspecteren laat je de HTML en Stylesheet (CSS) van de webpagina zien, die je op dat moment bekijkt. Maar niet alleen zien, je kunt er ook wijzigingen in aanbrengen zonder dat het verder gevolgen heeft. Dat komt omdat het werkt met de pagina die je in het tijdelijke geheugen hebt opgeslagen, met de originele pagina gebeurt dus niets. Dat kan ook niet, want die staat ergens op een server waar jij geen toegang toe hebt.

Wanneer je de pagina ververst of naar een andere pagina gaat zijn de veranderingen weg.

Element inspecteren in de praktijk

Ik zal je laten zien hoe het werkt.

Zoals je waarschijnlijk is opgevallen als je vaker op dit blog komt is dat ik afbeeldingen voorzie van de achtergrondkleur van deze site. Daardoor valt het hoofdmotief samen met de achtergrond. Veel van de afbeeldingen zijn screendumps (met Shift-PrntScrn of het Knipprogramma van Windows 7). Daarbij ben ik afhankelijk van de inhoud van het getoonde scherm. Met Element Inspecteren kan ik die getoonde inhoud echter uitgebreid, maar tijdelijk, manipuleren.

1. De originele pagina van de NRC-blogs.

Screenshot van vorige pagina

Stel ik wil net doen of ik een screenshot van gisteren heb gemaakt. Dan moet ik dus die van vandaag verwijderen. In Photoshop kan dat eenvoudig. Maar als ik tekst wil toevoegen heb ik een probleem. Ik moet dan de lettertypen kennen en op mijn computer hebben.

Met Element Inspecteren is het verwijderen van de blogtekst van vandaag slechts het weghalen van een coderegel.

Ga in Google Chrome naar de pagina die je wilt aanpassen en doe ergens in het venster een rechter muisklik. In het optiemenu staat Element Inspecteren helemaal onderaan.

Zoek de regel met de code voor datgene dat je wilt aanpssen.

Hieronder is de regel geselecteerd in het venster van Element Inspecteren. Erboven, in de webpagina, wordt de selecteerde regel gehighlight.

Door, terwijl de regel is geselecteerd of muiscursur erboven hangt, op de rechter muisknop te klikken verschijnt een optiemenu.
Met ‘Delete Node’ is het klusje geklaard. De blog van vandaag verdwijnt en de blog van gisteren staat bovenaan.

Tekst van pagina aanpassen

Nu wil ik ook de tekst van het NRC-bericht nog even aanpassen.

Opnieuw zoek ik de plek waar die is verstopt. De codes zijn verstopt in een outline. Die open je door op de zwarte driehoekjes te muisklikken.

De titel en tekst van het bericht aangepast. Zie dat ik onder de geselecteerde tekst ook al de ‘lees verder’- link heb veranderd. Deze verwijst nu naar deze blogtekst. Daarvoor kies je vanzelfsprekend in het optiemenu voor ‘Edit in HTML’ (rechtermuisknop boven de linkregel).

De foto veranderen

En tenslotte verander ik de foto. De nieuwe foto kun je het best ergens op internet plaatsen, zodat je er makkelijk naar kunt verwijzen.

Nogmaals alles is tijdelijk. Ga je naar een andere pagina dan is alles dat je gedaan hebt weg.

Vooraf eerst even analyseren

Voor je aan een klusje begint is het daarom goed eerst de originele site even te analyseren. Klik je bijvoorbeeld op de foto in de webpagina dan komt er een nieuwe pagina met de vergrootte foto.

Je kunt alles op de pagina aanpassen, dus bijvoorbeeld achtergrondkleur, lettertype en dergelijke. Je kunt ook tekst of code toevoegen zoals ik hier deed met de menutekst, waar ik René als menuoptie toevoegde. Met dit resultaat.

In bijgaande pdf, met werkende link naar mijn webpagina, heb ik nog wat extra afbeeldingen toegevoegd aan bovenstaande tekst.