10 Χρήσιμα εργαλεία για προγραμματιστές του Firefox που πρέπει να γνωρίζετε

Ο Firefox, ο "browser του προγραμματιστή", διαθέτει πολλά εξαιρετικά εργαλεία για να διευκολύνει την εργασία μας. Μπορείτε να βρείτε περισσότερες πληροφορίες σχετικά με τη συλλογή εργαλείων της στην ιστοσελίδα του Εργαλείου για προγραμματιστές του Firefox και μπορείτε επίσης να δοκιμάσετε το πρόγραμμα περιήγησης του Developer Edition το οποίο διαθέτει περισσότερες λειτουργίες και εργαλεία που δοκιμάζονται.

Για αυτήν την ανάρτηση, έχω καταχωρηθεί 10 εύχρηστα εργαλεία ίσως να σας αρέσει η συλλογή εργαλείων προγραμματιστών. Έχω επίσης αποδείξει τι μπορούν να κάνουν αυτά τα εργαλεία με τα GIF καθώς και πώς να τα αποκτήσετε για γρήγορη αναφορά.

1. Προβολή οριζόντιων και κατακόρυφων χάρακων

Ο Firefox διαθέτει ένα εργαλείο χάρακας εμφανίζει τόσο τους οριζόντιους όσο και τους κατακόρυφους χάρακες με μονάδες pixel στη σελίδα. Το εργαλείο είναι χρήσιμο για την οργάνωση των στοιχείων σας σε όλη τη σελίδα.

Για να αποκτήσετε πρόσβαση στους κυβερνήτες μέσω του μενού, μεταβείτε στο: ☰> Προγραμματιστής > Γραμμή εργαλείων προγραμματιστή (συντόμευση: Shift + F2). Μόλις εμφανιστεί η γραμμή εργαλείων στο κάτω μέρος της σελίδας, πληκτρολογήστε κυβερνήτες και πατήστε Εισαγω.

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

2. Πάρτε στιγμιότυπα οθόνης χρησιμοποιώντας τους επιλογείς CSS

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

Για να τραβήξετε στιγμιότυπα από το μενού, μεταβείτε στο ☰> Προγραμματιστής > Γραμμή εργαλείων προγραμματιστή (συντόμευσηShift + F2). Μόλις εμφανιστεί η γραμμή εργαλείων στο κάτω μέρος της σελίδας, πληκτρολογήστε screenshot --selector any_unique_css_selector και πατήστε εισαγω.

Για να εμφανιστεί αυτό στο παράθυρο των εργαλείων προγραμματιστών: κάντε κλικ στην επιλογή "Επιλογές εργαλειοθήκης" και στην ενότητα "Διαθέσιμα κουμπιά εργαλείων", επιλέξτε "Πάρτε ένα fullpage screenshot " πλαίσιο ελέγχου.

3. Επιλέξτε χρώματα από ιστοσελίδες

Ο Firefox διαθέτει ενσωματωμένο εργαλείο επιλογής χρώματος με το όνομα "Πιπίλα". Για να αποκτήσετε πρόσβαση στο εργαλείο "Σταγονόμετρο" μέσω του μενού, μεταβείτε στο ☰> Προγραμματιστής > Σταγονόμετρο.

Για να εμφανιστεί αυτό στο παράθυρο των εργαλείων προγραμματιστών: κάντε κλικ στην επιλογή "Επιλογές εργαλειοθήκης" και στο τμήμα "Διαθέσιμα κουμπιά εργαλείων" επιλέξτε "Πιάσε ένα χρώμα από τη σελίδα"πλαίσιο ελέγχου.

4. Προβολή της διάταξης σελίδας σε 3D

Η προβολή ιστοσελίδων σε 3D βοηθάει σε προβλήματα σχεδίασης. Θα μπορείτε να δείτε τα διαφορετικά στοιχεία σε στρώσεις με μεγαλύτερη σαφήνεια σε προβολή 3D. Για να προβάλετε την ιστοσελίδα σε 3D, κάντε κλικ στο κουμπί "3D View".

Για να εμφανιστεί αυτό στο παράθυρο των εργαλείων προγραμματιστών, κάντε κλικ στην επιλογή "Επιλογές εργαλειοθήκης" και στην ενότητα "Διαθέσιμα κουμπιά εργαλείων" επιλέξτε "3D προβολή"πλαίσιο ελέγχου.

5. Προβολή στυλ προγράμματος περιήγησης

Οι μορφές του προγράμματος περιήγησης αποτελούνται από δύο τύπους: το προεπιλεγμένο στυλ που αντιστοιχεί σε ένα πρόγραμμα περιήγησης για κάθε στοιχείο και τα συγκεκριμένα στυλ του προγράμματος περιήγησης (αυτά με το πρόθεμα του προγράμματος περιήγησης). Λαμβάνοντας μια ματιά στα στυλ περιηγητών που θα είστε σε θέση να να διαγνώσετε τυχόν προβλήματα παράκαμψης στο φύλλο στυλ σας και επίσης έρχονται να μάθουν για κάθε υπάρχον στυλ του προγράμματος περιήγησης .

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

Μπορείτε επίσης να ανοίξετε το παράθυρο "Επιθεωρητής"καρτέλα μέσω της συντόμευσης Ctrl + Shift + C και στη συνέχεια πρόσβαση" Στυλ του προγράμματος περιήγησης ".

6. Απενεργοποιήστε τη JavaScript για την τρέχουσα περίοδο λειτουργίας

Για βέλτιστη πρακτική και συμβατότητα με το πρόγραμμα ανάγνωσης οθόνης, συνιστάται πάντα να κωδικοποιείτε οποιονδήποτε ιστότοπο με τέτοιο τρόπο ώστε η λειτουργικότητά του να μην παρεμποδίζεται σε περιβάλλον με αναπηρία javascript. Για να δοκιμάσετε τέτοια περιβάλλοντα, μπορείτε απενεργοποιήστε τη JavaScript για τη συνεδρία στην οποία εργάζεστε.

Για να απενεργοποιήσετε τη JavaScript για την τρέχουσα περίοδο σύνδεσης, κάντε κλικ στην επιλογή "Επιλογές εργαλειοθήκης" και στην ενότητα "Ρυθμίσεις για προχωρημένους" επιλέξτε "Απενεργοποιήστε το JavaScript* ".

7. Απόκρυψη στυλ CSS από τη σελίδα

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

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

Για να αποκτήσετε πρόσβαση στο "Editor στυλ" μέσω του μενού, μεταβείτε στο ☰> Προγραμματιστής > Επεξεργαστής στυλ (συντόμευση: Shift + F7.

8. Προεπισκόπηση της απάντησης περιεχομένου HTML σε ένα αίτημα

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

Για να αποκτήσετε πρόσβαση στο "Προεπισκόπηση" μέσω του μενού, μεταβείτε στο ☰> Προγραμματιστής > Δίκτυο (συντόμευση: Ctrl + Shift + Q. Στη συνέχεια ανοίξτε την ιστοσελίδα της επιλογής σας ή φορτώστε ξανά την τρέχουσα σελίδα, κάντε κλικ στο επιθυμητό αίτημα (με απόκριση HTML) από τη λίστα αιτημάτων και κάντε κλικ στο κουμπί "Προεπισκόπηση"στο δεξιό τμήμα.

9. Προεπισκόπηση ιστοσελίδας σε διαφορετικά μεγέθη οθόνης

Για να δοκιμάσετε μια ιστοσελίδα για την ανταπόκρισή της, χρησιμοποιήστε την "Ανταπόκριτη προβολή σχεδίασης", στην οποία μπορείτε να έχετε πρόσβαση από το ☰> Προγραμματιστής > Ανταπόκριτη προβολή σχεδίασης ή με τη συντόμευση: Ctrl + Shift + M.

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

10. Εκτελέστε JavaScript στις σελίδες

Για γρήγορες εκτελέσεις JavaScript σε οποιαδήποτε ιστοσελίδα, απλά χρησιμοποιήστε το εργαλείο "Scratchpad" του Firefox. Για να αποκτήσετε πρόσβαση στο "Scratchpad" από το μενού πηγαίνετε στο. ☰> Προγραμματιστής > Scratchpad ή χρησιμοποιήστε τη συντόμευση πληκτρολογίου Shift + F4.

Για να εμφανιστεί το κουμπί εργαλείου "Scratchpad" στο παράθυρο των εργαλείων ανάπτυξης για γρήγορη χρήση: κάντε κλικ στο κουμπί "Επιλογές εργαλειοθήκης"και κάτω από το"Διαθέσιμα κουμπιά εργαλείων"τμήμα ελέγξτε το" Scratchpad " πλαίσιο ελέγχου.