Τον τελευταίο καιρό ψάχνω αρκετά εργαλεία για Web Development. Όλα έχουν τα θετικά πλεονεκτήματα και μειονεκτήματα αλλά ένα από τα καλύτερα εργαλεία είναι για εμένα το Firebug. Το Firebug είναι ένα δωρεάν extension για τον Firefox (και όχι μόνο) και νομίζω ότι είναι ένα από τα σημαντικότερα εργαλεία για όλους τους Web Developers. Με το Firebug μπορεί κάποιος να κάνει debugging σε JavaScript, βελτιστοποίηση των CSS, HTML και πολλά άλλα.
Παρακάτω αναφέρω μερικά πράγματα που ίσως δεν ξέρετε για το Firebug.
-
Μπορείτε να ελέγξετε το χρόνο φόρτωσης των JavaScript σας από το tab "Net". To Firebug χρωματίζει με ένα ελαφρύτερο γκρι χρώμα ότι έρχεται από το Cache. Έτσι μπορείτε να βελτιστοποιήσετε και το Cache.
-
Με δεξί κλικ πάνω σε ένα breakpoint μπορείτε να προσθέσετε μία συνθήκη.
-
Για να τυπώσετε μηνύματα μπορείτε να χρησιμοποιήσετε το console.log όμως το καλύτερο είναι ότι μπορείτε να γκρουπάρετε τα τυπωμένα μηνύματα χρησιμοποιώντας τις εντολές 'console.group("groupname")' και 'console.groupEnd()'
-
Με τον Profiler ή με τις εντολές console.profile() και console.profileEnd() μπορείτε να δείτε πόσο χρόνο χρειάζεται κάθε function.
-
Μέσα από το CSS Tab μπορείτε να δείτε ένα χρώμα απλά βάζοντας το ποντίκι πάνω από τον κωδικό του.
-
Μπορείτε να δείτε αλλαγές στο HTML των σελίδων κατά την εκτέλεση (Run Time) αλλά το καλύτερο είναι ότι μπορείτε να το αλλάξετε όποτε θέλετε εσείς.
-
Μερικές φορές, αν η ανάλυση της οθόνης σας είναι πολύ μεγάλη, η χρήση του Firebug είναι λίγο δύσκολη μιας και έχει μικρά γράμματα. Αυτό αλλάζει εύκολα κάνοντας κλικ εκεί που θέλουμε και επιλέγοντας 'Text Size -> Increase Text Size'
-
Αν δώσετε την εντολή ‘debugger;’ μέσα στη JavaScript τότε έχετε τη δυνατότητα από το Firebug να σταματήσετε την εκτέλεση σε εκείνο το σημείο και να δείτε το Firebug Panel.
-
Μπορείτε να καταγράψετε τις κλήσεις σε ένα συγκεκριμένο Function απλά κάνοντας δεξί κλικ πάνω στο όνομα του Function αυτού στο τμήμα Script και επιλέγοντας : 'log calls to "myFunction"'.
-
Όταν επεξεργάζεστε μονάδες μέτρησης στο tab Style ή Layout, μπορείτε να χρησιμοποιήσετε τα βελάκια (πάνω ή κάτω) για να αυξήσετε/μειώσετε τις τιμές κατά 1 (margins, borders, paddings, positioning, sizing, κλπ).
-
Το Firebug μπορεί εκτός από τον Firefox να δουλέψει και μέσα από τον IE, Opera και Safari (με περιορισμένες δυνατότητες). Η έκδοση αυτή ονομάζεται Firebug Lite.
Αυτά είναι μερικές από τις δυνατότητες του Firebug. Προτείνω να το δοκιμάσετε αν δεν το έχετε ήδη κάνει.