Netintekijän Firefox-lisäosat

31Lok07

firefox.pngFirefox on hyvä selain, mutta erityisen hyvä se on netintekijöille kuten site buildereille, ohjelmoijille ja web designereille. Tämä ei kuitenkaan johdu Firefoxin itsensä ominaisuuksista, vaan siitä, että Firefoxille saa useita käteviä plugineja eli lisäosia. Esittelen tässä parhaat, joihin itse olen törmännyt. Linkit vievät lisäosien lataussivuille.

Web Developer
Web Developer oli ensimmäinen Firefoxille tehty koodarin apuväline, johon tutustuin. Sen paras puoli on monipuolisuus. Toimintoja käytetään hiiren oikean napin valikon kautta. Mukana on mm. välimuistiin, evästeisiin, lähdekoodeihin (XHTML, CSS, JS), lomakkeisiin ja kuviin liittyviä toimintoja. Eräs kätevä toiminto on myös selainikkunan koonmuutos haluttuun resoluutioon. Tätä tarvitaan, kun testataan sivuston toimivuus eri resoluutioilla (Windowsin vastaava toiminto on turhan hidas).

Firebug
Firebug keskittyy lähdekoodeihin, DOM:iin sekä Ajaxiin. Firebug avaa selainikkunan alareunaan upotetun ikkunan, jonka voi avata myös popupiin. Firebugia käytetään joko Inspect- tai Edit-tilassa. Inspect-tilassa Firebug näyttää aina sen kohdan lähdekoodia, joka liittyy hiiren osoittamaan sivun kohtaan. Lähdekoodi näytetään kätevästi tagihierarkiana sekä ”tagipolkuna”. Käytössä on myös JS-konsoli, jossa näkyvät varoitukset, virheet ja XMLHttpRequestit. Edit-tilassa voi muokata lähdekoodeja reaaliajassa. Eniten Firebugista hyötyvät Ajax-kehittäjät.

HTML Validator
HTML Validator lisää selainikkunan alapalkkiin pienen ikonin, joka kertoo yhdellä vilkaisulla, onko sivun lähdekoodit kunnossa vai ei. Vaihtoehdot ovat ”oikein”, ”varoituksia” ja ”virheitä”. Ikonia kaksoisklikkaamalla aukeaa Firefoxin tuttu lähdekoodinäkymä, jossa HTML Validator näyttää korostettuna virheelliset kohdat sekä luettelon ja syyt virheistä. Lähdekoodin validoinnissa käytetään käyttäjän valinnan mukaan joko W3C:n spesifikaatioita tai hiukan monipuolisempaa HTML Tidyä. Lisäksi HTML Validatorista löytyy automaattinen lähdekoodin siistimistoiminto (lähdekoodinäkymän ylävalikossa). HTML Validator kuuluu jokaisen nettikoodarin perustyökaluihin.

ColorZilla Color Picker
Kyseessä on nimensä mukaisesti kätevä pieni lisäosa, jolla voi napata selainikkunasta haluamansa värin. Selaimen alapalkissa on pieni värinäyttö, josta hiiren vasemmalla napilla pääsee valitsemaan väriä. Kun värin on valinnut, sen heksa- tai RGB-arvot voi kopioida klikkaamalla värinäyttöä hiiren oikealla napilla. Mukana on myös laajempi värikartta-popup, jossa voi säätää valitsemaansa väriä. Värivalinnan lisäksi ColorZillasta löytyy (X)HTML-tagien ääriviivojen esitys sekä ”tagipolku”. Tämä auttaa etenkin CSS-bugien selvittelyssä, jos jokin tagi näkyykin erilailla kuin CSS:llä oli tarkoitus määritellä. Vastaava toiminto löytyy myös Firebugista, mutta ColorZillassa se on nopeammin käytettävissä.

Live PageRank
Live PageRank näyttää avoinna olevan sivun Googlen PageRankin selainikkunan alapalkissa. Tätä ei varsinaisesti tarvita sivustojen toteutusvaiheessa – muuta kuin muistuttamaan, että hakukoneoptimointi täytyy aina huomioida. Sen sijaan tästä on hyötyä silloin, jos asiakas kysyy: ”Miksi sivuni ei näy ensimmäisenä Googlessa?” Live PageRank kertoo nopeasti, onko Google vielä edes listannut sivustoa hakuindeksiinsä. Tämän blogin PageRank on näköjään 4.



3 Responses to “Netintekijän Firefox-lisäosat”

  1. 1 Markku Hannula

    Firefox ongelma. Versio 2.0.0.14
    Noin 10 cm harmaata aluetta, jossa punaista katkoviivaa, kolmioita ja teksti: menuitem.
    ie toimii normaalisti. Firefox asennettu jo pari kertaa uudestaan, eikä muutosta.
    Näkymä sama koko ajan, eli uusi sivu ei muuta näkymää vaan kaikki sivut näkyvät vain osittain.
    Käyttis XP


  1. 1 Firefox 3 + Delicious.com sekä Thunderbird 2 + Lightning 0.8 + Google Calendar + GooSync.com « LEHMÄTKIN LENTÄIS
  2. 2 Google Chrome - minne kehitys johtaa? « LEHMÄTKIN LENTÄIS

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out / Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out / Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out / Muuta )

Google+ photo

Olet kommentoimassa Google+ -tilin nimissä. Log Out / Muuta )

Muodostetaan yhteyttä palveluun %s


%d bloggers like this: