Firefox Developer Edition 6 πιο cool εργαλεία για να δοκιμάσετε

Η έκδοση προγραμματιστή του Firefox είναι σήμερα ο μόνος περιηγητής που γίνεται ειδικά για προγραμματιστές. Τα εργαλεία προγραμματιστών στην τυποποιημένη έκδοση εμφανίζονται πρώτα στην έκδοση του προγραμματιστή και υπάρχουν εργαλεία στην έκδοση προγραμματιστών που δεν είναι διαθέσιμα και δεν θα είναι διαθέσιμα στην τυποποιημένη έκδοση. Σήμερα θα ρίξουμε μια ματιά σε μερικά από τα εργαλεία που αυτή τη στιγμή μπορεί να βρεθεί μόνο στην έκδοση του προγραμματιστή.

Εάν είστε κάποιος που δεν έχει χρησιμοποιήσει ποτέ ή που δεν είναι πολύ εξοικειωμένος με τα εργαλεία προγραμματιστών, ακόμη και αυτά που περιλαμβάνονται στην κανονική έκδοση, ελέγξτε πρώτα αυτό το δροσερό "DevTools Challenger" από την Mozilla. Εδώ μπορείτε να εξασκηθείτε με κάποια από τα εργαλεία που αναφέρονται παρακάτω στον περιηγητή έκδοσης προγραμματιστή του Firefox. Τα παραδείγματα είναι διασκεδαστικά και εύκολα να τα ακολουθήσετε, οι οδηγίες είναι απλές και αν δεν μπορείτε να καλύψετε τη διαφορά, απλώς ακολουθήστε το εκπαιδευτικό βίντεο.

1. Εργαλείο ελέγχου επιθεμάτων

Τα CSS κινούμενα σχέδια γίνονται ολοένα και πιο συνηθισμένα και τα εργαλεία CSS animation που παρέχονται από την έκδοση προγραμματιστών του Firefox καθιστούν εύκολη την παρακολούθηση και επιθεώρηση κάθε βήμα της δημιουργίας του animation. Μπορείτε να κάνετε παύση, αναπαραγωγή και αντιστροφή κάθε κινούμενης εικόνας. μπορείτε επίσης να δείτε αυτό συμβαίνει πλαίσιο με το πλαίσιο μέσω τρίψιμο.

Για να αποκτήσετε πρόσβαση στο εργαλείο, ανοίξτε το Επιθεωρητής κάντε δεξί κλικ στο στοιχείο animation και επιλέξτε "inspect element", στη δεξιά πλευρά του παραθύρου εργαλείων dev, κάντε κλικ στο "Animations".

2. Επεξεργαστής λειτουργίας χρονισμού κινούμενης εικόνας

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

Εάν δεν είστε ήδη εξοικειωμένοι με την κυβική λειτουργία animation Bezier, σας συνιστώ να δημοσιεύσετε αυτό το μήνυμα.

3. Επιλογή χρωμάτων για ιδιότητες CSS

Υπάρχει ήδη ένας επιλογέας χρώματος διαθέσιμος στην έκδοση του Firefox (διαβάστε περισσότερα γι 'αυτό σε αυτή τη δημοσίευση), η οποία επιλέγει ένα χρώμα από τη σελίδα και τα αντιγράφει στο πρόχειρο. Ο επιλογέας χρωμάτων που αναφέρω τώρα είναι ωστόσο ειδικά για τις τιμές χρώματος CSS των ιδιοτήτων.

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

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

4. Εργαλείο μέτρησης

Αυτό το εργαλείο σάς επιτρέπει να δείτε τη θέση XY του δρομέα και το ύψος, το πλάτος και τη διαγώνια μέτρηση σε εικονοστοιχεία ενός επιλεγμένου τμήματος. Για να χρησιμοποιήσετε το εργαλείο, θα πρέπει πρώτα να το ενεργοποιήσετε στον προγραμματιστή Επιλογές εργαλειοθήκης, επιλέγοντας το πλαίσιο ελέγχου "Μετρήστε ένα τμήμα της σελίδας" στο "Διαθέσιμα κουμπιά εργαλείων".

Μόλις ενεργοποιηθεί, θα εμφανιστεί ένα εικονίδιο χάρακα στο επάνω μέρος του παραθύρου εργαλείου dev, κάντε κλικ σε αυτό το εικονίδιο και μετακινήστε το δρομέα πάνω στη σελίδα. Θα δείτε τις θέσεις XY κοντά στον κέρσορα. Για να μετρήσετε το πλάτος, το ύψος και τη διαγώνια κάντε κλικ και σύρετε για να επιλέξετε το τμήμα που θέλετε να μετρήσετε.

5. Επεξεργαστής φίλτρων CSS

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

Για να καταργήσετε ένα φίλτρο, κάντε κλικ στο σύμβολο × στο δεξί άκρο του ονόματος φίλτρου. Για να προσθέσετε ένα φίλτρο, κάντε κλικ στο πλαίσιο φίλτρου στο κάτω μέρος και επιλέξτε αυτό που θέλετε να προσθέσετε και κάντε κλικ στο + σημάδι. Μπορείτε επίσης να αναδιατάξετε τα φίλτρα σε οποιαδήποτε σειρά σύροντας κάθε στοιχείο.

6. Εργαλείο μνήμης

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

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

Για να χρησιμοποιήσετε το εργαλείο, κάντε κλικ στο "Λήψη στιγμιότυπου" ή στο κουμπί της κάμερας. Θα δείτε μια λίστα αντικειμένων, όπως αντικείμενα και σενάρια που αναλαμβάνουν μνήμη .