Η προβολή του πηγαίου κώδικα μπορεί να βοηθήσει πολλούς developers τόσο στην αποσφαλμάτωση της σελίδας τους, όσο και στην εικονική επεξεργασία της σελίδας για δοκιμαστικούς σκοπούς. Για να προβάλετε τον κώδικα που κρύβεται πίσω από τις εικόνες, τα βίντεο, τις γραμματοσειρές και τα λοιπά στοιχεία (elements), κάντε δεξί κλικ στο επιθυμητό στοιχείο (ή σε οποιοδήποτε σημείο της σελίδας) και πατήστε Inspect Element. Σε κάποιους browsers εμφανίζεται ως Inspect (έλεγχος). Εναλλακτικά πατήστε το F12.
Στη συνέχεια θα ανοίξει ένα νέο πλαίσιο (συνήθως στο κάτω μέρος της οθόνης) μέσω του οποίου μπορείτε να δείτε πολλές χρήσιμες πληροφορίες για την ιστοσελίδα σας, να διαγνώσετε τυχόν προβλήματα και να κατανοήσετε τελικά την html μορφή του ιστοτόπου σας, όπως ακριβώς την αντιλαμβάνονται τα προγράμματα περιήγησης και οι μηχανές αναζήτησης.
Μία από τις δυνατότητες που παρέχει η γραμμή εργαλείων του Inspect Element, είναι ο έλεγχος των resources (πόρων) και των ιδιοτήτων τους (HTTP headers, περιεχόμενο, μέγεθος κ.ο.κ.), με κύριο σκοπό τη βελτιστοποίηση της απόδοσης μιας σελίδας.
Από προεπιλογή, στην καρτέλα Network εμφανίζεται μια λίστα με όλα τα αιτήματα δικτύου (requests) που έγιναν κατά τη φόρτωση της σελίδας. Κάθε αίτημα αναγράφεται σε μεμονωμένη σειρά.
Μία από τις δυνατότητες που παρέχει η γραμμή εργαλείων του Inspect Element, είναι ο έλεγχος των resources (πόρων) και των ιδιοτήτων τους (HTTP headers, περιεχόμενο, μέγεθος κ.ο.κ.), με κύριο σκοπό τη βελτιστοποίηση της απόδοσης μιας σελίδας.
Από προεπιλογή, στην καρτέλα Network εμφανίζεται μια λίστα με όλα τα αιτήματα δικτύου (requests) που έγιναν κατά τη φόρτωση της σελίδας. Κάθε αίτημα αναγράφεται σε μεμονωμένη σειρά.
Από τις εγγραφές του πίνακα αυτού, μπορούμε να εξάγουμε πολλά συμπεράσματα αναφορικά με την συνολική απόδοση της σελίδας. Κάποια από αυτά είναι τα ακόλουθα:
1. Χρόνος φόρτωσης σελίδας
1. Χρόνος φόρτωσης σελίδας
- Ο συνολικός χρόνος φόρτωσης της σελίδας εμφανίζεται στο footer του παραθύρου.
- Για πιο αναλυτικό καταμερισμό του χρόνου απόκρισης προκειμένου να δείτε πού ακριβώς εντοπίζεται η καθυστέρηση στον εκάστοτε πόρο, μπορείτε πατώντας επάνω στην γραμμή αναφοράς το καθενός, να ανατρέξετε στην καρτέλα Timings. Η λογική είναι ότι βλέπετε ποιοι πόροι αργούν να κατέβουν από την βασική καταγραφή της καρτέλας Network και κλικάροντας επάνω στον καθένα μπορείτε να δείτε σε ποια φάση αργεί. Για παράδειγμα αν διαπιστώσετε πρόβλημα στο DNS Resolution, σημαίνει ότι η σελίδα δεν έχει κάποιο πρόβλημα σε επίπεδο κώδικα και η καθυστέρηση είναι λόγω DNS, οπότε στρέφεστε προς αυτήν την κατεύθυνση για να βελτιώσετε την ταχύτητα του ιστοτόπου.
2. Μέγεθος σελίδας
- Στο footer του Network εμφανίζεται μεταξύ άλλων, το συνολικό μέγεθος των στοιχείων που φορτώθηκαν. Ο πρώτος αριθμός αντιστοιχεί στο μέγεθος των πόρων της σελίδας και ο δεύτερος υποδεικνύει τα kilobytes που μεταφέρθηκαν στην πραγματικότητα.
- Η στήλη Size περιέχει το μέγεθος του κάθε στοιχείου. Από εκεί μπορούμε να εντοπίσουμε ποιο στοιχείο καταλαμβάνει περισσότερο χώρο για περαιτέρω εξέταση αναφορικά με την ταχύτητα φόρτωσης της σελίδας.
3. Έλεγχος για broken links
Εάν μπροστά από κάποιο file εμφανιστεί ο συνδετήρας με τη διαγώνια γραμμή και στο status ο αριθμός 404, σημαίνει πως το αρχείο δεν μπορεί να βρεθεί στην τοποθεσία από την οποία καλείται. Στην περίπτωση αυτή θα πρέπει να ελέγξετε τις πηγές των resources και να κάνετε τις ανάλογες αντικαταστάσεις.
4. Έλεγχος για μη ασφαλείς συνδέσεις.
Για να δείτε με ποιους τρόπους μπορείτε να εντοπίσετε τις μη ασφαλείς συνδέσεις στη σελίδα σας, μπορείτε να ανατρέξετε στο άρθρο:
Για να δείτε με ποιους τρόπους μπορείτε να εντοπίσετε τις μη ασφαλείς συνδέσεις στη σελίδα σας, μπορείτε να ανατρέξετε στο άρθρο:
Η ιστοσελίδα μου εμφανίζεται ως μη ασφαλής στον browser
