Google Chrome: Τι είναι η Προέλευση της σελίδας;

Στα μενού του Chrome και του Chromium περιλαμβάνεται μια "Προβολή πηγής σελίδας". Αυτό επιτρέπει στους προγραμματιστές και τους χρήστες να μάθουν τι συμβαίνει κάτω από την κουκούλα όταν μια σελίδα φορτώνεται στο πρόγραμμα περιήγησης. Είναι ένα παράθυρο στην πολυπλοκότητα των HTML, CSS και JavaScript που συνθέτουν τους ιστότοπους που περιηγείστε καθημερινά.

Καθορισμός Προβολής προέλευσης σελίδας στο Chrome

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

Η προβολή του πηγαίου κώδικα σάς επιτρέπει να βλέπετε κάθε συστατικό ιστοσελίδας (HTML), τον τρόπο επεξεργασίας του (CSS) και τις αλληλεπιδράσεις κωδικοποίησης που τα φέρνουν όλα μαζί (JavaScript). Αυτή η λεπτομερής προβολή είναι ανεκτίμητη για την αντιμετώπιση προβλημάτων. Υπάρχει πρόβλημα διάταξης; Η επιθεώρηση της προέλευσης της σελίδας μπορεί να αποκαλύψει μια ετικέτα που λείπει. Δεν ανταποκρίνεται ένα κουμπί; Η ενότητα JavaScript μπορεί να περιέχει την απάντηση.

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

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

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

Χρήση της επιλογής μενού «Προβολή πηγής σελίδας».

Αυτή η επιλογή είναι ο ευκολότερος τρόπος για να ελέγξετε τον πηγαίο κώδικα μιας ιστοσελίδας και λειτουργεί για οποιαδήποτε ηλεκτρονική σελίδα.

1. Ανοίξτε το πρόγραμμα περιήγησης Google Chrome ή Chromium όπως το Edge ή το Brave .
2. Αποκτήστε πρόσβαση στον ιστότοπο ή την ιστοσελίδα που σας ενδιαφέρει.
3. Κάντε δεξί κλικ σε μια ανοιχτή περιοχή, επιλέξτε Προβολή προέλευσης σελίδας ή πατήστε Ctrl + U (Windows) ή Command + U (Mac).
   
4. Στη συνέχεια, ο πηγαίος κώδικας θα εμφανιστεί σε μια νέα καρτέλα, που μοιάζει με διάταξη επεξεργασίας κειμένου.

Χρησιμοποιώντας την επιλογή URL "προβολή-πηγή".

1. Εκκινήστε το Google Chrome ή ένα πρόγραμμα περιήγησης Chromium όπως το Edge ή το Brave .
2. Αποκτήστε πρόσβαση στον ιστότοπο ή την ιστοσελίδα που σας ενδιαφέρει.
3. Στη γραμμή διευθύνσεων, πληκτρολογήστε view-source:[το URL της ιστοσελίδας εδώ] , όπως το ακόλουθο:
   view-source:https://www.alphr.com.
   
4. Στη συνέχεια, ο πηγαίος κώδικας θα εμφανιστεί σε μια νέα καρτέλα, που μοιάζει με διάταξη επεξεργασίας κειμένου.

Δείτε πώς μπορείτε να δείτε τον κώδικα HTML στο Chrome για μια πιο λεπτομερή επισκόπηση της πρόσβασης στη λειτουργία σε άλλες συσκευές.

Μην αντιγράφετε και χρησιμοποιείτε απευθείας περιεχόμενο προέλευσης σελίδας

Η εξέταση του πηγαίου κώδικα ενός ιστότοπου είναι ένας απλός τρόπος για να αποκτήσετε πληροφορίες για τη δομή και το περιεχόμενό του. Ωστόσο, δεν παρέχει πιο προηγμένες πληροφορίες, όπως εντοπισμό σφαλμάτων ή ανάλυση απόδοσης. Επιπλέον, το δυναμικό περιεχόμενο που δημιουργείται από JavaScript ενδέχεται να μην είναι ορατό στον πηγαίο κώδικα.

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

Συχνές ερωτήσεις

Ε: Είναι ασφαλής η αλλαγή κώδικα HTML, CSS και Java στην επιλογή Inspect;

Α: Μπορείτε να κάνετε ό,τι θέλετε στη λειτουργία επιθεώρησης εντός του Chrome ή ενός προγράμματος περιήγησης Chromium. Δεν αλλάζει την ιστοσελίδα με κανέναν τρόπο. Κάνετε μόνο επεξεργασίες σε πραγματικό χρόνο για την προεπισκόπηση της σελίδας στα αριστερά.

Ε: Δεν είναι χάσιμο χρόνου η επιλογή "Προβολή πηγαίου κώδικα";

Α: Όχι, η προβολή του πηγαίου κώδικα επιτρέπει στους προγραμματιστές να ρίξουν μια ματιά στις υπάρχουσες οδηγίες HTML, CSS και Java για να βρουν απλά προβλήματα ή κακή κωδικοποίηση αντί να ψάξουν σε ένα εργαλείο ανάπτυξης. Είναι μια επιλογή γρήγορης εμφάνισης, ακριβώς όπως μια δυνατότητα γρήγορης προεπισκόπησης για αρχεία υπολογιστή όπου δεν ανοίγει άλλα προγράμματα. Επιπλέον, οι χρήστες μπορούν να αντιγράψουν αποσπάσματα κώδικα και να τα επικολλήσουν σε ένα εργαλείο ανάπτυξης ιστότοπου.