Εάν έχετε θελήσει ποτέ να μάθετε πώς είναι δομημένες οι αγαπημένες σας ιστοσελίδες, οι υπηρεσίες "Επιθεώρηση" του προγράμματος περιήγησης μπορεί να είναι μια κρυμμένη ευλογία. Έχουμε καλύψει το εργαλείο "Επιθεώρηση" του Chrome και ο Firefox έρχεται με παρόμοια προσφορά.

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

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

Εγκατάσταση

Εάν χρησιμοποιείτε τον Firefox, δεν χρειάζεται να κάνετε τίποτα περισσότερο. Αν θέλετε να αρχίσετε να χρησιμοποιείτε τον Firefox και είστε σε Windows, Linux, Mac, iOS ή Android, ακολουθήστε αυτόν τον σύνδεσμο για να βρείτε την τελευταία έκδοση του προγράμματος περιήγησης. Εγκαταστήστε τα ληφθέντα αρχεία εγκατάστασης όπως θα κάνατε κανονικά κάνοντας διπλό κλικ σε αυτά ή πατώντας εάν βρίσκεστε σε ένα smartphone.

Οι μεγάλες διανομές του Linux πιθανώς έρχονται με το προ-εγκατεστημένο πρόγραμμα Firefox ή έχουν αντίγραφα του Firefox στα αποθετήρια του λογισμικού / του πακέτου τους, τα οποία ο χρήστης μπορεί εύκολα να εγκαταστήσει.

Άνοιγμα "Έλεγχος στοιχείου"

Μετά την εγκατάσταση του Firefox, μπορείτε να βρείτε τον επιθεωρητή του κάνοντας δεξί κλικ σε οποιοδήποτε στοιχείο της ιστοσελίδας. Αυτό θα σας δείξει ένα αναπτυσσόμενο μενού, όπως αυτό που απεικονίζεται παρακάτω, όπου το "Inspect Element" βρίσκεται κοντά στο κάτω μέρος της λίστας.

Επιθεωρητής

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

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

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

Αν κάνετε κύλιση σε αυτόν τον πίνακα δεξιά, μπορείτε να δείτε τις ιδιότητες που κληρονόμησε από άλλα στοιχεία. Μπορείτε ακόμη να αλλάξετε τις ιδιότητες σε αυτό το παράθυρο και να τις δείτε να εμφανίζονται στην ιστοσελίδα σε πραγματικό χρόνο.

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

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

Εδώ μπορείτε να δείτε τα δύο αρχεία φύλλων στυλ που χρησιμοποιεί το DuckDuckGo, τα στοιχεία του πρώτου επιλεγμένου φύλλου στυλ και τους διάφορους κανόνες "@media" του φύλλου, οι οποίοι διέπουν το σχέδιο για μικρότερες και μεγαλύτερες οθόνες.

Μπορείτε να επεξεργαστείτε αυτά τα φύλλα στυλ όπως μπορείτε στην ενότητα "Επιθεωρητής". Σε αυτή την περίπτωση υπάρχουν πολλοί κανόνες που μπορείτε να επιλέξετε - 1262 κανόνες στο πρώτο φύλλο στυλ μόνο.

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

Εκτέλεση

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

Για αυτόν τον ιστότοπο μπορείτε να δείτε το επισημασμένο συμβάν DOM, ένα ποντίκι, που διαρκεί 6, 03 χιλιοστά του δευτερολέπτου για φόρτωση. Ο μέσος όρος του FPS για αυτήν τη σελίδα ήταν περίπου 39. Και το γράφημα που δείχνει το φάσμα των χρόνων απόκρισης μου έφτασε τα 9000 χιλιοστά του δευτερολέπτου για μερικά γεγονότα.

Μνήμη

Στην καρτέλα "Μνήμη" θα χρειαστεί επίσης να κάνετε κλικ σε ένα κουμπί - "Take Snapshot" - για να συγκεντρώσετε πληροφορίες. Για μένα, δημιούργησε ένα χάρτη γεγονότων που δείχνει περίπου 600 Kb χορδών, 1 Mb αντικειμένων και 1 Mb σεναρίων που βρήκαν τους τρόπους τους στη μνήμη. Μπορείτε να δείτε τα ίδια στοιχεία σε ζευγάρι με διαφορετικούς τρόπους, κάνοντας κλικ στο αναπτυσσόμενο μενού όπου λέει το "Tree Map", όπως μπορείτε να δείτε σε αυτό το screenshot.

Αποθήκευση

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

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

συμπέρασμα

Υπάρχουν πολλά που πρέπει να περάσετε όταν χρησιμοποιείτε τον επιθεωρητή Firefox. Αυτή η εισαγωγή στα πολλαπλά μέρη της θα σας κρατήσει απασχολημένη για λίγο.

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

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

Πιστοποίηση εικόνας: Αρχική σελίδα του Firefox Quantum από DepositPhotos