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

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

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

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

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

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

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

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

Google Chrome

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

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

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

Η τρίτη μέθοδος είναι μέσω των εργαλείων προγραμματιστή του Chrome, τα οποία σας επιτρέπουν να εμβαθύνετε στον κώδικα της σελίδας, καθώς και να το προσαρμόσετε σε δοκιμαστικούς και αναπτυξιακούς σκοπούς. Η διεπαφή εργαλείων προγραμματιστών μπορεί να ανοιχτεί και να κλείσει χρησιμοποιώντας αυτήν τη συντόμευση πληκτρολογίου: CTRL + SHIFT + I (ΔΙΟΡΘΩΣΗ + ΕΠΙΛΟΓΗ + Ι στο macOS). Μπορείτε επίσης να τα ξεκινήσετε ακολουθώντας την παρακάτω διαδρομή.

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

2. Όταν εμφανιστεί το αναπτυσσόμενο μενού, τοποθετήστε το δείκτη του ποντικιού πάνω από το Περισσότερα εργαλεία επιλογή.

3. Όταν εμφανιστεί το υπομενού, επιλέξτε Εργαλεία προγραμματιστή.

Android

Η προβολή της πηγής μιας ιστοσελίδας στο Chrome για Android είναι τόσο απλή όσο και η προσθήκη του παρακάτω κειμένου στο μπροστινό μέρος της διεύθυνσης (ή της διεύθυνσης URL) και την υποβολή: προβολή-πηγή:. Ένα τέτοιο παράδειγμα θα ήταν προβολή-πηγή: https: //www.Go-Travels.com . Το 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 από τη λίστα.

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

Mozilla Firefox

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

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

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

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

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

2. Όταν εμφανιστεί το αναδυόμενο μενού, κάντε κλικ στο Προγραμματιστής εικονίδιο "κλειδί".

3. Το μενού περιβάλλοντος προγραμματιστή Web θα πρέπει να είναι πλέον ορατό. Επίλεξε το Πηγή σελίδας επιλογή.

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

Android

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

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. Επιλέγω Σαφάρι στο μενού του προγράμματος περιήγησης που βρίσκεται στο πάνω μέρος της οθόνης.

2. Όταν εμφανιστεί το αναπτυσσόμενο μενού, επιλέξτε το Προτιμήσεις επιλογή.

3. Οι προτιμήσεις του Safari πρέπει τώρα να είναι ορατές. Κάνε κλικ στο Προχωρημένος εικονίδιο που βρίσκεται στην άκρα δεξιά πλευρά της κορυφαίας σειράς.

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

5. Επίλεξε το Αναπτύσσω , που βρίσκεται στο επάνω μέρος της οθόνης.

6. Όταν εμφανιστεί το αναπτυσσόμενο μενού, επιλέξτε Εμφάνιση προέλευσης σελίδας. Μπορείτε επίσης να χρησιμοποιήσετε την ακόλουθη συντόμευση πληκτρολογίου αντί: COMMAND + OPTION + U.

ΛΥΡΙΚΗ ΣΚΗΝΗ

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

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

Η επιτραπέζια έκδοση της λειτουργίας Opera σας επιτρέπει επίσης να προβάλλετε την προέλευση HTML, CSS και άλλα στοιχεία χρησιμοποιώντας τα ενσωματωμένα εργαλεία ανάπτυξης. Για να ξεκινήσετε αυτήν τη διεπαφή, η οποία από προεπιλογή θα εμφανιστεί στη δεξιά πλευρά του κύριου παραθύρου του προγράμματος περιήγησης, πατήστε την ακόλουθη συντόμευση πληκτρολογίου: CTRL + SHIFT + I (ΔΙΟΡΘΩΣΗ + ΕΠΙΛΟΓΗ + Ι στο macOS).

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

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

2. Όταν εμφανιστεί το αναπτυσσόμενο μενού, τοποθετήστε το δείκτη του ποντικιού πάνω από το Περισσότερα εργαλεία επιλογή.

3. Κάντε κλικ στο Εμφάνιση του μενού προγραμματιστή.

4. Επιλέξτε ξανά το λογότυπο Opera.

5. Όταν εμφανιστεί το αναπτυσσόμενο μενού, τοποθετήστε το δείκτη του ποντικιού πάνω από το δείκτη Προγραμματιστής.

6. Όταν εμφανιστεί το υπομενού, επιλέξτε Εργαλεία προγραμματιστή.

Βιβάλντι

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

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

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