Μια ματιά σε βασικά εργαλεία του Firefox για προγραμματιστές Web

Ο Firefox είναι από καιρό το προτιμώμενο πρόγραμμα περιήγησης για ανάπτυξη ιστού. Υπάρχουν πολλά χρήσιμα πρόσθετα για την εκτέλεση της εργασίας. Σε αυτή την ανάρτηση, θα εξετάσουμε μερικά add-ons που νομίζω ότι είναι απαραίτητο να εγκατασταθεί εάν πρόκειται να κάνετε την ανάπτυξη ιστοσελίδων. Επίσης πρόκειται να αποκαλύψουμε ορισμένα από τα χαρακτηριστικά αυτών των πρόσθετων που μπορούν να βοηθήσουν.

Πρώτα απ 'όλα, πρέπει να εγκαταστήσουμε το Firebug.

Firebug

Το Firebug είναι ένα πρόσθετο που πρέπει να εγκαταστήσετε για την ανάπτυξη ιστού. Υποθέτοντας ότι δεν ξέρετε πού να πάρετε το Firebug, μπορείτε να το εγκαταστήσετε εδώ. Πιθανώς, πρέπει να κάνετε επανεκκίνηση του Firefox προτού ενεργοποιηθεί.

Στη συνέχεια, μπορείτε να προβάλετε το Firebug με έναν από τους παρακάτω τρόπους: ακολουθήστε αυτό το μενού Εργαλεία> Προγραμματιστές ιστού> Firebug, κάντε δεξί κλικ στην ιστοσελίδα και επιλέξτε “Επιθεωρήστε το στοιχείο με Firebug”.

Εναλλακτικά, μπορείτε να βρείτε ένα εικονίδιο Firebug στον Firefox και κάντε κλικ σε αυτό, αυτό θα δείξει το παράθυρο firebug.

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

Ρύθμιση μεγέθους κουτιού

Το στοιχείο HTML αποτελείται από μοντέλο πλαισίου CSS που αποτελείται από περιθώριο περιθωρίου, παρεμβολής και διάσταση αντικειμένου (πλάτος / ύψος). Υπάρχουν φορές που ίσως χρειαστεί να τροποποιήσουμε αυτές τις ιδιότητες. Σε αυτή την περίπτωση, μπορείτε να επιλέξετε ένα από τα στοιχεία που θέλετε να αλλάξει και στη συνέχεια να μεταβείτε στο Σχέδιο πίνακας.

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

Υπολογιστικά στυλ

Σε πολλές περιπτώσεις, ίσως αναρωτιέστε γιατί δεν εφαρμόζονται ορισμένα στυλ. Ένας από τους ευκολότερους και ταχύτερους τρόπους, ειδικά όταν έχετε χιλιάδες γραμμές στυλ, είναι με την επιθεώρηση από το Υπολογισμένο στυλ πίνακας. Αυτό το παράδειγμα δείχνει ότι το χρώμα κειμένου της ετικέτας αγκύρωσης αντικαθίσταται από .κουμπί ενώ το φόντο του .κουμπί η τάξη αντικαθίσταται από .button.add.

Έλεγχος οικογένειας γραμματοσειρών (ο εύκολος τρόπος)

Πιθανότατα συχνά βρίσκετε κάτι τέτοιο μέσα γραμματοσειρά-οικογένεια ιδιοκτησία σε CSS με διάφορες οικογένειες γραμματοσειρών. Δυστυχώς, αυτό δεν θα μας πει συγκεκριμένα ποια γραμματοσειρά παίρνει το πρόγραμμα περιήγησης. Για να διευκολύνουμε την αναγνώριση, μπορούμε να εγκαταστήσουμε αυτή την επέκταση Firebug FireFontFamily.

Μετά την ολοκλήρωση της εγκατάστασης, φορτώστε την ιστοσελίδα σας και τώρα μπορούμε να δούμε με σαφήνεια ποια οικογένεια γραμματοσειρών εφαρμόζεται. Στην περίπτωσή μας είναι στην πραγματικότητα Helvetica Neue (βλ. πυροβολισμό).

Ανάλυση απόδοσης

Αυτό μπορεί να είναι πληρεξούσιο, αλλά η ταχύτητα του ιστότοπου είναι πλέον μία από τις παραμέτρους της Google (αλγόριθμος) για να αποφασίσει την ποιότητα του ιστότοπου. ο ιστότοπος που φορτώνει ταχύτερα θεωρείται ότι είναι καλά ανεπτυγμένος και κατατάσσεται υψηλότερος από άποψη περιεχομένου. Έτσι η ταχύτητα δεν είναι κάτι που πρέπει να αγνοηθεί.

Net Panel

Η πρώτη θέση που μπορεί να χρειαστεί να επισκεφθείτε για να ελέγξετε την απόδοση του ιστότοπού σας είναι η Καθαρά πίνακας. Αυτός ο πίνακας θα καταγράψει το αίτημα HTTP του ιστότοπού σας όταν φορτωθεί. Αυτή η εικόνα οθόνης δείχνει μια ιστοσελίδα που φορτώνει 42 αιτήματος και παίρνει γύρω 4,36 δευτερόλεπτα φορτώνω.

Στη συνέχεια, μπορείτε να ταξινομήσετε το αίτημα HTTP στον τύπο τους, όπως HTML, CSS και Εικόνες.

Yslow!

Επιπλέον, μπορείτε επίσης να εγκαταστήσετε YSlow, μια επέκταση για το Firebug από το Yahoo !. Αφού ενεργοποιηθεί, θα βρείτε ένα πρόσθετο πλαίσιο που ονομάζεται Yslow!.

Παρόμοιο με Καθαρά πάνελ, Yslow! θα καταγράψει τις επιδόσεις της ιστοσελίδας όταν φορτώνεται, αλλά στη συνέχεια θα σας πει επίσης γιατί η ιστοσελίδα είναι αργή και τι μπορούμε να κάνουμε για να την λύσουμε. Σε αυτό το παράδειγμα, κάνουμε μια δοκιμή σε μια ιστοσελίδα και βαθμολογείται 86 για τη συνολική απόδοση, που θεωρείται εντάξει.

Ταχύτητα σελίδας

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

Εργαλεία προγραμματιστή ιστού

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

Έλεγχος εικόνας

Υπάρχουν φορές που ίσως χρειαστεί να λάβουμε πληροφορίες εικόνας από την ιστοσελίδα. Συχνά βλέπω να το κάνουν οι άνθρωποι κάνοντας εμπόδια στο πρόγραμμα περιήγησης ή κάνοντας δεξί κλικ στην εικόνα και επιλέγοντας Προβολή πληροφοριών εικόνας, όπως έτσι:

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

Και, αυτό το παράδειγμα δείχνει πώς θα δείξουμε ταυτόχρονα τη διάσταση της εικόνας και το μέγεθος του αρχείου εικόνας:

Ενσωματωμένα εργαλεία Firefox

Στις πρόσφατες εκδόσεις, ο Firefox έχει βελτιώσει εντυπωσιακά τις ενσωματωμένες δυνατότητές του για προγραμματιστές ιστού, μερικοί από τους οποίους είναι:

Εγγενής επιθεώρηση στοιχείου

Αυτό το εγγενές Ελέγξτε το Στοιχείο από τον Firefox μπορεί να μοιάζουν με “Επιθεωρήστε το στοιχείο στο Firebug”, αλλά ενεργεί με διαφορετικούς τρόπους.

Αυτή τη φορά, δεν θα περάσω από αυτό το χαρακτηριστικό περαιτέρω, δεδομένου ότι είναι ουσιαστικά όμοιο με το Firebug HTML και το CSS panel, αν και με διαφορά στη διάταξη και το σχεδιασμό. Αλλά, υπάρχει ένα χαρακτηριστικό γνώρισμα που αξίζει να δοκιμάσετε, το 3D προβολή.

Χρησιμοποιώντας 3D προβολή μπορείτε να προβάλετε τη δομή της ιστοσελίδας σε βάθος. Για να ενεργοποιήσετε αυτήν την προβολή, μπορείτε να βρείτε το κουμπί στην κάτω δεξιά πλευρά του “Έγινε επικόλληση του στοιχείου”. Αυτό είναι το πώς 3D προβολή μοιάζει με.

Δεν το χρησιμοποιώ τόσο συχνά όσο άλλα χαρακτηριστικά, αλλά είναι ένα αρκετά καινοτόμο χαρακτηριστικό από το Mozilla εγώ παραδέχομαι και σίγουρα πολύ χρήσιμο σε ορισμένες περιπτώσεις.

Web Design View

Από την αυξανόμενη δημοτικότητα στο Responsive Web Design, ο Firefox έχει ξεκινήσει ένα Responsive Bookmarklet στον Browser. Αυτό το εργαλείο θα μας επιτρέψει να δοκιμάσουμε τον ανταποκρινόμενο ιστότοπό μας σε διαφορετικά παράθυρα προβολής χωρίς να αλλάξουμε το μέγεθος του παραθύρου του προγράμματος περιήγησης.

Αυτή η προβολή είναι διαθέσιμη από αυτό το μενού: Εργαλεία> Προγραμματιστής ιστού> Προβολή σχεδίασης ιστού. Και, πώς φαίνεται η θέα.

Επεξεργαστής στυλ

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

Αυτό το χαρακτηριστικό είναι τόσο δροσερό όσο το Web Design View, σας επιτρέπει να επεξεργαστείτε το CSS, να δείτε τις επιπτώσεις αμέσως στο πρόγραμμα περιήγησης και να αποθηκεύσετε τις αλλαγές που επηρεάζουν άμεσα το αρχείο προέλευσης CSS.

Ο επεξεργαστής στυλ είναι διαθέσιμος από το ακόλουθο μενού: Εργαλεία> Προγραμματιστής ιστού> Επεξεργαστής στυλ.

Τελική σκέψη

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

Τι χαρακτηριστικά χρησιμοποιείτε συχνά; Μπορείτε να μοιραστείτε τις σκέψεις σας στο παρακάτω πλαίσιο σχολίων.