Ο Firebug είναι ένα δωρεάν εργαλείο ανοικτού κώδικα, διαθέσιμο ως επέκταση του Mozilla Firefox, το οποίο επιτρέπει την αποσφαλμάτωση, την επεξεργασία και την παρακολούθηση των CSS, HTML, DOM και JavaScript από κάθε ιστοσελίδα.
Επίσης ο Fidebug διαθέτει σύστημα ανάλυσης των επιδόσεων μιας ιστοσελίδας καθώς επίσης και και μια κονσόλα στην οποία μπορείτε να παρακολουθείτε τα σφάλματα που προκύπτουν από τη JavaScript όπως επίσης να παρακολουθείτε και τις τιμές διάφορων μεταβλητών.
Το εργαλείο αυτό το συνοδεύουν και άλλα εργαλεία που έχουν ως αποτέλεσμα να ενισχύουν την παραγωγικότητα των προγραμματιστών διαδικτύου. Στον Firebug θα βρείτε όλα τα εργαλεία που χρειάζεστε για να αναλύσετε, να κάνετε αποσφαλμάτωση και να παρακολουθήσετε τη JavaScript, τα CSS, την HTML και ερωτήματα AJAX.
Μερικά από τα σημαντικότερα εργαλεία του Firebug είναι ο το πρόγραμμα αποσφαλμάτωσης, η κονσόλα προβολής σφαλμάτων, η γραμμή εντολών, και η μεγάλη ποικιλία εργαλείων επιθεώρησης στοιχείων HTML.
Εγκατάσταση
Ο Firebug έχει δημιουργηθεί ως AddOn για τον Firefox και μπορεί να εγκατασταθεί στον Firefox όπως και όλα τα άλλα AddOn. Αν θέλετε να τρέξετε τον Firebug σε άλλο περιηγητή (πχ. Internet Explorer, Opera, Safari, κ.α.) υπάρχει μια έκδοση του σε μορφή JavaScript η οποία όμως δεν έχει όλες τις λειτουργίες του κανονικού Firebug. Βάση της έκδοσης του περιηγητή σας μπορείτε να εγκαταστήσετε τις ακόλουθες εκδόσεις του Firebug :
- Firebug 1.6 Alpha
- Firefox 3.6 και Firefox 3.7
- Firebug 1.5
- Firefox 3.5 και Firefox 3.6
- Firebug 1.4
- Firefox 3.0 και Firefox 3.5
- Firebug 1.3
- Firefox 2.0 και Firefox 3.0
- Firebug Lite
- Internet Explorer, Safari και Opera
Για να εγκαταστήσετε τον Firebug στον Firefox, επισκεφθείτε την σελίδα http://getfirebug.com και κάντε Click στο σύνδεσμο “Install Firebug on Firefox”
Για να χρησιμοποιήσετε τον Firebug Lite σε άλλο περιηγητή από τον Firefox επισκεφθείτε τη σελίδα http://getfirebug.com/firebuglite , αντιγράψτε το αρχείο JavaScript από εκεί και ενσωματώστε το στη σελίδα σας.
Επιτήρηση στοιχείων της σελίδας
Αυτό είναι το πρώτο βήμα για να εντοπίσετε ένα στοιχείο της HTML.
- Κάντε Click στο κουμπί Επιτήρηση αντικειμένου
για να αλλάξει η κατάσταση του Firebug σε κατάσταση επιτήρησης. - Μετακινήστε το ποντίκι σας πάνω από τα στοιχεία της σελίδας σας που θέλετε να επιτηρήσετε
- Κάντε Click στο στοιχείο που θέλετε να επιτηρήσετε για να αρχίσει η ανάλυση.
Υπάρχει ακόμα ένας γρήγορος και εύκολος τρόπος για να κάνετε την ίδια εργασία. Εντοπίστε το στοιχείο που θέλετε να επιτηρήσετε, κάντε δεξί Click πάνω του και από το αναδυόμενο μενού επιλέξετε “Επιτήρηση αντικειμένου”. Τέλος, μπορείτε να επιλέξετε ένα κόμβο στο DOM και να παρακολουθήσετε από εκεί το CSS του στοιχείου, τη δομή του και τις ιδιότητες του στο DOM.
Προφίλ JavaScript
Πληκτρολογήστε των κώδικα που ακολουθεί σε μια σελίδα, αποθηκεύστε τη σελίδα σε ένα αρχείο html και ανοίξτε το με ένα Firefox που έχει ενεργοποιημένο το Firebug.
<html>
<head>
<title>Firebug</title>
<script type="text/javascript">
function bar()
{
console.profile(‘Measuring time’);
foo();
console.profileEnd();
}
function foo()
{
loop(1000);
loop(100000);
loop(10000);
}
function loop(count)
{
for(var i=0;i<count;i++){}
}
</script>
</head>
<body>
Click this button to profile JavaScript
<input type=”button” value=”Start” onclick=”bar();”/>
</body>
</html>
Αφού ανοίξετε τη σελίδα με τον Firefox κάντε Click στο κουμπί Start για να αρχίσει η ανάλυση του κώδικα JavaScript. Θα δείτε ένα πίνακα που θα δημιουργηθεί στην κονσόλα του Firebug. Η περιγραφή και ο σκοπός αυτού του πίνακα αναλύετε παρακάτω:
- Συνάρτηση : Αυτή η στήλη δείχνει το όνομα κάθε συνάρτησης που εκτελείτε κατά το άνοιγμα μιας σελίδας
- Κλήσεις : Δείχνει πόσες φορές έχει εκτελεστεί κάθε μια από τις συναρτήσεις της λίστας.
- Ποσοστό : Δείχνει το ποσοστό χρόνου που κατανάλωσε κάθε συνάρτηση μέχρι να ολοκληρωθεί η σελίδα
- Ίδια ώρα : Δείχνει το χρόνο που χρειάζεται για να εκτελεστεί ο κώδικας μέσα σε μια συγκεκριμένη συνάρτηση. Για παράδειγμα η συνάρτηση foo στον παράδειγμα μας δεν έχει καθόλου δικό της κώδικα, αλλά εκτελεί τη συνάρτηση loop. Για αυτό το λόγο ο χρόνος εκτέλεσης της είναι ~0ms. Αν θέλετε να δείτε λίγο χρόνο σε αυτή τη συνάρτηση προσθέστε μερικές επανάληψης σε ένα βρόχο.
- Χρόνος : Δείχνει το συνολικό χρόνο εκτέλεσης της συνάρτησης, από την αρχή της μέχρι το τέλος. Για παράδειγμα η συνάρτηση foo δεν έχει καθόλου δικό της κώδικα και ο χρόνος της είναι ~0ms, αλλά καλούμε άλλες συναρτήσεις μέσα σε αυτή, οπότε ο συνολικός χρόνος εκτέλεσης είναι 4.491ms για τις άλλες συναρτήσεις, που στην πράξη είναι ο συνολικός χρόνος της συνάρτησης foo και των χρόνων εκτέλεσης όλως των κλήσεων της συνάρτησης loop.
- Μέσος : Δείχνει το μέσο όρο εκτέλεσης κάθε συνάρτησης. Αν μια συνάρτηση την καλέσετε μόνο μια φορά τότε δεν θα έχετε και μεγάλη διαφορά από τη στήλη Χρόνος. Αν καλείτε μια συνάρτηση για περισσότερες από μια φορές τότε θα καταλάβετε τη διαφορά. Η φόρμουλα υπολογισμού του μέσου όρου είναι :
Μέσος = Ίδια ώρα / Κλήσεις - Στήλες Ελ. και Μεγ. : Δείχνουν τον ελάχιστο και τον μέγιστο χρόνο εκτέλεσης κάθε συνάρτησης. Στο παράδειγμα μας καλούμε τη συνάρτηση loop 3 φορές. Όταν περνάμε στην συνάρτηση την παράμετρο 1000 θα πρέπει να πάρει περίπου 0.0045ms για να εκτελεστεί, αλλά όταν περνάμε ως παράμετρο το 100000 χρειάζεται περισσότερο χρόνο να εκτελεστεί και αυτός θα πρέπει να είναι περίπου 4.036ms. Το αποτέλεσμα είναι πως η στήλη Ελ. θα πρέπει να έχει την τιμή 0.0045ms και η στήλη Μεγ. θα πρέπει να έχει την τιμή 4.036ms για την ίδια συνάρτηση.
- Αρχείο : Δείχνει το όνομα του αρχείου και τον αριθμό της γραμμής μέσα στο αρχείο που περιέχει τη συνάρτηση
Αποσφαλμάτωση JavaScript σεναρίων
Ο Firebug σας επιτρέπει να εισάγετε σημεία διακοπής στην εκτέλεση του κώδικα JavaScript και εκτέλεση βήμα βήμα του κώδικα.
Δημιουργήστε μια σελίδα html και βάλτε τον παρακάτω κώδικα.
<html>
<head>
<title>Javascript Debugging</title>
<script type="text/javascript">
function populateDiv()
{
var divElement = document.getElementById("messageLabel");
divElement.innerHTML = "Lorem ipsum dollor";
}
</script>
</head>
<body>
<div id="messageLabel"></div>
<input type="button" value="Click Me!" onclick="populateDiv();" />
</body>
</html>
Ανοίξτε τώρα αυτή τη σελίδα με τον Firefox και κάτω από την καρτέλα “Σενάριο εντολών”, μετακινήστε το ποντίκι σας πάνω από τη γραμμή που φαίνεται και στην εικόνα παρακάτω και κάντε click αριστερά από τον αριθμό γραμμής για να δημιουργήσετε ένα σημείο διακοπής
Τώρα είστε έτοιμοι να παρακολουθήσετε τη συμβαίνει στον κώδικα σας. Κάντε Click στο κουμπί “Click Me!” που έχουμε μέσα στη σελίδα μας για να αρχίσει η εκτέλεση των εντολών. Μετά το Click θα παρατηρήσετε πως η εκτέλεση του κώδικα σταματάει στην γραμμή που βάλαμε το σημείο διακοπής.
Τώρα είστε σε θέση να εκτελέσετε τον κώδικα σας βήμα βήμα πατώντας ένα από αυτά τα κουμπιά (Συνέχεια, Βήμα μέσα, Προσπέρασε, Βήμα Έξω) που βρίσκονται κάτω από την καρτέλα “Σενάρια εντολών”
- Συνέχεια (F8) : Σας επιτρέπει να συνεχίσετε την εκτέλεση του κώδικα, μετά από παύση από κάποιο σημείο διακοπής.
- Προσπέρασε (F10) : Σας επιτρέπει να συνεχίσετε την εκτέλεση του κώδικα χωρίς να περάσετε μέσα από τη συνάρτηση.
- Βήμα μέσα (F11) : Σας επιτρέπει να συνεχίσετε μέσα από τον κώδικα μιας συνάρτησης.
- Βήμα έξω : Σας επιτρέπει να συνεχίσετε την εκτέλεση του κώδικα και να σταματήσει στο επόμενο σημείο διακοπής που έχετε ορίσει
Γρήγορη επεξεργασία των CSS
Με τον Firebug μπορείτε να προσθέσετε, να διαγράψετε και να επεξεργαστείτε τις ιδιότητες CSS ενός στοιχείου. Αυτό είναι ένα από τα ποιο χρήσιμα χαρακτηριστικά του Firebug, αφού σας επιτρέπει να διορθώσετε προβλήματα που προκύπτουν από τη CSS γρήγορα και εύκολα.
Με αυτό το εργαλείο οι αλλαγές που πραγματοποιούνται στην καρτέλα CSS του Firebug εφαρμόζονται άμεσα στο αντίγραφο της σελίδας που βλέπετε την δεδομένη χρονική στιγμή. Για παράδειγμα αν θέλετε να αλλάξετε το χρώμα ενός στοιχείου που επιτηρείτε κάντε τα ακόλουθα :
- Ανοίξτε τη σελίδα που δημιουργήσατε στο προηγούμενο παράδειγμα και κάντε Click στο κουμπί “Click Me!”
- Κάντε δεξί Click στο κείμενο που προκύπτει μετά το Click στο κουμπί και επιλέξτε “Επιτήρηση αντικειμένου” από το αναδυόμενο μενού.
- Στην καρτέλα HTML του Firebug θα εμφανιστεί το επιλεγμένο στοιχείο μέσα στον κώδικα της σελίδας σας.
- Στα δεξιά της καρτέλας HTML υπάρχει μια σειρά από άλλες καρτέλες, επιλέξτε την καρτέλα CSS και από κάτω κάντε δεξί Click και επιλέξτε “Επεξεργασία στυλ στοιχείου” από το αναδυόμενο μενού
- Τώρα πληκτρολογήστε την ιδιότητα color και μετά αμέσως το πλήκτρο Tab.
- Τώρα πληκτρολογήστε το χρώμα που θέλετε είτε ονομαστικά είτε με rgb αναπαράσταση είτε με δεκαεξαδική αναπαράσταση (πχ : #AF0, #333333) και πατήστε Enter.
Για να απενεργοποιήσετε ένα κανόνα CSS, βάλτε το ποντίκι σας πάνω από τον κανόνα στα αριστερά του πάνω από το εικονίδιο 
και κάντε Click
Για να αλλάξετε την τιμή κάποιου κανόνα κάντε απλά ένα Click στην τιμή του κανόνα και αμέσως η τιμή του θα μετατραπεί σε κείμενο για να το επεξεργαστείτε.
Επίσης αν έχετε αριθμητικές τιμές σε κάποιο κανόνα (πχ. width: 300px) μπορείτε να χρησιμοποιήσετε τα βελάκια πάνω και κάτω για να αλλάξετε τις τιμές διαδοχικά χωρίς να πληκτρολογείτε κάθε φορά νέα τιμή.
Παρακολούθηση δικτύου
Ο Firebug μπορεί να παρακολουθεί την δικτυακή δραστηριότητα των σελίδων σας. Μια διαδικτυακή εφαρμογή μπορεί να είναι αργή σε κάποιο χρήστη λόγο του αργού δικτύου, λόγο λανθασμένης φόρτωσης των αρχείων, λόγο μεγάλου αριθμού αιτημάτων προς το διακομιστή διαδικτύου ή επειδή το στατικό περιεχόμενο της εφαρμογής δεν αποθηκεύεται στην Cache του περιηγητή.
Η καρτέλα Δίκτυο του Firebug σας επιτρέπει να παρακολουθείτε κάθε αρχείο που συσχετίζετε με τη δεδομένη σελίδα κάθε φορά, καθώς επίσης και τα ερωτήματα που γίνονται μέσω XHR. Η καρτέλα αυτή παράγει ένα γράφημα με διάφορες αποχρώσεις που ορίζονται ανάλογα με τον κύκλο της κάθε αίτησης. Η ακόλουθη εικόνα είναι ένα παράδειγμα μιας αίτησης :
- Μπλε : Χρόνος εντοπισμού του DNS
- Πράσινο : Χρόνος που απαιτείτε για τη σύνδεση με το διακομιστή διαδικτύου
- Καφέ : Χρόνος που πρέπει να περιμένει το αίτημα στην ουρά μέχρι να εξυπηρετηθεί από το διακομιστή
- Μοβ : Χρόνος που πέρασε μέχρι να ανταποκριθεί ο διακομιστής
- Σκούρο γκρι : Το αίτημα στάλθηκε στο διακομιστή, το αίτημα εξυπηρετήθηκε από το διακομιστή και όχι από την Cache του περιηγητή
- Ανοιχτό γκρι : Το αίτημα στάλθηκε στο διακομιστή, ο διακομιστής αποκρίθηκε με “304 Not Modified”, το αίτημα εξυπηρετήθηκε από την Cache του περιηγητή.
Παρακολούθηση των XmlHttpRequest (AJAX)
Η ενεργοποίηση της επιλογής «Εμφάνιση XmlHttpRequest» στην καρτέλα Κονσόλα, επιτρέπει στον Firebug να λειτουργεί ως κατάσκοπος αιτημάτων AJAX
Κάθε XmlHttpRequest θα καταγράφετε στην κονσόλα, και από εκεί μπορείτε μετά να την απόκριση από το διακομιστή σε μορφή κειμένου, JSON ή XML. Αυτό είναι ένα πολύ χρήσιμο χαρακτηριστικό του Firebug που θα σας βοηθήσει πολύ στην αποσφαλμάτωση του AJAX κώδικα σας.
Μπορείτε επίσης να παρατηρήσετε τα Headers αιτήματος και απόκρισης από και προς το διακομιστή, την απόκριση από το διακομιστή και άλλα πολλά.
Η μέθοδος cd()
Εξ ορισμού, όλες οι εντολές που εκτελείτε στη γραμμή εντολών του Firebug απευθύνονται αποκλειστικά στο κεντρικό παράθυρο στο οποίο εκτελείτε ο Firebug. Για παράδειγμα δεν μπορείτε να εκτελέσετε μια εντολή η οποία βρίσκεται μέσα σε μια σελίδα που έχει φορτωθεί σε ένα στοιχείο iFrame. Ευτυχώς οι προγραμματιστές του Firebug το έχουν προβλέψει και μας έχουν τη λύση. Η μέθοδος cd() σας επιτρέπει να αλλάξετε το πλαίσιο του παραθύρου από βασικό παράθυρο σε iFrame
Στη γραμμή εντολών του Firebug χρησιμοποιήστε το ακόλουθο συντακτικό για μια σελίδα που έχει ένα στοιχείο iFrame
cd(window.frames[0]); // Μπορείτε επίσης να χρησιμοποιήσετε τους επιλογείς στοιχείων $, $$ ή $x για να επιλέξετε το ή τα στοιχεία iFrame της σελίδας σας.
Συντομεύσεις για το πληκτρολόγιο και το ποντίκι
Ο Firebug παρέχει μια μεγάλη συλλογή από συντομεύσεις για το πληκτρολόγιο και το ποντίκι ώστε να κάνει την εργασία ευκολότερη και ταχύτερη. Καθώς θα αποκτάτε όλο και μεγαλύτερη εμπειρία με τον Firebug θα διαπιστώσετε πως θα κάνετε όλο και συχνότερα χρήση αυτών των συντομεύσεων για να ολοκληρώσετε διάφορες εργασίες, αντί να ανοίξετε κάθε φορά τον Firebug και να κάνετε click σε διάφορες καρτέλες και κουμπιά.
Γενικές συντομεύσεις
- Άνοιγμα του Firebug [ F12 ]
- Κλείσιμο του Firebug [ F12 ]
- Άνοιγμα του Firebug σε δικό του παράθυρο [ Ctrl + F12 ]
- Μεταφορά στην προηγούμενη καρτέλα [ Ctrl + ' ]
- Εστίαση στην γραμμή εντολών [ Ctrl + Shift + L ]
- Εστίαση στην αναζήτηση [ Ctrl + Shift + K ]
- Είσοδος και έξοδος από την κατάσταση επιτήρησις [ Ctrl + Shift + C ]
- Είσοδος και έξοδος από το προφίλ της JavaScript [ Ctrl + Shift + P ]
- Εκτέλεσε ξανά την τελευταία εντολή στη γραμμή εντολών [ Ctrl + Shift + E ]
Συντομεύσεις καρτέλας HTML
- Επεξεργασία ιδιότητας [ Return ]
- Επεξεργασία κειμένου [ Κάντε Click στο κείμενο ]
- Επεξεργασία στοιχείου HTML [ Διπλό Click στο όνομα της ετικέτας ]
- Επόμενο στοιχείο στη σειρά [ Ctrl + . ]
- Προηγούμενο στοιχείο στη σειρά [ Ctrl + , ]
Συντομεύσεις του επεξεργαστή HTML
- Τερματισμός επεξεργασίας [ Return ]
- Ακύρωση επεξεργασίας [ Esc ]
Συντομεύσεις κατάστασης επιτήρησης HTML
- Ακύρωση επιτήρησης [ Esc ]
- Επιτήρηση γονικού στοιχείου [ Ctrl + Up ]
- Επιτήρηση απόγονου [ Ctrl + Down ]
Συντομεύσεις καρτέλας σεναρίων εντολών
- Συνέχεια [ F8 ή Ctrl + / ]
- Προσπέρασμα [ F10 ή Ctrl + ' ]
- Βήμα μέσα [ F11 ή Ctrl + ; ]
- Βήμα έξω [ Shift + F11 ή Ctrl + Shift + ; ]
- Ενεργοποίηση/απενεργοποίηση σημείου διακοπής [ Κάντε Click στον αριθμό γραμμής ]
- Απενεργοποίηση σημείου διακοπής [ Shift + Click στον αριθμό γραμμής ]
- Επεξεργασία συνθήκης σημείου διακοπής [ Δεξί Click στον αριθμό γραμμής ]
- Εκτέλεση στη γραμμή [ Μεσαίο Click στον αριθμό γραμμής ή Ctrl + Click στον αριθμό γραμμής ]
- Επόμενη συνάρτηση στη στοίβα [ Ctrl + . ]
- Προηγούμενη συνάρτηση στη στοίβα [ Ctrl + , ]
- Εστίαση στο μενού σεναρίων [ Ctrl + Space ]
- Εστίαση στον Watch Editor [ Ctrl + Shift + N ]
Συντομεύσεις της καρτέλας Dom
- Επεξεργασία ιδιότητας [ Διπλό Click σε κενό χώρο ]
- Επόμενο αντικείμενο στη σειρά [ Ctrl + . ]
- Προηγούμενο αντικείμενο στη σειρά [ Ctrl + , ]
- Τέλος επεξεργασίας [ Διπλό Click σε κενό χώρο ]
- Ακύρωση επεξεργασίας [ Ctrl + . ]
- Αυτόματη συμπλήρωση επόμενης ιδιότητας [ Ctrl + , ]
- Αυτόματη συμπλήρωση προηγούμενης ιδιότητας [ Shift + Tab ]
Συντομεύσεις της καρτέλας CSS
- Επεξεργασία ιδιότητας [ Click στη τιμή της ιδιότητας ]
- Εισαγωγή νέας ιδιότητας [ Διπλό Click σε κενή περιοχή ]
- Εστίαση στο μενού με τα CSS [ Ctrl + Space ]
Συντομεύσεις καρτέλας επεξεργαστή CSS
- Τέλος επεξεργασίας [ Return ]
- Ακύρωση επεξεργασίας [ Esc ]
- Μετάβαση στο επόμενο πεδίο [ Tab ]
- Μετάβαση στο προηγούμενο πεδίο [ Shift + Tab ]
- Αύξηση αριθμού κατά μια μονάδα [ Up ]
- Μείωση αριθμού κατά μια μονάδα [ Down ]
- Αύξηση αριθμού κατά μια δεκάδα [ Page Up ]
- Μείωση αριθμού κατά μια δεκάδα [ Page Down ]
- Αυτόματη συμπλήρωση με την επόμενη ιδιότητα [ Up ]
- Αυτόματη συμπλήρωση με την προηγούμενη ιδιότητα [ Down ]
Αναφορά στην API της κονσόλας
console.log(αντικείμενο[, αντικείμενο, …])
Εμφανίζει ένα μήνυμα στην κονσόλα. Μπορείτε να περάσετε όσες παραμέτρους θέλετε και θα ενωθούν όλες μαζί σε μια γραμμή κειμένου χωρισμένη με κενά.
console.debug(αντικείμενο[, αντικείμενο, …])
Εμφανίζει ένα μήνυμα στην κονσόλα, μαζί με ένα σύνδεσμο προς τη γραμμή στην οποία έγινε η κλήση.
console.info(αντικείμενο[, αντικείμενο, ...])
Εμφανίζει ένα μήνυμα στην κονσόλα με το ανάλογο εικονίδιο και χρώμα και ένα σύνδεσμο προς τη γραμμή που έγινε η κλήση.
console.warn(αντικείμενο[, αντικείμενο, ...])
Εμφανίζει ένα μήνυμα στην κονσόλα με το ανάλογο εικονίδιο και χρώμα και ένα σύνδεσμο προς τη γραμμή που έγινε η κλήση.
console.error(αντικείμενο[, αντικείμενο, ...])
Εμφανίζει ένα μήνυμα στην κονσόλα με το ανάλογο εικονίδιο και χρώμα και ένα σύνδεσμο προς τη γραμμή που έγινε η κλήση.
console.assert(έκφραση[, αντικείμενο, …])
Πρώτα ελέγχει αν η έκφραση είναι αληθής. Αν η έκφραση είναι ψευδής θα εμφανίσει ένα μήνυμα στην κονσόλα και θα δημιουργήσει μια εξαίρεση.
console.dir(αντικείμενο)
Εκτυπώνει μια διαδραστική λίστα από όλες τις ιδιότητες ενός αντικειμένου. Το αποτέλεσμα αυτής της μεθόδου είναι παρόμοιο με αυτό της λίστας DOM
console.dirxml(κόμβος)
Εκτυπώνει μια έξοδο σε μορφή XML ενός στοιχείου HTML ή XML. Αυτή η μορφή εξόδου είναι παρόμοια με αυτή στην καρτέλα HTML.
console.trace()
Εκτυπώνει στην κονσόλα ένα σύνδεσμο προς το σημείο που έχει δηλωθεί αυτή τη μέθοδος.
console.time(όνομα)
Δημιουργεί ένα χρονόμετρο με το όνομα που ορίζετε μέσα στην μέθοδο. Καλέστε την μέθοδο console.timeEnd(όνομα) με το ίδιο όνομα για να σταματήσετε τη χρονομέτρηση και να εκτυπώσετε τον χρόνο που πέρασε από την δήλωση αυτής της μεθόδου.
console.timeEnd(όνομα)
Σταματάει ένα χρονόμετρο που ξεκίνησε με τη συνάρτηση console.time(όνομα), και εκτυπώνει το συνολικό χρόνο που πέρασε από την δήλωση της συνάρτησης console.time(όνομα).
console.profile([τίτλος])
Ενεργοποιεί το προφίλ της JavaScript. Το προαιρετικό όρισμα “τίτλος” θα πρέπει να έχει τον τίτλο που θα εκτυπωθεί στην κονσόλα για το συγκεκριμένο προφίλ
console.profileEnd()
Απενεργοποιεί το προφίλ της JavaScript και εκτυπώνει την έκθεση που προκύπτει.
console.count([τίτλος])
Εκτυπώνει τον αριθμό των φορών που μια γραμμή κώδικα κλήθηκε να εκτελεστεί. Το προαιρετικό όρισμα “τίτλος” θα εμφανίσει το αντίστοιχο μήνυμα μαζί με το σύνολο των κλήσεων.
console.table()
Επιτρέπει την έξοδο από δεδομένα καρτελών στην κονσόλα.
Πχ.
var myTable = new Array(3);
for(var i = 0; i < 3; i++)
{
myTable[i] = [i+1, i+2,i+3,i+4];
}
console.table(myTable);
Αναφορά στην API των εντολών
$(id)
Επιστρέφει ένα μονό αντικείμενο με το συγκεκριμένο id
$$(selector)
Επιστρέφει ένα πίνακα από στοιχεία που ταιριάζουν με τον συγκεκριμένο CSS selector
$x(xpath)
Επιστρέφει ένα πίνακα από στοιχεία που ταιριάζουν με τη συγκεκριμένη έκφραση xpath
dir(αντικείμενο)
Εκτυπώνει μια διαδραστική λίστα με όλες τις ιδιότητες του αντικειμένου.
dirxml(αντικείμενο)
Εκτυπώνει ένα XML ενός στοιχείου HTML ή XML.
cd(window)
Εξ ορισμού, όλες οι εντολές που εκτελείτε στη γραμμή εντολών του Firebug απευθύνονται αποκλειστικά στο κεντρικό παράθυρο στο οποίο εκτελείτε ο Firebug. Για παράδειγμα δεν μπορείτε να εκτελέσετε μια εντολή η οποία βρίσκεται μέσα σε μια σελίδα που έχει φορτωθεί σε ένα στοιχείο iFrame. Ευτυχώς οι προγραμματιστές του Firebug το έχουν προβλέψει και μας έχουν τη λύση. Η μέθοδος cd() σας επιτρέπει να αλλάξετε το πλαίσιο του παραθύρου από βασικό παράθυρο σε iFrame
clear()
Καθαρίζει την κονσόλα
inspect(αντικείμενο[, όνομα καρτέλας])
Επιτηρεί ένα αντικείμενο στην ποιο ιδανική καρτέλα, ή στην καρτέλα που έχετε ορίσει προαιρετικά στο δεύτερο όρισμα της μεθόδου. Τα διαθέσιμα ονόματα καρτελών είναι τα “html”, “css”, “script”, και “dom”
keys(αντικείμενο)
Επιστρέφει ένα array με όλες τα ονόματα όλων των ιδιοτήτων ενός αντικειμένου
values(αντικείμενο)
Επιστρέφει ένα πίνακα που περιέχει όλες τις τιμές των ιδιοτήτων ενός αντικειμένου
debug(fn)
Προσθέτει ένα σημείο διακοπής στην πρώτη γραμμή μιας συνάρτησης
undebug(fn)
Αφαιρεί το σημείο διακοπής από την πρώτη γραμμή μιας συνάρτησης.
monitor(fn)
Ενεργοποιεί την καταγραφή κάθε κλήσης προς μια συνάρτηση
unmonitor(fn)
Απενεργοποιεί την καταγραφή κάθε κλήσης προς μια συνάρτηση.
monitorEvents(αντικείμενο[, τύποι])
Ενεργοποιεί την καταγραφή όλως των συμβάντων που γίνονται στο αντικείμενο. Το προαιρετικό όρισμα “τύποι” μπορεί να χρησιμοποιηθεί για να καταγραφούν μόνο συγκεκριμένοι τύποι συμβάντων. Οι ποιο διαδεδομένοι τύποι είναι mouse και key. Η πλήρης λίστα με τους τύπους είναι η ακόλουθη: composition, contextmenu, drag, focus, form, key, load, mouse, mutation, paint, scroll, text, ui, και xul.
unmonitorEvent(αντικείμενο[. Τύποι])
Απενεργοποιεί την καταγραφή των συμβάντων.
profile([τίτλος])
Ενεργοποιεί το προφίλ για τη JavaScript. Το προαιρετικό όρισμα “τίτλος” στη μέθοδο εμφανίζει το μήνυμα ως τίτλο του προφίλ
profileEnd()
Απενεργοποιεί το προφίλ για τη JavaScript και εκτυπώνει την έκθεση.
Μορφοποίηση κειμένων
Όλες οι μέθοδοι καταγραφής του Firebug μπορούν να μορφοποιήσουν ένα κείμενο με τους ακόλουθους χαρακτήρες.
%s
Μορφοποιεί το αντικείμενο ως κείμενο
%d, %i, %l, %f
Μορφοποιεί το αντικείμενο ως αριθμό
%o
Μορφοποιεί το αντικείμενο ως σύνδεσμο προς της θέση του αντικειμένου
%1.0, %2.0, κ.α.
Μορφοποιεί το αντικείμενο ως ένα διαδραστικό πίνακα των ιδιοτήτων του.
%.o
Μορφοποιεί το αντικείμενο ως ένα πίνακα των ιδιοτήτων του.
%x
Μορφοποιεί το αντικείμενο ως ένα διαδραστικό έγγραφο XML
%1.x, %2.x, κ.α.
Μορφοποιεί το αντικείμενο ως ένα XML έγγραφο σε επίπεδα.
Περισσότερα για τον CorfuGmr
Σχόλια
[...] This post was mentioned on Twitter by Web Resoures.eu, Web Resoures.eu. Web Resoures.eu said: Κάντε την αρχή με τον Firebug 1.5 : http://j.mp/9tDzGJ [...]
Αφήστε ένα σχόλιο
Αναζήτηση
Newsletters
Newsletters από το Web Resources
Μεταστοιχεία
Αρχείο
- Φεβρουαρίου 2012 (1)
- Δεκεμβρίου 2011 (2)
- Νοεμβρίου 2011 (1)
- Οκτωβρίου 2011 (4)
- Σεπτεμβρίου 2011 (3)
- Αυγούστου 2011 (6)
- Ιουλίου 2011 (14)
- Ιουνίου 2011 (6)
- Μαΐου 2011 (3)
- Απριλίου 2011 (11)
- Μαρτίου 2011 (19)
- Φεβρουαρίου 2011 (8)
- Ιανουαρίου 2011 (17)
- Δεκεμβρίου 2010 (8)
- Νοεμβρίου 2010 (8)
- Οκτωβρίου 2010 (11)
- Σεπτεμβρίου 2010 (11)
- Αυγούστου 2010 (5)
- Ιουλίου 2010 (8)
- Ιουνίου 2010 (10)
- Μαΐου 2010 (14)
- Απριλίου 2010 (8)
- Μαρτίου 2010 (14)
![Θεωρία των χρωμάτων [Μέρος 1ο] : Η έννοια των χρωμάτων](http://www.web-resources.eu/wp-content/uploads/2010/08/00012-30x30.jpg "Θεωρία των χρωμάτων [Μέρος 1ο] : Η έννοια των χρωμάτων"){kind=small}
