Έυκολο web design με το FireBug
Σε αυτό το άρθρο θα ασχοληθούμε με το Firebug, το πιό διαδεδωμένο εργαλείο μεταξύ των web developers. Θα δούμε τα βασικά χαρακτηριστικά του και θα εξηγήσουμε γιατί το Firebug μπορεί να μας βοηθήσει να δημιουργήσουμε σωστές και όμορφες σελίδες.
Τι είναι το Firebug
To Firebug είναι ένα απο τα δημοφιλέστερα addon για τον Mozilla Firefox, το οποίο μας δίνει πολλές δυνατότητες σε ότι έχει να κάνει με το web development και το web design. Μας επιτρέπει να δούμε τους κώδικες HTML, CSS και Javascript, πίσω απο κάθε ιστοσελίδα που ανοίγουμε, και μάλιστα μας επιτρέπει να κάνουμε τοπικές αλλαγές. Με αυτόν τον τρόπο μπορούμε κοιτάζοντας την ιστοσελίδα μας να κάνουμε μικροαλλαγές στα διάφορα στοιχεία που την αποτελούν, όπως τον κώδικα CSS και βλέποντας τες να φτάσουμε στο επιθυμητό αποτέλεσμα.
Πως το χρησιμοποιώ;
Πρώτα απο όλα πρέπει να έχουμε εγκατεστημένο τον Mozilla Firefox. Για όποιον δεν τον έχει ήδη εγκατεστημένο μπορεί να τον κατεβάσει δωρεάν απο το www.getfirefox.com . Το Firebug θα το βρούμε στο www.getfirebug.com . Κάνοντας την εγκατάσταση και κάνοντας επανεκκίνηση του Firefox πλέον στο παράθυρο του φυλλομετρητή μας κάτω δεξιά θα βρούμε το μικρό εικονίδιο με το σκαθάρι. Κάνοντας κλίκ πάνω του μας ανοίγει η κονσόλα του προγράμματος.
Απο την κονσόλα αυτή έχουμε πρόσβαση σε όλους τους κώδικες που κρύβονται πίσω απο την σελίδα που κοιτάμε. Πατόντας το Inspect μπορούμε να κάνουμε mouse over στα διάφορα στοιχεία της ιστοσελίδας και θα δούμε αμέσως τον κώδικα. Στον κώδικα που μας εμφανίζεται έχουμε την επιλογή να κάνουμε αλλαγές απλά κάνοντας κλίκ στις διάφορες μεταβλητές και βάζοντας τις δικές μας τιμές. Αυτές οι αλλαγές εμφανίζονται άμεσα στην σελίδα και έτσι με αυτόν τον τρόπο μπορούμε να πειράξουμε τον κώδικα μας όσο θέλουμε ώστε να φτάσουμε στο επιθυμητό αποτέλεσμα. Με μία μικρή δοκιμή θα καταλάβετε γιατί το Firebug είναι τόσο δημοφηλές.
Βασικά χαρακτηριστικά
Πάντα διαθέσιμο
Το Firebug είναι πάντα διαθέσιμο, και μόνο ένα κλίκ μακριά, αλλά ποτέ δεν μπαίνει στην μέση. Μπορείτε να το ανοίξετε όποτε εσείς θέλετε, και καταλαμβάνει το κάτω μέρος της οθόνης σας, ή ακόμα και σε διαφορετικό παράθυρο. You can open Firebug in a separate window, or as a bar at the bottom of your browser.
Έλεγχος και διαμόφωση HTML
Το Firebug κάνει έυκολο να διαμοφώσουμε τον HTML κώδικα που βρίσκεται πίσω απο την ιστοσελίδα που κοιτάμε. Αφού βρούμε αυτό που ψάχνουμε μας δίνεται η δυνατότητα να κάνουμε αλλαγές και να δούμε τις αλλαγές που κάναμε ζωντανά.
Αλλαγές στον CSS κώδικα
Το Firebug δίνει την δυνατότητα να αλλάξουμε τις μεταβήτές του κώδικα CSS και έτσι να πειραματιστούμε με τα χρώματα, τα μεγέθη των γραμματοσειρών και άλλα πολλά.
Εμφάνιση μέτρησης των CSS στοιχείων
Όταν για κάποιο λόγο κάτι δεν ευθυγραμίζεται σωστά , μέσω του Firebug μπορείτε να δείτε τι δημιουργεί το πρόβλημα και να το διορθώσετε.
Παρακολούθηση του network activity
Μπορείτε να πάρετε κρίσιμες πληροφορίες για τον λόγο που αργεί να φορτώσει η ιστοσελίδα σας απλά κοιτάζοντας τις αναλυτικές αναφορές του Firebug.
Debug JavaScript
Το Firebug παρέχει έναν πολύ δυνατό JavaScript debugger ο οποίος μας επιτρέπει να παγώσουμε διάφορες διαδικασίες ανα πάσα στιγμή και να δούμε τα διάφορα λάθη και τις παραμέτρους.
Γρήγορη αναζήτηση λαθών
Όταν υπάρχει κάποιο σημαντικό λάθος το Firebug μας ειδοποιεί άμεσα για το πρόβλημα στους κώδικες JavaScript, CSS, and XML.
Περιήγηση στο DOM
Το DOM(Document Object Model) είναι η ιεραρχία των αντικειμένων και εντολών που πραγματοποιούνται απο την JavaScript. Το Firebug μας βοηθάει να δούμε την ιεραρχία αυτή και να κάνουμε άμεσες αλλαγές.
Logging της JavaScript
Μέσα απο το Firebug μπορούμε να κάνουμε logging των διάφορων functions που εκτελεί η Javascript και έτσι να κάνουμε γρήγορες αλλαγές και να βρούμε λάθη.
