Koti Julkaisu

RSS

Firebug – web-kehittäjän leatherman

Firebug – web-kehittäjän leatherman

Joko Firebug on sinulle tuttu? Jos ei, niin nyt on korkea aika tutustua tähän Firefox-lisäosaan. Firebug on kiteytetty hyvin sanoihin Web Development Evolved. Se tarjoaa paljon aikaa ja vaivaa säästäviä työkaluja web-suunnittelijan ja -kehittäjän avuksi.

Lisäosan asennus noudattaa totuttua kaavaa (Työkalut -> Lisäosat -> Hae lisäosia: Firebug …) eikä vie kuin pari minuuttia. Käydään seuraavaksi läpi perusasioita mitä Firebugilla voi tehdä ja miten se helpottaa elämääsi. Lisäosa on hyvin helppo käyttää, joten muutama perusasia riittää alkuun pääsemiseen.

Kurkistus konepellin alle

firebug-inspect-element

Firebugin Inspect Element -toiminnolla voit kurkistaa sivuston sisuksiin. Näet mistä ulkokuori muodostuu ja miksi se näyttää juuri siltä kuin näyttää. Käyttö on helppoa: klikkaa hiiren kakkosnapilla elementtiä sivustolta ja valitse Inspect Element. Näet Firebugin paneelista minkälainen HTML ja CSS elementin muodostaa.

firebug-overview

Firebugin perusnäkymä koostuu kahdesta paneelista: vasemmalla HTML ja oikealla CSS. HTML-paneeli on kuten selaimen lähdekoodinäkymä, mutta havainnollisempi ja monipuolisempi. Kerromme tästä myöhemmin tarkemmin. Viereisestä CSS-paneelista näkee kulloinkin valittuun HTML-elementtiin vaikuttavat tyylimääritykset. Tämä on oiva työkalu selvittämään mitkä kaikki CSS-määritykset ovat voimassa, mitkä jäävät toisen määrityksen varjoon ja mistä CSS-tiedostoista ne kaikki löytyvät.

Inspect Element -toiminnon saa myös pysyvästi päälle. Nopeiten se onnistuu näppäinyhdistelmällä Cmd + Shift + C (PC-koneissa Ctrl + Shift + C). Kun inspect on päällä voit liikuttaa hiirtä sivuston päällä ja Firebug näyttää mitä HTML:ää ja CSS:ää kursorin alla kulloinkin piilee. Kätevää.

Saa koskea!

firebug-modify-dom

Sen lisäksi, että näet minkä tahansa elementin HTML:n ja CSS:n, voit myös muokata niitä. Muokkaus tapahtuu suoraan HTML- ja CSS-paneeleihin ja näet muutokset heti selaimessasi. Yksittäisiä attribuutteja on helppo muokata suoraan klikkaamalla. Laajemmat muokkaukset on hyvä tehdä Edit HTML -toiminnolla: Klikkaa hiiren kakkosnapilla esimerkiksi div-elementtiä ja valitse Edit HTML, niin pääset muokkaamaan divin sisältämää HTML:ää tekstieditorilla. Muutokset näkyvät reaaliaikaisesti selaimessa.

CSS-tyylien muokkaus on yhtä helppoa. Klikkaa tyylimääritystä, jota haluat muokata, ja kirjoita sille uusi arvo. Hiiren kakkosnapilla saat lisää muokkausvalintoja.

Firebugilla tekemäsi muutokset eivät tallennu mihinkään, joten voit tehdä muokkauskokeiluja mielin määrin. Ne näkyvät vain selaimessasi ja katoavat kun lataat sivun uudelleen. Muokkaustoiminnon pointti onkin siinä, että voit helposti kokeilla eri HTML- ja CSS-määrityksiä ilman, että tallennat mitään.

JavaScript <3 Firebug

firebug-console

Firebug tarjoaa herkullisia välineitä myös JavaScriptin kanssa työskentelyyn. Yksi erinomainen ohjelmoijan työkalu löytyy Console-välilehdeltä. Konsoli näyttää mm. sivulla ilmenevät JavaScript-virheet, joita klikkaamalla näet missä se tarkalleen tapahtuu. Myös AJAX-kutsut näkee konsolista. Näet esimerkiksi mihin osoitteeseen kutsu tehtiin, minkälaisin parametrein ja mikä oli vastaus. Koko tapahtumaketju löytyy helposti luettavassa muodossa.

Konsoli helpottaa myös JavaScriptin debuggausta. Ikuiset alert()-silmukat eivät enää kiusaa kun käytät console.log()-funktiota. Toiminta on periaatteessa kuin alert():ssa, mutta viestit tulevat Firebugin konsoliin ja ovat lisäksi havainnollisempia.

Konsolissa on myös komentorivi, jolla voit suorittaa JavaScript-käskyjä. Pieniä kokeiluja ei tarvitse tallettaa .js-tiedostoon ja ladata sivua uudelleen, vaan voit kirjoittaa ne konsoliin. Käskyt suoritetaan välittömästi ja näet vaikutukset selaimessasi.

Haku

firebug-haku

Jokaisella Firebugin välilehdellä on hakukenttä, joka löytää etsimäsi HTML:n, CSS:n tai JavaScriptin. Olet ehkä joskus pähkäillyt missä jokin JavaScript-funktio määritellään tai missä kaikkialla on font-family -tyylejä. Hakutoiminto voi pelastaa päiväsi.

Mitä muuta?

Edellämainittujen lisäksi Firebugista löytyy mm. CSS-tyylien visualisointi, sivun latausaikojen tarkkailu, JavaScript-suoritusaikojen tarkkailu ja muita nippeleitä ja nappeleita. Jos nämä eivät riitä, niin tutustu Firebugiin saataviin laajennuksiin. Aivan oikein, tähän lisäosaan saa lisäosia.

Kirjoittajaprofiili Tämä julkaisu on Gfx.fi ylläpidon kirjoittama. Tarkemmat tiedot ja yhteyslomakkeen löydät Info-sivulta.
Kirjoittaja Gfx ylläpito Twitter

Kommentit (3)

  • Erittäin kätevä toiminto Firebugissa (ja Operan Dragonfly:ssa) on CSS-tyylien muuttaminen suoraan nuolinäppäimillä. Kun ensin valitsee halutun elementin sivulta ja klikkaa sen CSS:n auki, voi elementin arvoja muuttaa suoraan näppäimistöltä. Helpottaa pikselintarkkaa hinkkaamista yllättävän paljon.

    Kommentoija Parasiitti, 20.02.2010 klo 12:09
  • Parasiitin kommenttiin lisätäkseni myös html-koodin muokkaaminen onnistuu konsolin kautta.

    Tämä on varsin näppärää silloin kun huomaa koodissa olevan virheitä, tai haluaa testata erilaisia pieniä muutoksia koodin rakenteessa.

    Kommentoija Ukko, 22.02.2010 klo 09:14
  • Safarin Web Inspector on myös erittäin näppärä työkalu. Firebug on aavistuksen parempi tietyissä JS-hommissa mutta yleisesti Safarin Web Inspector toimii mielestäni paremmin. Firefoxin (ja Firebugin) joudun käynnistämään silloin, kun jQueryn dynaamisia muutoksia tarttee debugata.

    Kommentoija Tommi, 24.02.2010 klo 09:22
Nimi *
Sähköposti *
URL
Kommentti *

Uudet jäsenet

trunkshal3g5
Liittyi 15 tuntia sitten
tawillia8u1
Liittyi 2 päivää sitten
taiseva8d8
Liittyi 3 päivää sitten
wmwkjyfoz
Liittyi 6 päivää sitten
Smithfxb
Liittyi yli viikko sitten

Julkaisuarkisto

Yhteistyössä

Haluatko yhteistyöhön? Ota yhteyttä.