13Sep
του Web Developer του Firefox περιέχει εργαλεία για την επιθεώρηση σελίδων, την εκτέλεση αυθαίρετου κώδικα JavaScript και την προβολή αιτήσεων HTTP και άλλων μηνυμάτων.Ο Firefox 10 πρόσθεσε ένα νέο εργαλείο επιθεωρητή και ενημερωμένο Scratchpad.
Τα νέα χαρακτηριστικά γνωρίσματα του Firefox για τον προγραμματιστή ιστού, σε συνδυασμό με τα τρομερά πρόσθετα web-developer όπως το Firebug και το Toolbar για Web Developer, κάνουν το Firefox ιδανικό για web developers.Όλα τα εργαλεία είναι διαθέσιμα στο μενού Web Developer στο μενού του Firefox.
Επιθεωρητής σελίδας
Επιθεωρήστε ένα συγκεκριμένο στοιχείο κάνοντας δεξί κλικ και επιλέγοντας Επιθεωρήστε ( ή πατώντας Q ).Μπορείτε επίσης να ξεκινήσετε τον Inspector από το μενού Web Developer.
Θα δείτε μια γραμμή εργαλείων στο κάτω μέρος της οθόνης, την οποία μπορείτε να χρησιμοποιήσετε για να ελέγξετε τον επιθεωρητή.Το επιλεγμένο στοιχείο θα επισημανθεί και άλλα στοιχεία στη σελίδα θα είναι αχνά.
Αν θέλετε να επιλέξετε ένα νέο στοιχείο, κάντε κλικ στο κουμπί
Inspect στη γραμμή εργαλείων, τοποθετήστε το δείκτη του ποντικιού πάνω στη σελίδα και κάντε κλικ στο στοιχείο σας.Ο Firefox επισημαίνει το στοιχείο κάτω από τον κέρσορα σας.Μπορείτε να πλοηγηθείτε μεταξύ των γονικών και των παιδικών στοιχείων κάνοντας κλικ στο breadcrumbs στη γραμμή εργαλείων.
HTML Inspector
Κάντε κλικ στο κουμπί HTML για να δείτε τον κώδικα HTML του τρέχοντος επιλεγμένου στοιχείου.
Ο επιθεωρητής HTML σας επιτρέπει να επεκτείνετε και να συμπτύξετε τις ετικέτες HTML, καθιστώντας εύκολη την απεικόνιση με μια ματιά.Εάν θέλετε να δείτε το HTML της σελίδας σε ένα επίπεδο αρχείο, μπορείτε να επιλέξετε Προβολή προέλευσης σελίδας από το μενού Web Developer.
Επιθεωρητής CSS
Κάντε κλικ στο κουμπί στυλ για να δείτε τους κανόνες CSS που εφαρμόζονται στο επιλεγμένο στοιχείο.
Υπάρχει επίσης ένας πίνακας ιδιοτήτων CSS - εναλλαγή μεταξύ των δύο, κάνοντας κλικ στα κουμπιά και .Για να σας βοηθήσει να βρείτε συγκεκριμένες ιδιότητες, ο πίνακας ιδιοτήτων περιλαμβάνει ένα πλαίσιο αναζήτησης.
Μπορείτε να επεξεργαστείτε το CSS του στοιχείου σε λειτουργία από τον πίνακα "Κανόνες".Καταργήστε την επιλογή οποιουδήποτε από τα πλαίσια ελέγχου για να απενεργοποιήσετε έναν κανόνα, κάντε κλικ στο κείμενο για να αλλάξετε έναν κανόνα ή προσθέστε τους δικούς σας κανόνες στο στοιχείο στο επάνω μέρος του παραθύρου.Εδώ, έχω προσθέσει το font-weight: έντονο. κανόνα CSS, κάνοντας το κείμενο του στοιχείου έντονα.
JavaScript Scratchpad
Το Scratchpad είδε επίσης μια ενημερωμένη έκδοση με το Firefox 10 και τώρα περιέχει επισήμανση σύνταξης.Μπορείτε να πληκτρολογήσετε κώδικα JavaScript για να τρέξετε στην τρέχουσα σελίδα.
Μόλις έχετε, κάντε κλικ στο μενού Εκτέλεση και επιλέξτε Run . Ο κώδικας εκτελείται στην τρέχουσα καρτέλα.
Web Console
Η Κονσόλα 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.
Λάβετε περισσότερα εργαλεία
Η επιλογή Get More Tools Η επιλογή σας μεταφέρει στην συλλογή πρόσθετων εργαλείων Web Developer's Toolbox στον ιστότοπο Mozilla Add-Ons.Περιέχει μερικά από τα καλύτερα πρόσθετα για προγραμματιστές ιστού, συμπεριλαμβανομένου του Firebug και της γραμμής εργαλείων Web Developer Toolbar.
Εάν έχετε χρησιμοποιήσει τον Firefox για μερικά χρόνια, ίσως να θυμάστε τον Επιθεωρητή DOM.Τα ενσωματωμένα εργαλεία ανάπτυξης του Firefox έχουν απομακρυνθεί από τότε.