Το Web Developer Toolbar για Firefox

Το Web Developer Toolbar για Firefox αναφέρεται συχνά ως ένα από τα must-have εργαλεία για την ανάπτυξη Ιστού. Μετά τη χρήση της γραμμής εργαλείων στο πλαίσιο του περιβάλλοντος σχεδιασμού μου, εγώ ολόψυχα συμφωνώ. Κόβει πίσω το χρόνο ανάπτυξης με τις ώρες. Κάνει ό, τι μπορεί να είναι κουραστική καθήκοντα, σχεδόν διασκεδαστική. Μου αφήνει γρήγορα ματιά σε μια ιστοσελίδα σε ένα διαφορετικό παράθυρο μέγεθος. Βοηθά μου debug και θα επικυρώσει JavaScript και CSS κώδικα.

Chris Pederick αναπτυχθεί αυτό το Toolbar για Firefox. Εδώ είναι που η γραμμή εργαλείων μοιάζει:

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

Όπως μπορείτε να δείτε, έρχεται με πολλές επιλογές. Αν και δεν έχουν χρησιμοποιήσει όλες τις δυνατότητες που παρέχει η γραμμή εργαλείων, επιτρέψτε μου να κατάλογος μερικά από τα αγαπημένα μου.

Σε πραγματικό χρόνο debugging CSS. Κατά την προβολή ιστοσελίδα μου, μπορώ να ενημερώσει το αρχείο CSS που εμφανίζεται προς τα αριστερά (ή κάτω) από την ιστοσελίδα (από τη γραμμή εργαλείων, επιλέξτε CSS / Επεξεργασία CSS) και δείτε άμεσα αποτελέσματα στο παράθυρο του προγράμματος περιήγησης. Αυτό είναι μεγάλο για την αντιμετώπιση προβλημάτων και για την κάθοδο στην nitty-χαλικώδεις για το πώς αυτά τα επιπλέον 10 pixels του παραγέμισμα επηρεάζει ιστοσελίδα μου. Αν και δεν μπορώ να αποθηκεύσετε άμεσα CSS ενημερώσεις μου, μπορώ εύκολα να αντιγράψετε τις αλλαγές που γνωρίζω ήδη δουλειά και να τα επικολλήσετε στο φύλλο στυλ CSS ανοικτή σε επεξεργαστή μου ιστοσελίδα.

Validators. Το επάνω δεξιά γωνία της γραμμής εργαλείων δείχνει κόκκινο / πράσινα κουμπιά για να δείχνει την ισχύ του κώδικα CSS και Javascript κώδικα. Εάν το κουμπί είναι κόκκινο, εγώ απλά το ποντίκι πάνω από το κουμπί και λέει αμέσως μου το λάθος είναι διαπίστωση. Μπορώ να κάνετε κλικ στο Error Console για να μάθετε περισσότερες λεπτομέρειες, επιστρέψτε στην κώδικα του (CSS ή Javascript), κάνει την αλλαγή, ανανεώστε το παράθυρο του προγράμματος περιήγησης και να παρακολουθήσετε το κουμπί (ες), ενδεχομένως, να γίνει πράσινη. Η ευκολία της εντοπισμό σφαλμάτων κώδικα είναι καταπληκτικό - και είναι συνήθως γρήγορα επιλυθεί.

Resize Παράθυρο. Δεδομένου ότι θέλω τις ιστοσελίδες να δείχνουν καλά σε διαφορετικές αναλύσεις οθόνης, θέλω να εξακριβωθεί πώς οι σελίδες θα δείτε σε διαφορετικά παράθυρα μέγεθος. Με την Developer Toolbar, αυτό είναι ένα κλικ του κουμπιού. Εγώ απλά επιλέξτε ένα διαφορετικό μέγεθος του παραθύρου από την επιλογή Αλλαγή μεγέθους και αμέσως άποψη του χώρου σε διαφορετικό μέγεθος του παραθύρου.

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

Ενσωματώνει με Joomla. Αγαπημένη Αυτό είναι στην πραγματικότητα το ίδιο με το πρώτο που αναφέρονται παραπάνω, αλλά μέσα σε ένα συγκεκριμένο περιβάλλον. Το Web Developer Toolbar είναι ανεκτίμητη στο περιβάλλον Joomla. Δεν τη γραμμή εργαλείων, είμαι συνεχώς να υπεισέλθω σε Joomla, πλοήγηση στο Extensions / Template Manager, επιλέγοντας το κατάλληλο πρότυπο, κάνοντας αυτό που νομίζω ότι είναι απαραίτητες οι αλλαγές, η διάσωση, στη συνέχεια, επιστρέφοντας σε ένα παράθυρο προγράμματος περιήγησης και τον έλεγχο των αποτελεσμάτων. Μπά! Με την Developer Toolbar, εγώ απλά επιλέξτε 'επεξεργασία CSS "από το μενού CSS, κάνει τις απαραίτητες αλλαγές, και δείτε τα αποτελέσματα. Μπορώ να συνεχίσω μικροαλλαγές μέχρι το CSS είναι σωστό. Δεν θα πηγαινοέρχονται μεταξύ των παραθύρων και των εφαρμογών. Μόλις το CSS είναι ορθή, θα επισημάνω απλώς τις αλλαγές, αντιγράψτε τον κώδικα και επικολλήστε το πρότυπο CSS εσωτερικό Joomla. Είναι πιο γρήγορα. Είναι πιο εύκολο. Είναι πολύ απλό.

Αυτό είναι μόνο η κορυφή του παγόβουνου σε ό, τι αυτή γραμμή εργαλείων μπορεί να κάνει για την ανάπτυξη Ιστού. Είναι εύκολο στην εγκατάσταση και εύκολη στη χρήση. I highly recommended καθιστώντας το μέρος του περιβάλλον ανάπτυξης σας. Είναι διαθέσιμο στη διεύθυνση https: / / addons.mozilla.org/en-US/firefox/addon/60.