Internet Explorer 8 Developer tools

Onder F12 (Developer tools) zitten een aantal krachtige tools in Internet Explorer 8 die de webmaster kunnen helpen bij het ontwikkelen en troubleshooten van webpagina's of webapplicaties.

We willen een aantal aspecten onder de loupe nemen in deze reeks posts. Maar eerst en vooral willen we een tip geven: als de Developer tools worden opgestart voor de eerste keer, krijg je een apart venster.

Je kan dat venster vastpinnen met een knop

waarna de developer tools vastgeklikt wordt in de browser. Mijn ervaring is dat dat een stuk handiger werkt, omdat je een aantal bewerkingen kan doen op de pagina die in de browser wordt weergegeven. Wisselen van venster om het resultaat te bekijken, is lang niet altijd praktisch.

Het is de webmaster (of de programmeur van de webapplicatie) die bepaalt - door de DOCTYPE declaratie of een META instructie - hoe een document wordt weergegeven. Zonder explicite tegenindicatie, zal Internet Explorer 8 strict de CSS2.1 specificaties opvolgen. De gebruiker kan desnoods ervoor kiezen om een document in Compatibility mode weer te geven, wat betekent: weergeven zoals Internet Explorer 7 dat zou doen. Maar sommige pagina's zijn gemaakt voor vroegere versies.

Dit kan je simuleren met de Developer Tools: Je krijgt aanduiding van het document type dat IE8 hanteert, en je kan dat wijzigen. De pagina wordt dan opnieuw geladen, en je kan het verschil zien.

De ontwikkelaar-troubleshooter kan er ook voor kiezen om de browsermodus te wijzigen, en het verschil te bekijken:

De developer tools van Internet Explorer 8 laten je toe om de opbouw van de pagina te bekijken.

Je kan de opbouw van het document en zijn constitutieve HTML bouwstenen bekijken.
Je kan de CSS van het document bekijken. Handig om te zien welke stijl nu effectief wordt toegepast.
Je kan de (clientcode) scriptcode van een pagina bekijken.

In dat venster kan je debuggen, breakpoints instellen en locals opvragen.
Tenslotte is er de Profiler.
En om af te ronden: je kan in het venster van de Developer Tools lijnen uitschakelen en nadien terug inschakelen en waarden wijzigen door erop te klikken en de waarde dan aan te passen.

We willen tenslotte ingaan op het menu.

File laat toe om de wijzigingen ongedaan te maken.
Met Find kan je een element selecteren/identificeren door te klikken. Je kan overd e pagina bewegen en alle elementen lichten op met een blauwe rand.
Disable laat toe om een aantal dingen uit te schakelen: de scripts, de popup blocker, de stijlen.
Met View kan je een aantal dingen zichtbaar maken:

klasse en ID informatie voor de stijlen, paden voor de links, link verslagen, tab indexen, access key (sneltoetsen), broncode in het DOM
Outline laat je toe om tabellen, cellen, DIVs (layers), beelden, gepositioneerde elementen zichtbaar te maken
Via Images kan je beelden al dan niet zichtbaar maken, hun pad tonen, de alternatieve tekst laten oplichten enz.
Cache laat je toe om de cache en de cookies te beheren, om te kijken hoe de pagina of de applicatie zich gedraagt.
Tools geeft de mogelijkheid om het venster qua formaat aan te passen, en geeft je een ruler om een en ander na te meten.
Validate tenslotte geeft je toegang tot hulpmiddelen om je pagina of webapplicatie te checken tegen de standaarden van HTML, CSS en accessibility.

Waarschijnlijk is het pijnlijk om je eigen werk aan deze harde tests bloot te stellen, maar nuttig is het zeer zeker om ontgoochelingen te voorkomen!