Blogi » Hyödyllisiä IE-työkaluja web-kehittäjälle
Vaikka Internet Explorer onkin lähes kirosana web-kehittäjälle, täytyy sen kanssa vain osata elää, koska suurimmalle osalle tietokoneen käyttäjistä Internet Explorer on yhtä kuin internet eivätkä he osaa/jaksa/halua asentaa esimerkiksi Firefox-selainta, joka noudattelisi standardeja paremmin. Siksipä Internet Exloprerin käyttäjiä ei voi sivuuttaa, joten sivujen toiminta on testattava myös IE:llä. Kuten Firefoxiin on saatavilla web-kehittäjille hyödyllisiä lisäosia, löytyy niitä myös muutamia IE:lle. Alla on esitelty web-kehittäjälle hyödyllisiä ohjelmia tai lisäosia, jotka helpottavat elämää Internet Exloprerin kanssa.
IE Developer Toolbar
IE Developer Toolbar on Microsoftin kehittämä lisäosa Internet Exloprer-selaimeen, joka tuo Internet Exlopreriin Firefoxin Firebug-lisäosan kaltaisen työkalun. Vaikka IE Developer Toolbar onkin huomattavasti rajoittuneempi kuin Firebug, löytyy siitä kuitenkin joitain Firebugista tuttuja hyödyllisiä ominaisuuksia. Lisäosa mahdollistaa mm. ikkunan koon muuttamisen tiettyyn resoluutioon, keksien tietojen näyttämisen, kuvien piilottamisen ja elementtien reunojen näyttämisen (esim. div-elementit tai taulukkojen reunat). Lisäksi IE Developer Toolbar näyttää sivun lähdekoodin puurakenteisena ja mahdollistaa elementin lähdekoodin näyttämisen klikkaamalla jotain kohtaa sivulla. Myös elementin CSS-tyylien muokkaus onnistuu lennossa, jolloin IE näyttää muutokset välittömästi sivulla. CSS-tyylien muokkaus on kuitenkin tehty hankalaksi, koska se ei käytännössä onnistui kuin lisäämällä elementille style-attribuutti ja muokkaamalla sitä. Ei siis kovin käyttäjäystävällistä, mutta parempi kuin ei mitään. Myöskään Firebugista tuttu HTML-koodin muokkaaminen lennossa ei onnistu. Lataa lisäosa...
DebugBar
DebugBar on oikeastaan hyvin samanlainen kuin IE Developer Toolbar. Tällä hetkellä se ei tuo juurikaan lisäarvoa IE Developer Toolbariin, mutta tulevaisuus voi olla toisin. Nyt DebugBar mahdollistaa niin ikään mm. ikkunan koon muuttamisen tiettyyn resoluutioon, lähdekoodin selaamisen puurakenteena ja tietyn sivun kohdan lähdekoodin näyttämisen. Lisäyksenä DebugBar tuo värinpoiminnan. Myös DebugBarin HTTP-liikenteen tarkkailu on joissain tilanteissa erittäin hyödyllinen (tämä olisi ollut kätevä, kun tein AdSensor-widgettiä ja yritin selvittää miten AdSense-palvelun HTTP-liikenne toimii). Kuitenkin IE Developer Toolbar tekee monet asiat mielestäni käyttäjäystävällisemmin kuin DebugBar. DebugBarin tuleviin versioihin on jo jonkin aikaa luvattu mahdollisuutta muokata helposti CSS-kooda lennossa. Mikäli kehittäjätiimi saa CSS-muokkauksen toteutettua, on lisäosa ehdottomasti asentamisen arvoinen, mutta tällä hetkellä lisäosasta ei hirveästi hyötyä ole. Lataa lisäosa...
CSSVista
CSSVista tuo mahdollisuuden muokata CSS-koodia lennossa ja nähdä muutokset suoraan Internet Explorerissa sekä Firefoxissa. Ohjelma jakaa ikkunan kätevästi kahtia ja näyttää, miltä sivu näyttää IE:ssä ja Firefoxissa. Kätevintä kuitenkin on se, että CSSVistan avulla voi kokeilla reaaliaikaisesti, miten CSS-koodin muutokset vaikuttavat sivuun Internet Exloplorerissa. CSS-koodia ei voi kuitenkaan muokata elementtikohtaisesti vaan muokkaus tapahtuu pelkästään muokkaamalla CSS-tyylitiedostoa. Firefoxin Firebugin käytettävyydestä jäädään siis tässäkin kyllä kauaksi, mutta tätä parempaa ei ole IE:lle saatavilla. Windows Vistassa pitää muistaa ajaa ohjelmaa ylläpitäjän oikeuksilla tai muutoin ohjelma ei käynnisty. Lisäksi asetus "Automatic CSS Refreshing" kannattaa ottaa pois päältä - muutoin ohjelma hidastelee liikaa. CSSVista sisältää myös elementtien reunojen näyttämisen sekä ikkunan koon pienentämisen tiettyyn resoluutioon. Lataa ohjelma...
Multiple IE
Tämä ohjelma tuo web-kehittäjälle kätevästi Internet Explorer-selainten aiemmat versiot yhdessä ja samassa paketissa. Windowsissahan ei voi natiivisti ajaa useampaa kuin yhtä Internet Exlopreria. Eli jos asentaa IE7:n, on IE6 mennyttä. Multiple IE:n avulla koneella voi testata nettisivuja seuraavilla IE:n versioilla: IE3, IE4.01, IE5, IE5.5 ja IE6. Lähes pakollinen ohjelma web-sivujen suunnittelijalle. Ohjelma toimii Windows XP:ssä, mutta ei Windows Vistassa. Lataa ohjelma...
IETester
IETester (kuvassa oikealla ylhäällä) on käytännössä samanlainen ohjelma kuin Multiple IE, paitsi että se toimii myös Windows Vistassa ja mahdollistaa sivujen katselun IE:n versiolla IE5.5, IE6, IE7 ja IE8 beta 1. Lataa ohjelma...
HTTPWatch Basic
HTTPWatch lisää Internet Exploreriin monipuolisen HTTP-liikenteen tarkkailun. Lisäosan avulla voi tarkkailla HTTP-pyyntöjen sisältöä samalla kun selaa sivuja IE:llä. Liikenteestä voi katsoa mm. HTTP-pyyntöjen/vastausten otsaketiedot sekä GET- ja POST-pyyntöjen tiedot. Itse käytin tätä lisäosaa kehittäessäni AdSensor-widgettiä, jossa piti selvittää, mitä HTTP-pyyntöjä AdSense-palvelu vaatii. AdSenseen kirjautuminen kun ei ole HTTP-pyyntöjen osalta mikään yksinkertainen juttu, mutta HTTPWatchin avulla sekin selvisin. HTTPWatch näyttää myös monipuoliset tiedot siitä, mihin sivun latauksessa kului aikaa (mm. DNS-kysely, vastauksen odottaminen ja saaminen palvelimelta jne.). Lataa ohjelma...