Πώς να χρησιμοποιήσετε τα εργαλεία ανάπτυξης Ιστού του Firefox

Το μενού του Web Developer του Firefox περιέχει εργαλεία για την επιθεώρηση σελίδων, την εκτέλεση αυθαίρετου κώδικα JavaScript και την προβολή αιτήσεων HTTP και άλλων μηνυμάτων. Ο Firefox 10 πρόσθεσε ένα νέο εργαλείο επιθεωρητή και ενημερωμένο Scratchpad.

Ο νέος προγραμματιστής ιστού του Firefox, σε συνδυασμό με τα τρομερά πρόσθετα web-developer όπως το Firebug και το Toolbar Web Developer, κάνουν το Firefox ιδανικό για web developers. Όλα τα εργαλεία είναι διαθέσιμα στο μενού Web Developer στο μενού του Firefox.

Επιθεωρητής σελίδας

Επιθεωρήστε ένα συγκεκριμένο στοιχείο κάνοντας δεξί κλικ και επιλέγοντας Επιθεωρώ (ή πατώντας Q). Μπορείτε επίσης να ξεκινήσετε το Επιθεωρητής από το μενού Web Developer.

Θα δείτε μια γραμμή εργαλείων στο κάτω μέρος της οθόνης, την οποία μπορείτε να χρησιμοποιήσετε για να ελέγξετε τον επιθεωρητή. Το επιλεγμένο στοιχείο θα επισημανθεί και άλλα στοιχεία στη σελίδα θα είναι αχνά.

Αν θέλετε να επιλέξετε ένα νέο στοιχείο, κάντε κλικ στο Επιθεωρώ από τη γραμμή εργαλείων, τοποθετήστε το δείκτη του ποντικιού πάνω από τη σελίδα και κάντε κλικ στο στοιχείο σας. Ο Firefox επισημαίνει το στοιχείο κάτω από τον κέρσορα σας.

Μπορείτε να πλοηγηθείτε μεταξύ των γονικών και των παιδικών στοιχείων κάνοντας κλικ στο breadcrumbs στη γραμμή εργαλείων.

HTML Inspector

Κάντε κλικ στο HTML για να προβάλετε τον κώδικα HTML του τρέχοντος επιλεγμένου στοιχείου.

Ο επιθεωρητής HTML σας επιτρέπει να επεκτείνετε και να συμπτύξετε τις ετικέτες HTML, καθιστώντας εύκολη την απεικόνιση με μια ματιά. Εάν θέλετε να δείτε το HTML της σελίδας σε ένα επίπεδο αρχείο, μπορείτε να επιλέξετε Δες την πηγή της σελίδας από το μενού Web Developer.

Επιθεωρητής CSS

Κάντε κλικ στο Στυλ για να δείτε τους κανόνες CSS που εφαρμόζονται στο επιλεγμένο στοιχείο.

Υπάρχει επίσης ένας πίνακας ιδιοτήτων CSS - εναλλαγή μεταξύ των δύο κάνοντας κλικ στο Κανόνες και Ιδιότητες κουμπιά. Για να σας βοηθήσει να βρείτε συγκεκριμένες ιδιότητες, ο πίνακας ιδιοτήτων περιλαμβάνει ένα πλαίσιο αναζήτησης.

Μπορείτε να επεξεργαστείτε το CSS του στοιχείου σε κίνηση από τον πίνακα "Κανόνες". Καταργήστε την επιλογή οποιουδήποτε από τα πλαίσια ελέγχου για να απενεργοποιήσετε έναν κανόνα, κάντε κλικ στο κείμενο για να αλλάξετε έναν κανόνα ή προσθέστε τους δικούς σας κανόνες στο στοιχείο στο επάνω μέρος του παραθύρου. Εδώ, έχω προσθέσει το γραμματοσειρά-βάρος: έντονα. CSS, κάνοντας το κείμενο του στοιχείου έντονα.

JavaScript Scratchpad

Το Scratchpad είδε επίσης μια ενημερωμένη έκδοση με τον Firefox 10 και τώρα περιέχει επισήμανση σύνταξης. Μπορείτε να πληκτρολογήσετε κώδικα JavaScript για να τρέξετε στην τρέχουσα σελίδα.

Αφού έχετε, κάντε κλικ στο Εκτέλεση και επιλέξτε Τρέξιμο. Ο κώδικας εκτελείται στην τρέχουσα καρτέλα.

Κονσόλα Web

Η Κονσόλα Web αντικαθιστά την παλιά Κονσόλα λάθους, η οποία έχει καταργηθεί και θα καταργηθεί σε μια μελλοντική έκδοση του Firefox.

Η κονσόλα εμφανίζει τέσσερις διαφορετικούς τύπους μηνυμάτων, στους οποίους μπορείτε να αλλάξετε την ορατότητα - των αιτημάτων δικτύου, των μηνυμάτων σφαλμάτων CSS, των μηνυμάτων λάθους JavaScript και των μηνυμάτων προγραμματιστών ιστού.

Τι είναι ένα μήνυμα προγραμματιστή ιστού; Είναι ένα μήνυμα που εκτυπώνεται στο αντικείμενο window.console. Για παράδειγμα, θα μπορούσαμε να εκτελέσουμε το window.console.log ("Hello World"). JavaScript κώδικα στο Scratchpad για να εκτυπώσετε ένα μήνυμα προγραμματιστή στην κονσόλα. Οι υπεύθυνοι ανάπτυξης ιστού μπορούν να ενσωματώσουν αυτά τα μηνύματα στον κώδικα JavaScript τους για να βοηθήσουν στην εκσφαλμάτωση.

Ανανεώστε τη σελίδα και θα δείτε τα δημιουργημένα αιτήματα δικτύου και άλλα μηνύματα.

Χρησιμοποιήστε το πλαίσιο αναζήτησης για να φιλτράρετε τα μηνύματα. κάντε κλικ σε ένα αίτημα αν θέλετε να δείτε περισσότερες λεπτομέρειες.

Από τον Firefox 10, η Κονσόλα Ιστού μπορεί να λειτουργεί παράλληλα με τον Επιθεωρητή Σελίδων. Η μεταβλητή $ 0 αντιπροσωπεύει το επιλεγμένο αντικείμενο στον επιθεωρητή. Έτσι, για παράδειγμα, αν θέλετε να κρύψετε το αντικείμενο που έχετε επιλέξει, μπορείτε να το εκτελέσετε $ 0.style.display = "none" στην κονσόλα.

Αν ενδιαφέρεστε να μάθετε περισσότερα σχετικά με τη χρήση της κονσόλας και των ενσωματωμένων λειτουργιών της, ανατρέξτε στη σελίδα της Κονσόλα Web στην ιστοσελίδα του Mozilla's Developer Network.

Αποκτήστε περισσότερα εργαλεία

ο Αποκτήστε περισσότερα εργαλεία επιλογή σας θα μεταβείτε στη συλλογή πρόσθετων εργαλείων Web Developer στον κατάλογο Mozilla Add-Ons. Περιέχει μερικά από τα καλύτερα πρόσθετα για προγραμματιστές ιστού, συμπεριλαμβανομένου του Firebug και της γραμμής εργαλείων Web Developer Toolbar.

Εάν έχετε χρησιμοποιήσει τον Firefox για μερικά χρόνια, μπορεί να θυμάστε τον Επιθεωρητή DOM. Τα ενσωματωμένα εργαλεία ανάπτυξης του Firefox έχουν απομακρυνθεί από τότε.