firebug-large Το Firebug είναι ένα Firefox addon που με ένα κλικ σας παρέχει μια σειρά εργαλείων web development, επιτρέποντάς σας να επεξεργαστείτε οποιαδήποτε σελίδα σε πραγματικό χρόνο. «Κάθεται» στη μπάρα (statusbar) του Firefox και ενεργοποιείται μόνο όταν το καλέσετε. Τα βασικά χαρακτηριστικά του περιλαμβάνουν τα εξής:

  • demo-screen Έλεγχος και επεξεργασία της HTML. Το Firebug εμφανίζει τον πλήρη HTML κώδικα οποιασδήποτε σελίδας, δίνοντάς την δυνατότητα να τον επεξεργαστείτε απευθείας και να δείτε τις αλλαγές σε πραγματικό χρόνο. Σας βγάζει, μάλιστα, από τον κόπο να βρείτε τον κώδικα που αντιστοιχεί σε μια συγκεκριμένη περιοχή της σελίδας, αφού όταν επιλέξετε την περιοχή εμφανίζεται μόνο η HTML που την αφορά. Ασφαλώς, οι αλλαγές χάνονται την επόμενη φορά που θα πατήσετε ανανέωση (refresh) της σελίδας.
  • Έλεγχος και επεξεργασία των CSS. Επιλέγοντας μια συγκεκριμένη περιοχή, το Firebug εμφανίζει, πέρα από την HTML, τα CSS που της αντιστοιχούν. Και σε αυτή την περίπτωση, σας δίνει τη δυνατότητα να τα επεξεργαστείτε και να δείτε απευθείας τα αποτελέσματα. Για την ακρίβεια, μπορείτε να αλλάξετε ολοκληρωτικά τα CSS μιας σελίδας και να δείτε πώς θα φαινόταν. Καθώς συμπληρώνετε, μάλιστα, μια τιμή, το Firebug εμφανίζει προτάσεις με τις τιμές που θα μπορούσε να περιλαμβάνει, μεγάλο βοήθημα στην περίπτωση που δεν είσαστε σίγουροι για την σωστή σύνταξη μιας καταχώρησης.
  • Εργαλεία ελέγχου και απασφαλμάτωσης. Το Firebug περιλαμβάνει μια σειρά εργαλείων για τον έλεγχο της σελίδας σας και τη διόρθωση ενδεχομένων λαθών: javascript debugger, γρήγορο εντοπισμό λαθών σε Javascript, CSS και XML, DOM Inspector, ακόμα και παρακολούθηση της δικτυακής δραστηριότητας ώστε να βρείτε τους λόγους για τους οποίους η σελίδα σας αργεί να φορτώσει κ.α.
  • Επεκτασιμότητα. Το Firebug μπορεί να δεχτεί δεκάδες επιπλέον extensions. Δεν πρόκειται για επεκτάσεις του Firefox, αλλά για επεκτάσεις του ίδιου του Firebug, που του προσθέτουν επιπλέον λειτουργικότητες και που μπορούν να σας φανούν χρήσιμες ανάλογα με την τεχνολογία την οποία χρησιμοποιείτε. Π.χ. υπάρχουν, μεταξύ άλλων, επεκτάσεις για development σε jQuery, Flash, PHP, αλλά και επεκτάσεις όπως το Page Speed που δείχνει την ταχύτητα φόρτωσης μιας σελίδας.
  • Συνεχής ανάπτυξη. Το Firebug αναπτύσσεται συνεχώς, βγάζοντας κάθε τόσο νέες, ενημερωμένες εκδόσεις.

Εάν ασχολείστε με την κατασκευή ιστοσελίδων και το web development, το Firebug είναι ένα Firefox addon που θα πρέπει οπωσδήποτε να γνωρίζετε. Για την ακρίβεια, θα μπορούσε να είναι από μόνο του λόγος για να γίνει ο Firefox ο βασικός σας browser σε ό,τι αφορά τουλάχιστον το web development. Δεν είναι τυχαίο, άλλωστε, ότι βρίσκεται σταθερά στην πρώτη δεκάδα των δημοφιλέστερων addons ανεξαρτήτως κατηγορίας. Εγώ πάντως πρέπει να ομολογήσω πως χωρίς αυτό δεν θα είχα καταφέρει ποτέ να αλλάξω την εμφάνιση του blog – γι’ αυτό και του χρώσταγα αυτή την καταχώρηση.

Ηλεκτρονική διεύθυνση: http://getfirebug.com/

Firebug extensions: http://getfirebug.com/downloads#extensions

Το Firebug στην επίσημη σελίδα των Firefox addons: https://addons.mozilla.org/en-US/firefox/addon/1843

Παλιό άρθρο Το παραπάνω άρθρο είναι αρκετά παλιό, αφού δημοσιεύτηκε στις 13 Μαρτίου 2010. Εάν κάποια από τις πληροφορίες που αναφέρονται σε αυτό δεν ισχύει πια, ενημερώστε με μέσω της φόρμας επικοινωνίας για να το τροποποιήσω.
Γιώργος Σαρηγιαννίδης

Συντάκτης άρθρου: Γιώργος Σαρηγιαννίδης

Ο Γιώργος Σαρηγιαννίδης είναι απόφοιτος του τμήματος Επικοινωνίας, Μέσων και Πολιτισμού του Παντείου και κάτοχος μεταπτυχιακού διπλώματος από το ίδιο τμήμα. Αυτή τη στιγμή εργάζεται ως freelancer σύμβουλος σε έργα διαδικτύου και intranets, με κύρια αντικείμενα την Αρχιτεκτονική της Πληροφορίας, την κατασκευή ιστοσελίδων και την διαχείριση περιεχομένου. Έχει ειδικευτεί στη μελέτη και τον αρχιτεκτονικό σχεδιασμό portals, intranets και δικτυακών εφαρμογών, ενώ στο παρελθόν έχει ασχοληθεί και με τη δημοσιογραφία.
Website: http://www.gsarigiannidis.gr Twitter Facebook LinkedIn Google Plus Klout
ΜΟΙΡΑΣΤΕΙΤΕ ΤΟ

2 thoughts on “Firebug: το απαραίτητο εργαλείο για κάθε web developer

  1. Pingback: Mozilla: Λίστα με επεκτάσεις που καθυστερούν τον Firefox

  2. Pingback: 5 τρόποι για να ελέγξετε την ταχύτητα του website σας

Comments are closed.