Handige functies van de Web Developer plug-in

Het is mogelijk om in browsers plug-ins te installeren. Een handige plug-in tijdens het ontwikkelen van websites is de “Web Developer” plug-in. De kan via de volgende links gedownload worden.

In deze blog zullen een paar functies van deze plug-in toegelicht worden. Dit kan meehelpen in de ontwikkeling van goede én ‘schone’ code.

Disable

Onder de tab “Disable” staat de mogelijkheid om verschillende opties uit te schakelen binnen een site. Wanneer de opties worden aangezet zullen deze geactiveerd blijven tot ze weer uitgeschakeld worden. Deze aanpassing wordt dus ook meegenomen wanneer andere sites worden geopend.

Disable Popups

Met “Disable Popups” worden de pop-ups binnen de site uitgeschakeld.

Disable JavaScript

Via “Disable JavaScript” kan de gehele javascript uitgeschakeld worden op een site. Door deze optie aan te zetten kan er getest worden hoe de site reageert zonder Javascript. Het is belangrijk dat de site blijft functioneren wanneer er geen Javascript gebruikt wordt.

Cookies

In de tab “Cookies” kunnen er cookies binnen de pagina worden toegevoegd, uitgeschakeld en verwijderd worden.

Via “Add Cookie” kunnen er nieuwe cookies worden toegevoegd aan de site. Deze cookies kunnen geheel worden aangepast zodat de waardes naar behoeven zijn.

Met de “Disables Cookies”-knop kunnen alle cookies worden uitgeschakeld. Hiermee kan getest worden wat voor effect dit heeft wanneer de site wordt bezocht.

Als laatste kunnen de cookies op de site verwijderd worden via de “Delete Domain Cookies”, “Delete Path Cookies” en “Delete Session Cookies”. Het voordeel van het verwijderen van de cookies tegenover het uitschakelen is dat de cookies na het verwijderen opnieuw aangemaakt worden. Dit is niet het geval wanneer de cookies geheel zijn uitgeschakeld.

Resize

Via de “Resize”-tab kunnen de formaten van mobiele schermen getest worden.

Wanneer er op de knop “Resize Window” wordt gedrukt kan er ingesteld worden wat het nieuwe formaat moet worden. Dit kan handig zijn om te bepalen hoe de site op mobiel formaat getoond wordt. Via de “Edit Resize Dimensions…” kunnen standaard formaten toegevoegd worden zodat deze snel bereikbaar zijn tijdens de ontwikkeling van websites.

Tools

Onder “Tools” staan verschillende externe tools die voor een developer van belang zijn.

Met “Validate CSS” wordt de huidige pagina gescand op CSS-fouten binnen de site. Dit wordt gedaan via CSS-validator van W3C (http://jigsaw.w3.org/css-validator/). Een andere validator in de plug-in is de “Validate HTML”. Deze functie zal vaak gebruikt worden wanneer een site uit schone ‘HTML’-code moet bestaan. Wanneer er op deze link wordt gedrukt, wordt de huidige pagina geopend in de W3C markup-validator geopend (https://validator.w3.org/).

Wanneer een site lokaal gebouwd wordt kan deze net zoals de live-sites ook getest worden in de validators. Druk hiervoor op de knoppen “Validate Local CSS” en “Validate Local HTML”.