Σ’αυτό το άρθρο θα ήθελα να μιλήσω για το καταπληκτικό αυτό εργαλείο που κάθε web developer πρέπει να χρησιμοποιεί. Πρώτα απ’όλα όμως λίγα λόγια για τους υπόλοιπους browsers γενικά:

• Internet Explorer aka IE: Δεν θα μπω στον κόπο να σας εξηγήσω πόσο λάθος είναι κάποιος να δημιουργεί ιστοσελίδες μόνο για IE. Το επόμενο που ακούω από τέτοιους developers είναι αυτό: «οι ιστιοσελίδες μου δουλεύουν καλά στον Internet Explorer» :). Το μόνο που θα πω όμως είναι πως εγώ προσωπικά χρησιμοποιώ IE μόνο για να συγκρίνω αν δουλεύουν το ίδιο οι σελίδες μου σε Firefox και ΙΕ. Ο λόγος γι’αυτή τη σύγκριση είναι ότι καλώς ή κακώς οι απλοί χρήστες χρησιμοποιούν κατά κύριο λόγο IE. Το ποσοστό είναι περίπου 70% και συνεχώς κατεβαίνει (ευτυχώς) αφού ο Firefox παίρνει συνέχεια έδαφος. go go firefox!
• Opera: Αν και οι υπόλοιποι browsers δεν αποτελούν ούτε το 5% της προτίμησης των χρηστών, θα αναφερθούν γιατί όπως όλοι ξέρουμε η λεπτομέρεια κάνει τη διαφορά ακόμη και στις ιστοσελίδες. Πολύ σταθερός και γρήγορος browser με μηχανή που μοιάζει περισσότερο με αυτή του Firefox (Gecko), άρα όταν δημιουργείτε ιστοσελίδες πρώτα για Firefox είναι σχεδόν σίγουρο ότι θα δουλεύουν και σε Opera.
• Safari & Konqueror: Ο αγαπημένος browser των απανταχού Macάδων (όταν μεγαλώσω θα γίνω και γω ένας). Πρόσφατα βγήκε και σε Windows έκδοση η οποία έκανε πάταγο.

Με βάση τα παραπάνω λοιπόν μένει ένα 25% για τον Firefox. Αυτό δε σημαίνει ότι επειδή είναι μικρό το ποσοστό πρέπει να αρχίσουμε να γράφουμε όλοι για IE. Ο Firefox εκτός από ένας σπουδαίος browser είναι και μια πλατφόρμα πάνω στην οποία developers από ολόκληρο τον πλανήτη έχουν βάλει το λιθαράκι τους έτσι ώστε να προσθέσουν επιπλέον λειτουργικότητα στον αγαπημένο τους browser.
Σ’αυτό λοιπόν το πρώτο άρθρο περί Firefox θα σας παρουσιάσω τον Firebug που αποτελεί ένα must εργαλείο για web developers.

Είναι ένα από τα καλύτερα extensions για Firefox (για να μη πω το καλύτερο) που σκοπό έχει να επιβλέπει τη σελίδα που είναι φορτωμένη κάθε φορά στον Firefox έτσι ώστε εμείς να μπορούμε να επέμβουμε οποιαδήποτε στιγμή και να δούμε σε πραγματικό χρόνο τι θα γίνει αν για παράδειγμα αλλάξουμε κάποιες παραμέτρους της.
Ας πάρουμε όμως τα πράγματα με τη σειρά. Για αρχή μπορείτε να εγκαταστήσετε το Firebug όπως κάνετε με οποιοδήποτε extension σε Firefox. Στη συνέχεια αφού σας ζητηθεί να επανεκκινήσετε τον Firefox, φορτώστε τη σελίδα της Google έτσι ώστε να περάσουμε σε ένα παράδειγμα.
Αυτό που βλέπετε τώρα μοιάζει μάλλον με αυτή τη φωτογραφία. Κάτω δεξιά θα παρατηρήσετε το πράσινο εικονίδιο του Firebug. Πατήστε το. Το παράθυρο με την κατσαριδούλα που άνοιξε είναι ολόκληρη η εφαρμογή του Firebug η οποία τρέχει μέσα από Firefox. Στο παράδειγμά μας θα αλλάξουμε τη σελίδα της Google έτσι ώστε το κουμπί Google Search να αλλάξει σε Goooooogle Search και το background color της σελίδας να γίνει πράσινο.
Με το παράθυρο του Firebug ανοιχτό πατήστε το κουμπί Inspect που βρίσκεται δίπλα στην κατσαριδούλα. Η λειτουργία αυτή μας βοηθάει στο να βρίσκουμε εύκολα με το mouse τα κομμάτια του site που μας ενδιαφέρουν. Πηγαίνετε τώρα πάνω στο κουμπί Google Search και κάντε click. Δείτε πως το Firebug βρήκε αμέσως το κομμάτι κώδικα που μας ενδιαφέρει και μας το έφερε μπροστά μας. Τέλος κάντε click στο πεδίο value και αλλάξτε την τιμή σε Goooooogle Search ή ότι άλλο θέλετε.
Τώρα ας αλλάξουμε και το background color της σελίδας. Αυτή τη φορά τα πράγματα είναι ποιο εύκολα και το μόνο που χρειάζεται είναι να κάνουμε click στην επιλογή HTML από το παράθυρο του Firebug και να επιλέξουμε το Body tag όπως φαίνεται εδώ. Από εκεί επιλέξτε το bgcolor property και αλλάξτε την τιμή του από #ffffff σε green. viola!
Μπορείτε να καταλάβετε τώρα πόσο μεγάλη δύναμη μπορεί να έχει ένα τέτοιο εργαλείο για τους σχεδιαστές ιστοσελίδων και όχι μόνο. Μπορεί ακόμη να βρει τον κώδικα Javascript που κρύβεται μέσα στις ιστοσελίδες και να τον αλλάξει on the fly. Οι επιλογές είναι άπειρες!
Ελπίζω να βρήκατε χρήσιμο το άρθρο. Στο επόμενο θα μιλήσω για τα υπόλοιπα χρήσιμα extensions του Firefox όπως και για κάποια tweaks που μπορούν να βοηθήσουν στην ταχύτητα και ευελιξία του αγαπημένου σας browser.

Blogsphere: TechnoratiFeedsterBloglines
Bookmark: Del.icio.usSpurlFurlSimpyBlinkDigg