Περιήγηση στον ιστό, τείνουμε να μην σκεφτόμαστε πολλά για το τι συμβαίνει πίσω από τις σκηνές. Το κείμενο, οι εικόνες και το βίντεο εμφανίζονται απλά, ή δεν το κάνουν. Ωστόσο, εκτελείται ένα τεράστιο ποσό κώδικα στο πρόγραμμα περιήγησης ή στο διακομιστή ιστού κάθε φορά που επισκέπτεστε μια σελίδα. Έτσι, μερικές φορές, είναι χρήσιμο να βλέπετε αυτόν τον κώδικα. Για παράδειγμα, εάν μια σελίδα δεν φορτώνεται σωστά ή θέλετε να μάθετε πώς έχει ενσωματωθεί μια συσκευή αναπαραγωγής βίντεο.
Σε αυτό το άρθρο, θα σας δείξουμε πώς να επιθεωρήσετε το στοιχείο στο Safari, το Chrome και τον Firefox.
Τι είναι το στοιχείο Επιθεώρησης;
Το Enspect Element είναι ένα προηγμένο χαρακτηριστικό στα περισσότερα προγράμματα περιήγησης ιστού που σας επιτρέπει να ανοίξετε ένα παράθυρο που εμφανίζει το HTML, το CSS, το JavaScript και άλλες κωδικοποιήσεις που συνδυάζονται για την κατασκευή της ιστοσελίδας. Σε ορισμένα προγράμματα περιήγησης ιστού, πρέπει να το ενεργοποιήσετε στις ρυθμίσεις, αλλά στα περισσότερα, είναι ήδη στο μενού. Σκοπεύει κυρίως στους προγραμματιστές να τους επιτρέψουν να εντοπίσουν σφάλματα ιστότοπων, αλλά μπορεί επίσης να είναι χρήσιμο σε άλλες καταστάσεις.
Γιατί να επιθεωρήσετε το στοιχείο σε ένα πρόγραμμα περιήγησης στο Web;
Εκτός από το σφάλμα μιας σελίδας, το στοιχείο Inspect είναι ένα εξαιρετικό εργαλείο για τον έλεγχο εάν ο κώδικας όπως το Google Analytics, που προστίθεται σε ένα σύστημα διαχείρισης περιεχομένου όπως το WordPress, έχει αναπτυχθεί σωστά. Μπορεί επίσης να είναι χρήσιμο για την επεξεργασία γιατί ένα βίντεο δεν παίζει ή το αρχείο δεν θα ξεκινήσει τη λήψη.
Εάν είστε προγραμματιστής πρόθυμος να μάθετε πώς ένας ιστότοπος πέτυχε ένα συγκεκριμένο αποτέλεσμα, χρησιμοποιήστε το στοιχείο επιθεώρησης. Μπορείτε ακόμη να επεξεργαστείτε τον κώδικα σε ένα πρόγραμμα περιήγησης για να δοκιμάσετε πώς φαίνεται όταν κάνετε αλλαγές. Η ιστοσελίδα στο κύριο παράθυρο του προγράμματος περιήγησης θα ενημερωθεί αμέσως για να παρουσιάσει όλες τις αλλαγές.
Πώς να επιθεωρήσετε το στοιχείο σε ένα πρόγραμμα περιήγησης ιστού
Ο τρόπος με τον οποίο επιθεωρείτε τα στοιχεία εξαρτάται από το πρόγραμμα περιήγησης που χρησιμοποιείτε. Θα σας δείξουμε πώς να το κάνετε σε σαφάρι, Firefox και Chrome.
ΣΥΓΓΕΝΕΥΩΝ:4 τρόποι μεταφοράς δεδομένων από Mac σε Mac
Πώς να επιθεωρήσετε το στοιχείο στο Safari
Το πρώτο πράγμα που πρέπει να κάνετε για να επιθεωρήσετε τα στοιχεία σαφάρι είναι να ενεργοποιήσετε το μενού ανάπτυξης. Εδώ είναι πώς να το κάνετε αυτό.
- Ξεκινήστε το Safari.
- Κάντε κλικ στο μενού Safari και, στη συνέχεια, επιλέξτε Ρυθμίσεις.
- Επιλέξτε την καρτέλα Advanced.
- Επιλέξτε το πλαίσιο με την ένδειξη "Εμφάνιση μενού Ανάπτυξης στη γραμμή μενού".
- Κλείστε τις ρυθμίσεις.
Αφού ενεργοποιήσετε το μενού ανάπτυξης, κάντε κλικ σε αυτό και επιλέξτε Εμφάνιση πηγής σελίδας ή πατήστε Command-Option-U. Θα δείτε ένα παράθυρο ανοιχτό στο κάτω μέρος του προγράμματος περιήγησης με πολλές καρτέλες στην κορυφή. Υπάρχουν πολλά πράγματα που μπορείτε να κάνετε εδώ.
- Κάντε κλικ στην επιλογή Πηγές για να δείτε μια λίστα με όλα τα διαφορετικά μέρη της σελίδας. Στην πλαϊνή μπάρα, θα δείτε μια λίστα φακέλων όπως πλαίσια, εικόνες και σενάρια. Κάντε κλικ στο φάκελο εικόνων για να δείτε μια γκαλερί των εικόνων στη σελίδα. Κάντε κλικ στο αναπτυσσόμενο μενού δίπλα σε οποιοδήποτε φάκελο για να δείτε τα στοιχεία σε αυτόν τον φάκελο. Κάντε κλικ σε ένα από αυτά και μια προεπισκόπηση θα εμφανιστεί στο κύριο παράθυρο.
- Επιλέξτε την καρτέλα Στοιχεία για να δείτε μια ένθετη προβολή του κώδικα που αποτελεί την ιστοσελίδα. Εάν επεκτείνετε οποιαδήποτε ενότητα, ο κώδικας σε αυτό το τμήμα θα είναι ορατό. Εάν επιλέξετε αυτό, θα σας δείξει το πέρασμα της σελίδας που σχετίζεται με.
- Ανοίξτε τον επιθεωρητή στοιχείων σε ένα νέο παράθυρο κάνοντας κλικ στα αλληλεπικαλυπτόμενα ορθογώνια στη γραμμή εργαλείων.
- Στην καρτέλα Στοιχεία, κάντε κλικ στο εικονίδιο των ηγεμόνων για να δείτε την ακριβή τοποθέτηση κάθε στοιχείου.
Πώς να επιθεωρήσετε και να αλλάξετε συγκεκριμένο στοιχείο ιστοσελίδας στο Safari
Η παραπάνω μέθοδος σας δίνει μια καλή επισκόπηση μιας ιστοσελίδας στο Safari. Αλλά τι γίνεται αν θέλετε να βρείτε ένα συγκεκριμένο στοιχείο σε μια σελίδα και να το αλλάξετε για να δοκιμάσετε κάτι; Εδώ είναι:
- Μεταβείτε στο στοιχείο που επιθυμείτε να επιθεωρήσετε σε μια ιστοσελίδα, για παράδειγμα, μια σειρά κειμένου.
- Επιλέξτε το κείμενο και κάντε κλικ στο κλικ σε αυτό. Στη συνέχεια, επιλέξτε Επιθεωρήστε το στοιχείο από το μενού συμφραζομένων.
- Το παράθυρο θα ανοίξει στο κάτω μέρος της ιστοσελίδας και θα δείτε τον κωδικό που ελέγχει αυτό το στοιχείο.
- Μπορείτε να αλλάξετε το κείμενο στο πρόγραμμα περιήγησής σας κάνοντας διπλό κλικ σε αυτό στον επιθεωρητή και πληκτρολογώντας νέο κείμενο. Ή, αν είναι μια εικόνα, μπορείτε να αντικαταστήσετε τη διεύθυνση URL με τη διεύθυνση URL μιας διαφορετικής εικόνας.
Πώς να χρησιμοποιήσετε το στοιχείο Επιθεώρησης στο Google Chrome
- Εκκίνηση Chrome. Κάντε κλικ στο μενού Προβολής, μετακινήστε τον δείκτη στον προγραμματιστή στο κάτω μέρος και επιλέξτε Επιθεωρήστε τα στοιχεία-ή πατήστε την εντολή-option-c.
- Ένα παράθυρο θα ανοίξει στα δεξιά του παραθύρου του προγράμματος περιήγησης, εμφανίζοντας τα στοιχεία στην ιστοσελίδα.
- Θα παρατηρήσετε ότι οι καρτέλες κατά μήκος της κορυφής του επιθεωρητή είναι παρόμοιες με εκείνες του σαφάρι: στοιχεία, κονσόλα και πηγές.
- Στην καρτέλα Στοιχεία, τοποθετήστε το δείκτη του τόπου σε οποιαδήποτε ενότητα για να επισημάνετε το τμήμα της ιστοσελίδας που ελέγχει.
- Η καρτέλα Πηγές ομαδοποιεί όλους τους διαφορετικούς τύπους στοιχείων μαζί σε φακέλους, όπως συμβαίνει και με το σαφάρι.
Πώς να επιθεωρήσετε και να αλλάξετε ένα συγκεκριμένο στοιχείο ιστοσελίδας στο Chrome
Η διαδικασία για την αναθεώρηση και την πραγματοποίηση αλλαγών σε συγκεκριμένα στοιχεία σε μια ιστοσελίδα είναι η ίδια στο Chrome όπως στο Safari.
- Εντοπίστε το στοιχείο στην ιστοσελίδα. Στη συνέχεια, κάντε κλικ σε αυτό.
- Επιλέξτε Επιθεώρηση από το μενού. Στην πλαϊνή μπάρα στα δεξιά, θα δείτε την ενότητα του κώδικα σχετικά με το στοιχείο που έχετε επιλέξει.
- Κάντε κλικ στο βέλος για να αποκαλύψετε ολόκληρη την ενότητα.
- Όταν βρείτε τη γραμμή κειμένου που θέλετε να αλλάξετε, επιλέξτε το, διαγράψτε το κείμενο και πληκτρολογήστε το νέο κείμενο. Εάν είναι μια εικόνα που θέλετε να αλλάξετε, να πληκτρολογήσετε ή να επικολλήσετε τη διεύθυνση URL της νέας εικόνας.
Πώς να χρησιμοποιήσετε το στοιχείο επιθεώρησης στον Firefox
- Ξεκινήστε τον Firefox. Κάντε κλικ στο μενού εργαλείων.
- Τοποθετήστε τον δείκτη ποντικιού πάνω από τα εργαλεία του προγράμματος περιήγησης και επιλέξτε εργαλεία προγραμματιστή ιστού.
- Θα δείτε ένα παράθυρο ανοιχτό στο κάτω μέρος της οθόνης, παρόμοιο με αυτό που ανοίγει στο σαφάρι.
- Σε αυτή την περίπτωση, δεν υπάρχουν ξεχωριστά στοιχεία ή καρτέλες προέλευσης. Για να επιθεωρήσετε τον κώδικα, επιλέξτε την καρτέλα Επιθεωρητής.
- Θα παρατηρήσετε ότι όταν αιωρούνται πάνω από τα τμήματα του κώδικα στην καρτέλα Επιθεωρητής, επισημαίνονται τα τμήματα της παραπάνω σελίδας.
Πώς να επιθεωρήσετε ένα συγκεκριμένο στοιχείο ιστοσελίδας και να το αλλάξετε στον Firefox
Όλα τα παραπάνω έργα στον Firefox, όπως στο Safari και το Chrome.
- Κάντε κλικ στο στοιχείο που θέλετε να επιθεωρήσετε ή να αλλάξετε στην ιστοσελίδα.
- Επιλέξτε Επιθεώρηση από το μενού.
- Κάντε κλικ στο αναπτυσσόμενο βέλος για να αποκαλύψετε τον κώδικα.
- Επιλέξτε κείμενο, διαγράψτε το και πληκτρολογήστε νέο κείμενο (ή επιλέξτε μια διεύθυνση URL εικόνας και αντικαταστήστε το με τη διεύθυνση URL για άλλη εικόνα.)
Μόλις μάθετε πώς να επιθεωρήσετε ένα στοιχείο στο Mac, μπορείτε να αναλύσετε τον πηγαίο κώδικα σε έναν ιστότοπο ή ακόμα και να κάνετε αλλαγές και αποτελέσματα δοκιμών. Η διαδικασία είναι πολύ παρόμοια για τα περισσότερα προγράμματα περιήγησης. Υπάρχει συνήθως ένα μενού εργαλείων προγραμματιστή ή μια εντολή προβολής προβολής σε ένα μενού προβολής. Στο Safari, είναι μόνο ορατό όταν ενεργοποιείτε το μενού προγραμματιστή στις ρυθμίσεις, αλλά στα περισσότερα προγράμματα περιήγησης, είναι στη γραμμή μενού. Ακολουθήστε τα παραπάνω βήματα για να επιθεωρήσετε τα στοιχεία σε σαφάρι, χρώμιο ή Firefox.