Artikel top billede

(Foto: Computerworld)

Programmering til Internet Explorer 8

Version 8 af Internet Explorer har fået en del nye værktøjer, der er rettet mod udviklere. Disse værktøjer gør det muligt for dig at debugge html, css og JavaScript i dine web-applikationer direkte i Internet Explorer 8.

Af Tom Madsen, Alt om Data

Denne artikel er oprindeligt bragt på Alt om Data. Computerworld overtog i november 2022 Alt om Data. Du kan læse mere om overtagelsen her.

Igennem hele denne artikel bliver Internet Explorer 8 brugt, og hvis du ikke allerede har modtaget Internet Explorer 8 via Microsoft Update, så kan du finde og downloade den fra www.microsoft.com/download.

Når du har Internet Explorer 8 åben, trykker du på F12, så dukker der et nyt vindue op med udviklerværktøjerne. Hvis du hellere vil have vinduet som en del af Internet Explorer, kan du trykke CTRL-P, så bliver det til en del af Internet Explorer.

Du kan se et eksempel på, hvordan det ser ud på figur 1. Hjemmesiden, jeg bruger til denne artikel, er den selv samme som du er inde på nu - www.altomdata.dk.

Når vinduet med udvikler-værktøjerne er åbent, er der fire faneblade at vælge imellem. Det første er html. Med det faneblad valgt, kan du se html-koden fra hjemmesiden, fuldstændigt som hvis du valgte se kildekode i Internet Explorer, her er det bare nemmere at overskue, fordi der er syntax highlighting for html-koden.

I højre side af vinduet er der fire faneblade, der kan fortælle dig om diverse dele af din html-kode, afhængigt af hvad du har valgt i venstre side af vinduet.

Det første faneblad hedder Styles, og viser css-styles. Det gør faneblad nummer to i venstre side også, men her er det for hele siden, i højre side er det kun for de html-elementer, der er blevet valgt i venstre side.

Det gør det nemmere at dykke ned i de enkelte cdd-styles. Trace Styles fanebladet viser også css, men her er det blevet inddelt efter egenskaber.

Layout-fanebladet giver dig et grafisk overblik over dit html-layout. I det sidste faneblad kaldet Attributes, kan du se, hvilke attributter du har givet din html-kode, og du kan tilføje flere, hvis det er nødvendigt.

Ved at dobbeltklikke på en af de tomme linjer, kan du vælge dine attributter fra en drop-down menu, så du ikke får stavet dem forkert. Du kan se et eksempel på figur 2.

Styr på dine CSS-styles

I de situationer hvor du bruger flere forskellige css-styles til at styre, hvordan din hjemmeside ser ud, har css-fanebladet i venstre side en del hjælp til dig. For det første så er der en drop-down menu, hvor du kan vælge de forskellige css-styles, og i vinduet nedenunder kan du klikke de individuelle elementer til og fra og med det samme se, hvilken effekt det vil have på din side.

Med de nye værktøjer i Internet Explorer 8, kan du nu også tjekke din kode for at se, om den nu også overholder de standarder, der er for html-programmering.

En af menuerne hedder Validate, og under den menu er der en mulighed kaldet Multiple Validations. Du kan se den på figur 3. Med den kan du se, hvilke dele af din kode der skal have et eftersyn for at overholde standarderne.

JavaScript er sammen med PHP og SQL en af hjørnestenene i udvikling til internettet. Vore dages browsere fra Microsoft, Mozilla og Apple er alle sammen blevet rigtigt gode til at afvikle JavaScript hurtigt og effektivt.

Men selvom browserne nu er blevet bedre, så er det stadigvæk svært at udvikle hurtig og fejlfri JavaScript-kode. Indtil videre har udvikler-værktøjerne i Internet Explorer 8 være praktiske, men det er først nu med JavaScript, at de nye værktøjer virkeligt kommer til deres ret.

Faneblad 3 hedder Script, og det er her, du kan se den script-kode, der gemmer sig under en hjemmeside. Her kan du også debugge din kode, fuldstændigt som hvis det var i et af de store udviklingsværktøjer som Visual Studio. Du kan sætte break points og afvikle din kode indtil break pointet, som du kan se på figur 4.

For at sætte et break point klikker du bare til venstre for et af linjenumrene og igen for at fjerne det. I vinduet til højre kan du se, hvilke break points du har sat, men du kan også se stakken, der hører til det script, du er ved at debugge, og du kan se indholdet af de variable, du måtte ønske.

Sidst, men ikke mindst, så er der mulighed for at profilere din kode med de nye værktøjer. Profilering kan være mange ting, men i Internet Explorer 8 dækker det over ydeevne for din kode. Det sidste faneblad hedder Profiler, og det er her, det foregår.

Hvis du klikker på knappen Start Profiling og vender tilbage til din hjemmeside for at klikke lidt rundt og går tilbage og siger stop profiling, så får du et grundigt overblik over, hvad der er blevet eksekveret af kode på din side, og hvor lang tid der er blevet brugt på den enkelte liner kode.

Det gør det enormt nemt at fokusere din indsats, hvis du har et problem med ydeevnen for din hjemmeside. Du kan se et eksempel på sådan en profilering på figur 5.

Det var et hurtigt indblik i de nye muligheder med Internet Explorer 8. Hvis du er ny udi udviklingen af programmer til internettet, så er der her en god mulighed for at kigge på, hvordan andre har valgt at løse et problem og dykke ned i eventuelle problemer med din kode. God fornøjelse med dine eksperimenter.