Κύριος Χρώμιο Πώς να προβάλετε την πηγή HTML στο Google Chrome

Πώς να προβάλετε την πηγή HTML στο Google Chrome



Τι να ξέρετε

  • Κάντε δεξί κλικ στην ιστοσελίδα και επιλέξτε Δες την πηγή της σελίδας .
  • Συντόμευση: Πατήστε Ctrl + ΣΕ (Windows PC) ή Εντολή + Επιλογή + ΣΕ (Μακ).
  • Για να χρησιμοποιήσετε τα εργαλεία προγραμματιστών του Chrome, επιλέξτε Μενού (τρεις τελείες) > Περισσότερα εργαλεία > Εργαλεία προγραμματιστή .

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

Δείτε τον πηγαίο κώδικα στο Chrome

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

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

  2. Πλοηγηθείτε στο ιστοσελίδα που θα θέλατε να εξετάσετε .

  3. Κάντε δεξί κλικ η σελίδα και κοιτάξτε το μενού που εμφανίζεται. Από αυτό το μενού, κάντε κλικ Δες την πηγή της σελίδας .

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

  5. Εναλλακτικά, μπορείτε επίσης να χρησιμοποιήσετε τις συντομεύσεις πληκτρολογίου του Ctrl + ΣΕ σε υπολογιστή για να ανοίξετε ένα παράθυρο με τον πηγαίο κώδικα ενός ιστότοπου να εμφανίζεται. Σε Mac, αυτή η συντόμευση είναι Εντολή + Επιλογή + ΣΕ .

Hilary Allison / Lifewire

μεταφορά αρχείων από έναν λογαριασμό Google Drive σε έναν άλλο

Χρησιμοποιήστε τα Εργαλεία προγραμματιστών του Chrome

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

Για να χρησιμοποιήσετε τα εργαλεία προγραμματιστών του Chrome:

  1. Ανοιξε Google Chrome .

  2. Πλοηγηθείτε στο την ιστοσελίδα που θέλετε να εξετάσετε .

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

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

    Στοιχείο μενού εργαλείων προγραμματιστή στο Google Chrome
  5. Θα ανοίξει ένα παράθυρο που δείχνει τον πηγαίο κώδικα HTML στα αριστερά του παραθύρου και το σχετικό CSS στα δεξιά.

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

    πώς να ανεβάζετε αυτόματα φωτογραφίες στο Google Drive
Πώς να επιθεωρήσετε ένα στοιχείο σε Mac

Είναι νόμιμη η προβολή του πηγαίου κώδικα;

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

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

μπορείτε να τροποποιήσετε τα windows minecraft 10

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

Περισσότερα από HTML

Ένα πράγμα που πρέπει να θυμάστε είναι ότι τα αρχεία πηγής μπορεί να είναι πολύ περίπλοκα (και όσο πιο πολύπλοκος είναι ο ιστότοπος που βλέπετε, τόσο πιο πολύπλοκος είναι ο κώδικας αυτού του ιστότοπου). Εκτός από τη δομή HTML που συνθέτει τη σελίδα, θα υπάρχει επίσης CSS (cascading style sheets) που υπαγορεύουν την οπτική εμφάνιση αυτού του ιστότοπου. Επιπλέον, πολλοί ιστότοποι σήμερα θα περιλαμβάνουν αρχεία σεναρίων που περιλαμβάνονται μαζί με το HTML.

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

FAQ
  • Πώς μπορώ να επεξεργαστώ τον κώδικα HTML στο Chrome;

    Ανοίξτε το Developer Tools στο Chrome πατώντας CtrlΕντολή σε Mac) + Shift + I . Από εκεί, πατήστε Ctrl ( Εντολή σε Mac) + Ο και επιλέξτε το αποθηκευμένο αρχείο προέλευσης που θέλετε να επεξεργαστείτε για να το ανοίξετε.

  • Πώς μπορώ να δω τον πηγαίο κώδικα της σελίδας στο Chrome εάν η Προβολή πηγής είναι απενεργοποιημένη;

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

  • Πώς μπορώ να δω τον πηγαίο κώδικα ενός ιστότοπου στο Chrome χρησιμοποιώντας τη συσκευή μου Android;

    Μεταβείτε στον ιστότοπο που θέλετε να προβάλετε χρησιμοποιώντας την εφαρμογή Chrome της συσκευής σας και, στη συνέχεια, επιλέξτε τη γραμμή διευθύνσεων του προγράμματος περιήγησης. Μετακινήστε τον κέρσορα κειμένου προς τα αριστερά —μπροστά από τη διεύθυνση URL—και πληκτρολογήστε προβολή-πηγή , μετά πατήστε Εισαγω ή επιλέξτε Πηγαίνω .

Ενδιαφέροντα Άρθρα

Επιλογή Συντάκτη

Πώς να απενεργοποιήσετε την αυτόματη ανανέωση στο Amazon Prime
Πώς να απενεργοποιήσετε την αυτόματη ανανέωση στο Amazon Prime
Όλοι αναζητούν πάντα έναν τρόπο να απλοποιήσουν τη ζωή τους και να το κάνουν πιο εύκολο. Μερικές φορές, εκτός αν σας υπενθυμίζεται να κάνετε κάτι, απλά δεν γίνεται. Ρυθμίζετε υπενθυμίσεις στο τηλέφωνό σας, απασχολούν τα αγαπημένα σας πρόσωπα
Πώς να προσθέσετε φακέλους στον υπολογιστή στα Windows 7 για να τον κάνετε παρόμοιο με τα Windows 8
Πώς να προσθέσετε φακέλους στον υπολογιστή στα Windows 7 για να τον κάνετε παρόμοιο με τα Windows 8
Εάν σας αρέσει η εμφάνιση αυτού του φακέλου υπολογιστή στα Windows 8 και Windows 8.1 με συντομεύσεις σε χρήσιμους φακέλους με 1 κλικ μακριά και θέλετε να προσθέσετε τους ίδιους φακέλους στο φάκελο Υπολογιστής στα Windows 7, εδώ είναι υπέροχα νέα - σε αυτό το σεμινάριο εμείς θα μάθει: πώς να προσθέσετε φακέλους στον υπολογιστή
Ανασκόπηση Dell Latitude 12 7000 (hands-on): Η Dell 2-in-1 διογκώνει τις τάξεις των αντιπάλων Surface Pro
Ανασκόπηση Dell Latitude 12 7000 (hands-on): Η Dell 2-in-1 διογκώνει τις τάξεις των αντιπάλων Surface Pro
Εάν το CES 2016 ήταν αξιοσημείωτο για ένα πράγμα, είναι πόσοι κατασκευαστές αποφάσισαν να κυκλοφορήσουν κλώνοι Surface Pro. Λοιπόν, τώρα είναι η σειρά του αμερικανικού γίγαντα Dell να μπει στην πράξη
Πώς να μετατρέψετε το VMDK σε VHD σε 5 λεπτά
Πώς να μετατρέψετε το VMDK σε VHD σε 5 λεπτά
Αυτός είναι ένας πλήρης οδηγός για τη μετατροπή του VMDK σε VHD που εξηγεί την εικονικοποίηση, τις διαφορές στα αρχεία VHD και VMDK, καθώς και τα κορυφαία 2 εργαλεία μετατροπής. Κάντε κύλιση προς τα κάτω για τον οδηγό μετατροπής, εάν θέλετε να παραλείψετε
Η επίσημη υποστήριξη Game Mod έρχεται στα Windows 10
Η επίσημη υποστήριξη Game Mod έρχεται στα Windows 10
Φαίνεται ότι η Microsoft προσθέτει την επίσημη υποστήριξη για mods παιχνιδιών στην εφαρμογή Store. Ένας νέος φάκελος στο πιο πρόσφατο Fast Ring υποδεικνύει ότι ο υπολογιστής-πελάτης Xbox / Game Pass PC λαμβάνει αυτήν τη δυνατότητα. Ένας νέος φάκελος, Program Files ModifableWindowsApps, μπορεί να βρεθεί στα Windows 10 build 19841. Περιλαμβάνει ήδη κάποιους πόρους που σχετίζονται
Πώς να προσθέσετε έναν σύνδεσμο στο Canva
Πώς να προσθέσετε έναν σύνδεσμο στο Canva
Το να γνωρίζετε πώς να προσθέτετε συνδέσμους στο Canva μπορεί να είναι εξαιρετικά χρήσιμο. Εισάγοντας έναν σύνδεσμο στο σχέδιό σας, μπορείτε να επιτρέψετε σε πιθανούς πελάτες να δουν τον ιστότοπό σας ή να μεταβούν απευθείας σε μια συγκεκριμένη σελίδα προϊόντος. Έχετε επίσης την επιλογή
Πώς να δημιουργήσετε ένα Bootable MacOS High Sierra USB Installer
Πώς να δημιουργήσετε ένα Bootable MacOS High Sierra USB Installer
Η εγκατάσταση του macOS High Sierra από το Mac App Store είναι εύκολη, αλλά μερικές φορές χρειάζεστε έναν αποκλειστικό πρόγραμμα εγκατάστασης εκτός σύνδεσης. Δείτε πώς μπορείτε να δημιουργήσετε το δικό σας πρόγραμμα εγκατάστασης MacOS High Sierra USB με λίγα γρήγορα βήματα.