Είτε είστε σχεδιαστής ιστοσελίδων που διορθώνει τον πηγαίο κώδικα του ιστότοπού σας είτε απλώς είστε περίεργοι για το πώς φαίνεται ο κώδικας ενός ιστότοπου, μπορείτε να προβάλετε την πηγή HTML απευθείας στο Google Chrome. Υπάρχουν δύο τρόποι για να προβάλετε την πηγή HTML: Προβολή προέλευσης και Επιθεώρηση χρησιμοποιώντας τα Εργαλεία προγραμματιστή.
Προβολή πηγής χρησιμοποιώντας Προβολή προέλευσης σελίδας
Ενεργοποιήστε το Chrome και μεταβείτε στην ιστοσελίδα που θέλετε για να δείτε τον πηγαίο κώδικα HTML. Κάντε δεξί κλικ στη σελίδα και κάντε κλικ στο “Προβολή προέλευσης σελίδας” ή πατήστε Ctrl + U, για να δείτε την πηγή της σελίδας σε μια νέα καρτέλα.
Ανοίγει μια νέα καρτέλα μαζί με όλο το HTML για την ιστοσελίδα, πλήρως διευρυμένο και χωρίς μορφοποίηση.
Αν ψάχνετε για ένα συγκεκριμένο στοιχείο ή τμήμα στην πηγή HTML, η χρήση Προέλευσης Προβολής είναι κουραστική και δυσκίνητη, ειδικά εάν η σελίδα χρησιμοποιεί πολύ JavaScript και CSS.
Επιθεωρήστε την πηγή χρησιμοποιώντας τα Εργαλεία προγραμματιστή
Αυτή η μέθοδος χρησιμοποιεί το παράθυρο “Εργαλεία προγραμματιστή” στο Chrome και είναι μια πολύ πιο καθαρή προσέγγιση για την προβολή του πηγαίου κώδικα. Το HTML είναι ευκολότερο να διαβαστεί εδώ χάρη στην πρόσθετη μορφοποίηση και τη δυνατότητα σύμπτυξης στοιχείων που δεν σας ενδιαφέρει να δείτε.
Ανοίξτε το Chrome και κατευθυνθείτε στη σελίδα που θέλετε να επιθεωρήσετε. στη συνέχεια πατήστε Ctrl + Shift + i. Ένα συνδεδεμένο παράθυρο θα ανοίξει δίπλα στην ιστοσελίδα που προβάλλετε.
Κάντε κλικ στο μικρό γκρι βέλος δίπλα σε ένα στοιχείο για να το επεκτείνετε ακόμη περισσότερο.
Εάν δεν θέλετε να βλέπετε τον κώδικα ολόκληρης της σελίδας από προεπιλογή, αλλά αντίθετα, επιθεωρήστε ένα συγκεκριμένο στοιχείο στο HTML, κάντε δεξί κλικ σε αυτό το διάστημα στη σελίδα και, στη συνέχεια, κάντε κλικ στο «Επιθεώρηση».
Όταν ανοίξει το παράθυρο αυτή τη φορά, πηγαίνει απευθείας στο τμήμα του κώδικα που περιέχει αυτό το στοιχείο στο οποίο κάνατε κλικ.
Εάν θέλετε να αλλάξετε τη θέση της βάσης, μπορείτε να τη μετακινήσετε προς τα κάτω, αριστερά, δεξιά ή ακόμα και να την αποσυνδέσετε σε ξεχωριστό παράθυρο. Κάντε κλικ στο εικονίδιο μενού (τρεις κουκκίδες) και, στη συνέχεια, επιλέξτε είτε αποσύνδεση σε ξεχωριστό παράθυρο, βάση σύνδεσης στα αριστερά, βάση σύνδεσης στο κάτω μέρος ή σύνδεση προς τα δεξιά, αντίστοιχα.
Αυτό είναι το μόνο που υπάρχει σε αυτό. Όταν ολοκληρώσετε την εξέταση του κώδικα, είτε κλείστε την καρτέλα Προβολή πηγής είτε κάντε κλικ στο “X” στο παράθυρο Εργαλεία προγραμματιστή για να επιστρέψετε στην ιστοσελίδα σας.