Ο Firefox 10, που αναμένεται να κυκλοφορήσει την 31η Ιανουαρίου (την ίδια ημέρα που ο Firefox 11 γίνεται επίσημη κυκλοφορία Beta), ολοκληρώνει τελικά την αυξανόμενη συλλογή εργαλείων προγραμματιστή του προγράμματος περιήγησης με επιθεωρητές σελίδων και στυλ.

Με κάποιο τρόπο, αυτά τα εργαλεία είναι παρόμοια με το Firebug, αλλά είναι επίσης μοναδικά Mozilla-ey.

Αντί να προσπαθήσουμε να αναπαράγουμε τα εργαλεία Firebug ή τα εργαλεία ανάπτυξης του WebKit, το Mozilla έχει συμπεριλάβει μόνο τα πιο βασικά χαρακτηριστικά, εστιάζοντας αντ 'αυτού στην κάνοντας την εμπειρία κομψή.

Η νέα προσέγγιση λειτουργεί ή οι σχεδιαστές θα τρέξουν να φωνάζουν πίσω στο Firebug; Ας ΡΙΞΟΥΜΕ μια ΜΑΤΙΑ.

Μπορείτε να τραβήξετε τον Επιθεωρητή Σελίδων κάνοντας δεξί κλικ σε μια ιστοσελίδα και επιλέγοντας "Inspect." (Το Firebug άλλαξε πρόσφατα το στοιχείο του μενού περιβάλλοντος για να διαβάσει το "Inspect in Firebug", ώστε να συνυπάρχει ειρηνικά με τα ενσωματωμένα εργαλεία dev.) Στο κάτω μέρος της οθόνης εμφανίζεται μια μωβ γραμμή με μια λίστα με τους γονείς και τα παιδιά του επιλεγμένου στοιχείου.

Μπορείτε να κάνετε κλικ σε γονείς ή παιδιά για να τα επιλέξετε και μπορείτε να κάνετε δεξί κλικ σε ένα στοιχείο για να δείτε τα αδέλφια του. Υπάρχουν επίσης κουμπιά με τίτλο "Επιθεωρήστε", "HTML" και "Στυλ". Εάν η θάλασσα των καρτελών και των κουμπιών Firebug σας οδήγησε στον τοίχο, αυτή η διάταξη θα είναι θεϊκή. Αν απλά θέλετε να δείτε το DOM, πρέπει πρώτα να κάνετε κλικ στο "HTML" και μπορεί να σας οδηγήσει στον τοίχο.

Σκάβοντας μέσα

Κάνοντας κλικ στο κουμπί HTML εμφανίζεται ένας πίνακας που εμφανίζει την ιεραρχία των ετικετών HTML που αποτελούν τη σελίδα σας. Σε αυτήν την προβολή, μπορείτε να επεκτείνετε και να συμπτύξετε ετικέτες και να επεξεργαστείτε τα χαρακτηριστικά τους. Κάνοντας κλικ στο κουμπί "Επιθεώρηση", μπορείτε να τοποθετήσετε δείκτη πάνω από τα στοιχεία για να τα επιθεωρήσετε, ενώ το Firefox επισημαίνει το στοιχείο που ελέγχετε και σκουραίνει την υπόλοιπη σελίδα.

Κάνοντας κλικ στο κουμπί "Στυλ" εμφανίζεται ο Επιθεωρητής στυλ, εμφανίζοντας τους κανόνες CSS που ισχύουν για το επιλεγμένο στοιχείο. Στον Επιθεωρητή στυλ, μπορείτε να μεταβείτε από "Κανόνες" σε μια ενότητα "Ιδιότητες" που σας δίνει τις υπολογισμένες ιδιότητες CSS για το επιλεγμένο στοιχείο, μαζί με συνδέσμους με την τεκμηρίωση του Mozilla για κάθε ιδιότητα.

Ο Επιθεωρητής στυλ βρίσκεται στα δεξιά της σελίδας, ενώ ο επιθεωρητής σελίδας και ο πίνακας HTML κάθονται στο κάτω μέρος της οθόνης. Μπορείτε να επιλέξετε να εμφανίσετε και τα δύο παράθυρα, μόνο ένα από αυτά, ή και τα δύο.

The Firefox HTML inspector, expanded.

Αυτό ουσιαστικά καλύπτει το σύνολο των όσων κάνουν οι επιθεωρητές σελίδων και στυλ. Η κονσόλα ιστού και το scratchpad JavaScript, που παρουσιάστηκαν σε προηγούμενες εκδόσεις του Firefox, είναι ξεχωριστά εργαλεία. Δεν υπάρχει παρακολούθηση δραστηριότητας δικτύου. Δεν υπάρχει κανένας μεταγωγέας πράκτορα χρήστη, δεν υπάρχει "επεξεργασία ως χαρακτηριστικό γνώρισμα HTML", δεν υπάρχουν εργαλεία ελέγχου απόδοσης, δεν υπάρχει τρόπος να εισάγονται νέες ετικέτες σε μια σελίδα, κανένας τρόπος να ενεργοποιηθεί η κατάσταση του δείκτη του στοιχείου. Δεν υπάρχει καν ένας πίνακας "διάταξης" για την προβολή των διαστάσεων, της επένδυσης και των περιθωρίων του στοιχείου σας.

Παρά τους περιορισμούς αυτούς, συνεχίζω να επιστρέφω στους επιθεωρητές σελίδων και στυλ. Επιστρέφω για την αδιάκοπη διασύνδεση, τα προσεκτικά τοποθετημένα τζάμια, και αυτό το funky μοβ χρώμιο. Επιστρέφω επειδή είναι ευχάριστη χρήση και επειδή ανταποκρίνονται στις ανάγκες μου τις περισσότερες φορές.

Το απλό UI των επιθεωρητών σημαίνει επίσης ότι είναι χρήσιμα ακόμη και όταν έχω κάνει το παράθυρο μικρό για να δοκιμάσετε σχέδια που ανταποκρίνονται. Όταν δεν ικανοποιούν τις ανάγκες μου, απλώς ανοίγω το Firebug ή τη Γραμμή Εργαλείων Web Developer. (Θα το έκανα πολύ λιγότερο εάν τα ενσωματωμένα εργαλεία dev είχαν ισοδύναμα με τα πλαίσια Layout και Net της Firebug).

The Firefox HTML inspector used to analyze a responsive design

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

Αυτά τα προγράμματα περιήγησης φτάνουν τα 11

Εκτός από τον HTML και τον επιθεωρητή στυλ, μερικές καινοτόμες λειτουργίες είναι πλακόστρωτες για μεταγενέστερες εκδόσεις του Firefox. Τα εργαλεία προγραμματιστή του Firefox 11 σας επιτρέπουν να βλέπετε την ιστοσελίδα σας ως τρισδιάστατες στοίβες ετικετών. Κάθε φορά που φωλιάζετε μια ετικέτα, αυτή η στοίβα ετικετών γίνεται πιο ψηλή. Αυτή η λειτουργία είναι πραγματικά εκπληκτικά χρήσιμη-μπορείτε να δείτε με μια ματιά αν ένα στοιχείο βρίσκεται μέσα σε λάθος γονέα και βλέποντας αυτές τις ετικέτες να συσσωρεύονται θα θεραπεύσει νέους προγραμματιστές div-itis σωστά γρήγορα.

The Firefox 3D inspector analylzing Web Designer Depot

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

Προηγουμένως, αυτό το είδος της ζωντανής επεξεργασίας CSS ήταν ο τομέας των αναπτυξιακών περιβαλλόντων, όπως Εσπρέσο , γι 'αυτό είναι φοβερό να βλέπετε αυτή τη δυνατότητα ενσωματωμένη στο πρόγραμμα περιήγησης. Περισσότερες δυνατότητες, συμπεριλαμβανομένων των "εργαλείων που βοηθούν τα θέματα επιδόσεων εφαρμογών", είναι σχεδιασμένος για αργότερα φέτος.

Firefox 11's CSS editor

Ακόμα και στον Firefox 11, η σύγκριση των ενσωματωμένων εργαλείων dev με το Firebug (ή με τα εργαλεία WebKit dev) είναι λίγο σαν τη σύγκριση του iOS με το Android. Ο πρώτος έχει ένα καθαρό, διαισθητικό περιβάλλον χρήστη και μερικές καινοτόμες ιδέες, αλλά είναι σύντομη στα χαρακτηριστικά του χρήστη.

Ο τελευταίος έχει όλα τα χαρακτηριστικά που μπορείτε να σκεφτείτε και μπορείτε να ρυθμίσετε τις βλάκες αν αυτό, αλλά δεν είναι τόσο κομψό όσο το wunderkind του Cupertino. Σε αντίθεση με το iOS και το Android, είναι εύκολο να χρησιμοποιήσετε και τα δύο εργαλεία ταυτόχρονα, αν θέλετε. Το Mozilla συνεχίζει συμβάλλουν στο Firebug και κατέστησε σαφές ότι το Firebug είναι εδώ για μεγάλο χρονικό διάστημα.

Firefox's HTML inspector and Firebug, existing together in harmony.

Ποιο εργαλείο είναι κατάλληλο για εσάς; Αυτό εξαρτάται από τα χαρακτηριστικά που χρειάζεστε, από τα χαρακτηριστικά που μπορείτε να ζήσετε χωρίς και από το πώς αισθάνεστε για το κυνήγι επεκτάσεων για να γεμίσετε τα κενά στο εργαλείο επιλογής σας. Ό, τι νομίζετε για τα νέα εργαλεία προγραμματιστών, αυτό είναι ένας τομέας στον οποίο δεν μπορείτε να κατηγορήσετε τον Firefox για το WebKit.

Είστε ενθουσιασμένοι με τα νέα εργαλεία dev στο Firefox 10; Ποια είναι τα εργαλεία που διαθέτετε; Ενημερώστε μας στα σχόλια!