Πώς να αντιγράψετε κώδικα από ιστότοπους χρησιμοποιώντας Chrome, Firefox και Edge

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

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

Πώς να αντιγράψετε κώδικα από ιστότοπους χρησιμοποιώντας το Chrome

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

Μέσω Πηγής Σελίδας

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

Κάντε κλικ Δες την πηγή της σελίδας ή απλά πατήστε Ctrl + U (Windows, Linux) ή Command + U (macOS). Αντιγράψτε το τμήμα του κώδικα που θέλετε ή ολόκληρο και επικολλήστε το στον επεξεργαστή κώδικα που προτιμάτε.

Μέσω της συντόμευσης F12

Μπορείτε εύκολα να αποκτήσετε πρόσβαση στα Εργαλεία προγραμματιστών του Chrome μεταβαίνοντας σε έναν ιστότοπο και απλά πατώντας F12. Τα Εργαλεία προγραμματιστών του Chrome φιλοξενούν κώδικα ιστότοπου και λειτουργούν ως εργαλείο εντοπισμού σφαλμάτων για προγραμματιστές.

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

Ένας άλλος τρόπος για να εισέλθετε στον πίνακα Εργαλεία προγραμματιστή του Chrome είναι μέσω του εργαλείου Επιθεώρηση. Για να το κάνετε αυτό, επισκεφτείτε τον ιστότοπο προορισμού από τον οποίο θέλετε να αντιγράψετε τον κώδικα. Τώρα, πατήστε Ctrl + Shift + I (Windows, Linux) ή Command + Option + I (macOS), αυτό θα σας μεταφέρει κατευθείαν στο Dev Tools.

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

Μέσω του μενού Περισσότερες ενέργειες του Chrome

Ένας άλλος τρόπος για να εξερευνήσετε τον κώδικα ιστότοπου μέσω των Εργαλείων προγραμματιστή στο Chrome είναι να κάνετε κλικ στο κουμπί με τις τρεις κουκκίδες στην επάνω δεξιά γωνία του ιστότοπου προορισμού. Από τις επιλογές μενού, επιλέξτε Περισσότερα εργαλεία, έπειτα Εργαλεία προγραμματιστή.

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

Πώς να αντιγράψετε κώδικα από ιστότοπους χρησιμοποιώντας το Firefox

Ακολουθούν διάφοροι τρόποι αντιγραφής κώδικα ιστότοπου χρησιμοποιώντας τον Firefox.

Δες την πηγή της σελίδας

Για να αποκτήσετε πρόσβαση και να αντιγράψετε τον κώδικα ιστότοπου στον Firefox προβάλλοντας την πηγή της σελίδας, απλώς κάντε δεξί κλικ στον ιστότοπο προορισμού και κάντε κλικ Δες την πηγή της σελίδας.

Εναλλακτικά, πατήστε Ctrl + U (Windows, Linux) ή Command + U (macOS). Αντιγράψτε όλο τον κώδικα που θέλετε και επικολλήστε τον στον επεξεργαστή κώδικα της επιλογής σας.

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

Μέσω της συντόμευσης πληκτρολογίου F12

Ακριβώς όπως ο Chrome, μπορείτε επίσης να έχετε πρόσβαση στον κώδικα ενός ιστότοπου στο Firefox Dev Tools πατώντας απλά το πλήκτρο F12 στο πληκτρολόγιό σας.

Ψάξτε γύρω σας για τον συγκεκριμένο κωδικό που αναζητάτε, δίνοντας ιδιαίτερη προσοχή στο Style Editor. Τώρα, αντιγράψτε και επικολλήστε όλο αυτόν τον κώδικα στον αγαπημένο σας επεξεργαστή κώδικα και κάντε τα μαγικά σας.

Και πάλι, όπως ο Chrome, μπορείτε εξίσου να έχετε πρόσβαση στον κώδικα ιστότοπου στον Firefox χρησιμοποιώντας το ενσωματωμένο εργαλείο Inspect. Για να το κάνετε αυτό, κάντε δεξί κλικ σε οποιοδήποτε καθαρό τμήμα του ιστότοπου προορισμού και πατήστε είτε Q ή κάντε κλικ Ελέγχω. Μπορείτε επίσης να πατήσετε Ctrl + Shift + I (Windows, Linux) ή Command + Option + I (macOS).

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

Μέσω του Μενού Περισσότερες Ενέργειες του Firefox

Για να αντιγράψετε τον κώδικα ιστότοπου στον Firefox μέσω του μενού περισσότερων ενεργειών, από τον ιστότοπο του οποίου θέλετε να αντιγράψετε τον κωδικό, κάντε κλικ στο μενού χάμπουργκερ τριών γραμμών στην επάνω δεξιά γωνία.

Επιλέγω Περισσότερα εργαλεία, μετά κάντε κλικ Εργαλεία προγραμματιστή Ιστού. Από εδώ, μπορείτε να χρησιμοποιήσετε είτε το Inspector είτε το Style Editor για να αντιγράψετε τον επιθυμητό κωδικό.

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

Πώς να αντιγράψετε κώδικα από ιστότοπους χρησιμοποιώντας το Edge

Μπορείτε εύκολα να αντιγράψετε τον κώδικα ιστότοπου με διαφορετικούς τρόπους χρησιμοποιώντας το Edge ως εξής.

Δες την πηγή της σελίδας

Για να αντιγράψετε τον κώδικα ιστότοπου προβάλλοντας την πηγή σελίδας στον Microsoft Edge, απλώς κάντε δεξί κλικ σε οποιοδήποτε καθαρό τμήμα του ιστότοπου προορισμού και επιλέξτε Δες την πηγή της σελίδας.

Εναλλακτικά, μπορείτε απλά να πατήσετε Ctrl + U (Windows, Linux) ή Command + U (macOS), αντιγράψτε το τμήμα που θέλετε, επικολλήστε το σε ένα πρόγραμμα επεξεργασίας και ξεκινήστε να προσαρμόζετε τον κώδικα.

Μέσω της συντόμευσης πληκτρολογίου F12

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

Επιβεβαιώστε την επιλογή σας κάνοντας κλικ Ανοίξτε το DevTools. Στον πίνακα Dev Tools, μπορείτε εύκολα να αντιγράψετε όλο τον κώδικα που θέλετε και να κάνετε την εργασία σας πιο γρήγορη.

Για να αντιγράψετε τον κώδικα ιστότοπου χρησιμοποιώντας το εργαλείο Edge's Inspect, μεταβείτε στον ιστότοπο του οποίου θέλετε να αντιγράψετε τον κώδικα, κάντε δεξί κλικ σε οποιοδήποτε καθαρό τμήμα και επιλέξτε Ελέγχω.

Μπορείτε επίσης να πατήσετε Ctrl + Shift + I (Windows, Linux) ή Command + Option + I (macOS). Στη συνέχεια, μπορείτε να αντιγράψετε και να επικολλήσετε τον κώδικα που θέλετε να αντιγράψετε και να επεξεργαστείτε.

Μέσω του κουμπιού Περισσότερες ενέργειες του Edge

Το Edge σάς επιτρέπει επίσης να έχετε πρόσβαση στον πίνακα DevTools μέσω του μενού περισσότερων ενεργειών. Για να το κάνετε αυτό, μεταβείτε στον ιστότοπο του οποίου τον κωδικό θέλετε να αντιγράψετε. Κάντε κλικ στο κουμπί με τις τρεις κουκκίδες στην επάνω δεξιά γωνία και κάντε κλικ Περισσότερα εργαλεία, έπειτα Εργαλεία προγραμματιστή.

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

Όποια προσέγγιση κι αν ακολουθήσετε και όποιο πρόγραμμα περιήγησης που βασίζεται στο Chromium χρησιμοποιείτε (Chrome, Firefox ή Edge), μπορεί να αναζητήσει συγκεκριμένα αρχεία ή στοιχεία κάνοντας κλικ στο μενού με τις τρεις κουκκίδες του πίνακα Dev Tools και επιλέγοντας Αναζήτηση. Εναλλακτικά, απλώς πατήστε Ctrl + Shift + F (Windows, Linux) ή Command + Option + F (macOS).

ο Ανοιγμα αρχείου και Εκτέλεση εντολής Οι επιλογές είναι επίσης χρήσιμες για την εύρεση κώδικα σε έναν ιστότοπο, όσο και οι Επεξεργαστής στυλ στον Firefox και Στοιχεία στον πίνακα εργαλείων του Chrome και του Edge dev.

Βελτιώστε τις δεξιότητές σας χρησιμοποιώντας τον υπάρχοντα κώδικα ιστότοπου

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

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