Τρόπος προβολής της πηγής HTML στο Google Chrome

Είτε είστε σχεδιαστής ιστοσελίδων που εντοπίζει το σφάλμα του πηγαίου κώδικα του ιστότοπού σας είτε είστε απλώς περίεργοι για το πώς μοιάζει ο κώδικας ενός ιστότοπου, μπορείτε να προβάλετε την πηγή HTML απευθείας στο Google Chrome. Υπάρχουν δύο τρόποι προβολής της πηγής HTML: Προβολή πηγής και επιθεώρηση χρησιμοποιώντας εργαλεία προγραμματιστών.

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

Ενεργοποιήστε το Chrome και μεταβείτε στην ιστοσελίδα που θέλετε να προβάλετε τον πηγαίο κώδικα HTML. Κάντε δεξί κλικ στη σελίδα και κάντε κλικ στο "Προβολή πηγής σελίδας" ή πατήστε Ctrl + U, για να δείτε την πηγή της σελίδας σε μια νέα καρτέλα.

Ανοίγει μια νέα καρτέλα μαζί με όλο το HTML για την ιστοσελίδα, πλήρως επεκτεινόμενη και χωρίς μορφοποίηση.

Αν ψάχνετε για ένα συγκεκριμένο στοιχείο ή μέρος στην πηγή HTML, η χρήση του View Source είναι κουραστική και δυσκίνητη, ειδικά αν η σελίδα χρησιμοποιεί πολλά JavaScript και CSS.

Επιθεώρηση πηγής χρησιμοποιώντας εργαλεία προγραμματιστών

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

Ανοίξτε το Chrome και κατευθυνθείτε προς τη σελίδα που θέλετε να ελέγξετε. στη συνέχεια πατήστε Ctrl + Shift + i. Ένα αγκυροβολημένο παράθυρο θα ανοίξει δίπλα στην ιστοσελίδα που βλέπετε.

Κάντε κλικ στο μικρό γκρι βέλος δίπλα σε ένα στοιχείο για να το επεκτείνετε ακόμη περισσότερο.

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

Όταν το παράθυρο ανοίξει αυτή τη φορά, μεταβαίνει απευθείας στο τμήμα του κώδικα που περιέχει το στοιχείο στο οποίο κάνατε κλικ.

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

Αυτό είναι το μόνο που υπάρχει. Όταν ολοκληρώσετε την εξέταση του κώδικα, κλείστε την καρτέλα Προβολή πηγής ή κάντε κλικ στο "X" στο παράθυρο "Εργαλεία προγραμματιστή" για να επιστρέψετε στην ιστοσελίδα σας.