Τρόπος προβολής του πηγαίου κώδικα μιας ιστοσελίδας σε κάθε πρόγραμμα περιήγησης

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

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

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

Γιατί θα θέλατε να δείτε τον πηγαίο κώδικα;

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

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

Παρακάτω παρατίθενται οδηγίες σχετικά με τον τρόπο προβολής του πηγαίου κώδικα στο πρόγραμμα περιήγησης που προτιμάτε.

Google Chrome

Εκτέλεση: Chrome OS, Linux, macOS, Windows

Η έκδοση desktop του Chrome προσφέρει τρεις διαφορετικές μεθόδους για την προβολή του πηγαίου κώδικα μιας σελίδας, η πρώτη και η πιο απλή, χρησιμοποιώντας την ακόλουθη συντόμευση πληκτρολογίου: CTRL + U ( COMMAND + OPTION + U σε macOS).

Όταν πατηθεί, αυτή η συντόμευση ανοίγει μια νέα καρτέλα προγράμματος περιήγησης που εμφανίζει HTML και άλλο κώδικα για την ενεργή σελίδα. Αυτή η πηγή έχει χρωματική κωδικοποίηση και δομή με τέτοιο τρόπο ώστε να είναι πιο εύκολο να διαχωριστεί και να βρει αυτό που ψάχνετε. Μπορείτε επίσης να φτάσετε εκεί εισάγοντας το ακόλουθο κείμενο στη γραμμή διευθύνσεων του Chrome, προσαρτημένο στην αριστερή πλευρά της διεύθυνσης URL της ιστοσελίδας και πατώντας το πλήκτρο Enter : source-view: (πχ. Πηγή προβολής: https: // www .).

Η τρίτη μέθοδος είναι μέσω των εργαλείων προγραμματιστή του Chrome, τα οποία σας επιτρέπουν να εμβαθύνετε στον κώδικα της σελίδας, καθώς και να το προσαρμόσετε σε δοκιμαστικούς και αναπτυξιακούς σκοπούς. Η διεπαφή εργαλείων προγραμματιστών μπορεί να ανοίξει και να κλείσει χρησιμοποιώντας αυτή τη συντόμευση πληκτρολογίου: CTRL + SHIFT + I ( COMMAND + OPTION + I στο macOS). Μπορείτε επίσης να τα ξεκινήσετε ακολουθώντας την παρακάτω διαδρομή.

1. Κάντε κλικ στο κουμπί κύριου μενού του Chrome, που βρίσκεται στην επάνω δεξιά γωνία και αντιπροσωπεύεται από τρεις κάθετα ευθυγραμμισμένες κουκίδες.
2. Όταν εμφανιστεί το αναπτυσσόμενο μενού, τοποθετήστε το δείκτη του ποντικιού πάνω από την επιλογή Περισσότερα εργαλεία .
3. Όταν εμφανιστεί το υπομενού, κάντε κλικ στα εργαλεία προγραμματιστή .

Android
Η προβολή της πηγής μιας ιστοσελίδας στο Chrome για Android είναι τόσο απλή όσο και η προσάρτηση του παρακάτω κειμένου στο μπροστινό μέρος της διεύθυνσης (ή της διεύθυνσης URL) και την υποβολή: προβολή-πηγή:. Ένα παράδειγμα αυτού θα είναι η προβολή-πηγή: https: // www. . Το HTML και άλλος κώδικας από την εν λόγω σελίδα θα εμφανιστεί αμέσως στο ενεργό παράθυρο.

iOS
Παρόλο που δεν υπάρχουν μη διαθέσιμες μέθοδοι για την προβολή του πηγαίου κώδικα χρησιμοποιώντας το Chrome στο iPad, το iPhone ή το iPod touch, η πιο απλή και αποτελεσματική είναι να χρησιμοποιήσετε μια λύση τρίτου μέρους όπως η εφαρμογή Προβολή προέλευσης.

Διατίθεται για $ 0,99 στο App Store, η προβολή προέλευσης σας ζητά να εισάγετε τη διεύθυνση URL της σελίδας (ή να την αντιγράψετε / επικολλήσετε από τη γραμμή διευθύνσεων του Chrome, η οποία είναι μερικές φορές η απλούστερη διαδρομή) και αυτό είναι. Εκτός από την εμφάνιση κώδικα HTML και άλλου πηγαίου κώδικα, η εφαρμογή διαθέτει επίσης καρτέλες που εμφανίζουν στοιχεία για κάθε σελίδα, το μοντέλο αντικειμένου εγγράφου (DOM), καθώς και μέγεθος σελίδας, cookies και άλλα ενδιαφέροντα στοιχεία.

Microsoft Edge

Λειτουργία: Windows

Το πρόγραμμα περιήγησης Edge σάς επιτρέπει να προβάλλετε, να αναλύετε και ακόμη και να χειρίζεστε τον πηγαίο κώδικα της τρέχουσας σελίδας μέσω της διεπαφής Tools Developer . Για να έχετε πρόσβαση σε αυτό το εύχρηστο εργαλείο, μπορείτε να χρησιμοποιήσετε μία από αυτές τις συντομεύσεις πληκτρολογίου: F12 ή CTRL + U. Αν προτιμάτε το ποντίκι, κάντε κλικ στο κουμπί μενού Edge (τρεις τελείες βρίσκεται στην επάνω δεξιά γωνία) και επιλέξτε την επιλογή F12 Developer Tools από τη λίστα.

Αφού εκτελεστούν τα εργαλεία dev για πρώτη φορά, το Edge προσθέτει δύο πρόσθετες επιλογές στο μενού περιβάλλοντος του προγράμματος περιήγησης (προσβάσιμο κάνοντας δεξί κλικ οπουδήποτε μέσα σε μια ιστοσελίδα): Ελέγξτε το στοιχείο και το View source , το τελευταίο που ανοίγει το τμήμα Debugger του dev διασύνδεση εργαλείων που περιέχει τον πηγαίο κώδικα.

Mozilla Firefox

Εκτέλεση: Linux, macOS, Windows

Για να δείτε τον πηγαίο κώδικα μιας σελίδας στην έκδοση Desktop του Firefox, μπορείτε να πατήσετε CTRL + U ( COMMAND + U σε macOS) στο πληκτρολόγιό σας, το οποίο θα ανοίξει μια νέα καρτέλα που περιέχει HTML και άλλο κώδικα για την ενεργή ιστοσελίδα.

Η πληκτρολόγηση του παρακάτω κειμένου στη γραμμή διευθύνσεων του Firefox, απευθείας στα αριστερά της διεύθυνσης URL της σελίδας, θα προκαλέσει την εμφάνιση της ίδιας πηγής στην τρέχουσα καρτέλα αντί: source-view: (πχ: view-source: https: // www) .

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

1. Κάντε κλικ στο κουμπί κύριου μενού που βρίσκεται στην επάνω δεξιά γωνία του παραθύρου του προγράμματος περιήγησης και αντιπροσωπεύεται από τρεις οριζόντιες γραμμές.
2. Όταν εμφανιστεί το αναδυόμενο μενού, κάντε κλικ στο εικονίδιο "κλειδί" του προγραμματιστή .
3. Το μενού περιβάλλοντος προγραμματιστή Web θα πρέπει να είναι πλέον ορατό. Επιλέξτε την επιλογή Πηγή σελίδας .

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

Android
Η προβολή του πηγαίου κώδικα στην έκδοση Android του Firefox είναι εφικτή μέσω του προθέματος της διεύθυνσης URL της ιστοσελίδας με το ακόλουθο κείμενο: view-source:. Για παράδειγμα, για να προβάλετε την προέλευση HTML, θα πρέπει να υποβάλετε το ακόλουθο κείμενο στη γραμμή διευθύνσεων του προγράμματος περιήγησης: προβολή-πηγή: https: // www. .

iOS
Η συνιστώμενη μέθοδος για την προβολή του πηγαίου κώδικα ιστοσελίδας στο iPad, το iPhone ή το iPod touch γίνεται μέσω της εφαρμογής Προβολή προέλευσης, η οποία διατίθεται στο App Store για $ 0.99. Αν και δεν ενσωματώνονται απευθείας στον Firefox, μπορείτε εύκολα να αντιγράψετε και να επικολλήσετε μια διεύθυνση URL από το πρόγραμμα περιήγησης στην εφαρμογή, προκειμένου να αποκαλύψετε τον κώδικα HTML και άλλο κώδικα που σχετίζεται με τη συγκεκριμένη σελίδα.

Apple Safari

Εκτέλεση σε iOS και macOS

iOS
Παρόλο που το Safari για iOS δεν περιλαμβάνει την δυνατότητα προβολής προέλευσης σελίδων από προεπιλογή, το πρόγραμμα περιήγησης ενσωματώνεται μάλλον απρόσκοπτα με την εφαρμογή Προβολή προέλευσης - διαθέσιμη στο App Store για $ 0,99.

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

Θα πρέπει τώρα να εμφανίζεται μια έγχρωμη, δομημένη αναπαράσταση του πηγαίου κώδικα της ενεργής σελίδας, μαζί με άλλες καρτέλες που σας επιτρέπουν να προβάλλετε τα στοιχεία της σελίδας, τα σενάρια και άλλα.

macOS
Για να προβάλετε τον πηγαίο κώδικα μιας σελίδας στην έκδοση desktop του Safari, πρέπει πρώτα να ενεργοποιήσετε το μενού Ανάπτυξη . Τα παρακάτω βήματα σας καθοδηγούν στην ενεργοποίηση αυτού του κρυμμένου μενού και στην προβολή της πηγής HTML μιας σελίδας.

1. Κάντε κλικ στο Safari στο μενού του προγράμματος περιήγησης που βρίσκεται στο επάνω μέρος της οθόνης.
2. Όταν εμφανιστεί το αναπτυσσόμενο μενού, επιλέξτε την επιλογή Προτιμήσεις .
3. Οι προτιμήσεις του Safari πρέπει τώρα να είναι ορατές. Κάντε κλικ στο εικονίδιο για προχωρημένους , που βρίσκεται στην άκρα δεξιά πλευρά της κορυφαίας σειράς.
4. Προς το κάτω μέρος της ενότητας "Προχωρημένους" υπάρχει μια επιλογή με την ένδειξη Εμφάνιση μενού "Ανάπτυξη" στη γραμμή μενού , συνοδευόμενη από ένα κενό πλαίσιο ελέγχου. Κάντε κλικ σε αυτό το πλαίσιο μια φορά για να τοποθετήσετε ένα σημάδι επιλογής και κλείστε το παράθυρο "Προτιμήσεις" κάνοντας κλικ στο κόκκινο "x" που βρίσκεται στην επάνω αριστερή γωνία.
5. Κάντε κλικ στο αναπτυσσόμενο μενού που βρίσκεται στο επάνω μέρος της οθόνης.
6. Όταν εμφανιστεί το αναπτυσσόμενο μενού, επιλέξτε Εμφάνιση προέλευσης σελίδας . Μπορείτε επίσης να χρησιμοποιήσετε την ακόλουθη συντόμευση πληκτρολογίου: COMMAND + OPTION + U.

ΛΥΡΙΚΗ ΣΚΗΝΗ

Εκτέλεση: Linux, macOS, Windows

Για να προβάλετε τον πηγαίο κώδικα από την ενεργή ιστοσελίδα στο πρόγραμμα περιήγησης Opera, χρησιμοποιήστε την ακόλουθη συντόμευση πληκτρολογίου: CTRL + U ( COMMAND + OPTION + U στο macOS). Εάν προτιμάτε να φορτώσετε την πηγή στην τρέχουσα καρτέλα, πληκτρολογήστε το ακόλουθο κείμενο στα αριστερά της διεύθυνσης URL της σελίδας μέσα στη γραμμή διευθύνσεων και πατήστε Enter : source-source: (πχ. Πηγή προέλευσης: https: // www. ).

Η επιτραπέζια έκδοση της Opera σας επιτρέπει επίσης να προβάλλετε την προέλευση HTML, το CSS και άλλα στοιχεία χρησιμοποιώντας τα ενσωματωμένα εργαλεία ανάπτυξης . Για να ξεκινήσει αυτή η διεπαφή, η οποία από προεπιλογή θα εμφανιστεί στη δεξιά πλευρά του κύριου παραθύρου του προγράμματος περιήγησης, πατήστε την ακόλουθη συντόμευση πληκτρολογίου: CTRL + SHIFT + I ( COMMAND + OPTION + I στο macOS).

Το σετ εργαλείων για προγραμματιστές της Opera είναι επίσης προσβάσιμο ακολουθώντας τα παρακάτω βήματα.

1. Κάντε κλικ στο λογότυπο Opera, που βρίσκεται στην επάνω αριστερή γωνία του παραθύρου του προγράμματος περιήγησης.
2. Όταν εμφανιστεί το αναπτυσσόμενο μενού, τοποθετήστε το δείκτη του ποντικιού πάνω από την επιλογή Περισσότερα εργαλεία .
3. Κάντε κλικ στο μενού Εμφάνιση του προγραμματιστή .
4. Κάντε κλικ στο λογότυπο Opera ξανά.
5. Όταν εμφανιστεί το αναπτυσσόμενο μενού, τοποθετήστε το δείκτη του ποντικιού πάνω από τον Προγραμματιστή .
6. Όταν εμφανιστεί το υπομενού, κάντε κλικ στα Εργαλεία προγραμματιστή .

Βιβάλντι

Υπάρχουν πολλοί τρόποι προβολής της πηγής σελίδας στο πρόγραμμα περιήγησης Vivaldi. Το πιο απλό είναι μέσω της συντόμευσης πληκτρολογίου CTRL + U , η οποία παρουσιάζει κώδικα από την ενεργή σελίδα σε μια νέα καρτέλα.

Μπορείτε επίσης να προσθέσετε το ακόλουθο κείμενο στο μπροστινό μέρος της διεύθυνσης URL, το οποίο εμφανίζει τον πηγαίο κώδικα στην παρούσα καρτέλα: προβολή-πηγή:. Ένα παράδειγμα αυτού θα μπορούσε να είναι η προβολή-πηγή: http: // www. .

Μια άλλη μέθοδος είναι μέσω των ενσωματωμένων εργαλείων προγραμματιστή του προγράμματος περιήγησης, που είναι προσβάσιμα πατώντας το συνδυασμό CTRL + SHIFT + I ή μέσω της επιλογής Εργαλεία προγραμματιστή στο μενού Εργαλεία του προγράμματος περιήγησης, που βρίσκεται κάνοντας κλικ στο λογότυπο 'V' στην επάνω αριστερή γωνία. Η χρήση των εργαλείων dev επιτρέπει μια πολύ πιο εμπεριστατωμένη ανάλυση της πηγής της σελίδας.