Ας υποθέσουμε ότι επισκέπτεστε έναν ιστότοπο στον οποίο δουλέψατε και βλέπετε κάποιες δυσλειτουργίες. Πρέπει να προβάλετε την πηγή σελίδας στο iPhone ή το iPad για να βρείτε τον κωδικό σφάλματος και να τον διορθώσετε. Ανοίγεις το Safari και τρελαίνεσαι να βρεις το κουμπί προβολής πηγαίου κώδικα HTML στο Safari χωρίς αποτέλεσμα. Τι κάνεις τώρα? Είναι εύκολο, απλά διαβάστε αυτό το άρθρο!
Κάθε προγραμματιστής ιστότοπου, προγραμματιστής, σχεδιαστής λογισμικού, προγραμματιστής εφαρμογών App Store, δημιουργός περιεχομένου και webmaster γνωρίζει πόσο σημαντικός είναι ο πηγαίος κώδικας. Σε αυτό το σκέλος εργασίας, πρέπει πάντα να κοιτάτε τον πηγαίο κώδικα μιας ιστοσελίδας για να διορθώσετε προβλήματα, να διορθώσετε σφάλματα, να σχεδιάσετε και να προσθέσετε αξία στον ιστότοπο.
Αν και αυτή η εργασία είναι αρκετά εύκολη σε συσκευές Android και Windows, είναι εξίσου δύσκολη σε συσκευές Apple όπως iPhone, iPad, MacBook και iMac. Αν και, στο macOS, η δυνατότητα είναι διαθέσιμη αλλά κρυφή και μπορείτε να τη βρείτε ακολουθώντας αυτό το "
Προβολή πηγαίου κώδικα HTML στο Safari" άρθρο. Ωστόσο, για συσκευές iOS, είναι μια διαφορετική ιστορία.Η Apple κατέστησε απολύτως δύσκολη την προβολή πηγών σελίδας σε iPad/iPhone. Δεν υπάρχουν εγγενείς, ή θα έλεγα, εύκολες μέθοδοι που μπορείτε είτε να πατήσετε είτε να αγγίξετε για να λάβετε τον πηγαίο κώδικα HTML των ιστοσελίδων. Αλλά μην τρελαίνεστε πολύ ακόμα. Αντίθετα, διαβάστε αυτό το άρθρο μέχρι το τέλος για να βρείτε τους καλύτερους τρόπους για να μάθετε πώς να προβάλλετε την πηγή σελίδας στο Safari σε iPhone ή iPad.
Λόγοι που πρέπει να δείτε την πηγή της σελίδας στο iPhone/iPad
Βρείτε παρακάτω ορισμένες καταστάσεις και λόγους για να προβάλετε πηγές σελίδων στο Safari σε iPad/iPhone:
- Πρέπει να προβάλετε την πηγή σελίδας μιας ιστοσελίδας για μια συγκεκριμένη συσκευή όπως το iPhone ή το iPad. Εάν αποκτήσετε πρόσβαση στον ιστότοπο σε Mac και προβάλετε τον πηγαίο κώδικα HTML, θα δείτε τα στοιχεία για την έκδοση για υπολογιστές και όχι για τις εκδόσεις iPhone ή iPad.
- Ταξιδεύετε και θέλετε να αφιερώσετε το χρόνο σας στην αναζήτηση κωδικών ιστοσελίδων για να πάρετε νέες ιδέες ή να δημιουργήσετε ένα σχέδιο εντοπισμού σφαλμάτων.
- Προτιμάτε να κάνετε ανάπτυξη ιστότοπου στο iPad σας, καθώς συνοδεύεται από πολλές λειτουργίες πολλαπλών εργασιών όπως Διευθυντής σκηνής, Split View, κ.λπ.
Επομένως, ακολουθήστε τις παρακάτω μεθόδους για να παραμείνετε προετοιμασμένοι σε περίπτωση που εμφανιστεί ανά πάσα στιγμή η ανάγκη προβολής της πηγής σελίδας σε iPhone ή iPad.
Οι καλύτερες μέθοδοι για την προβολή της πηγής σελίδας σε iPhone/iPad
Παρακάτω είναι οι δημοφιλείς τρόποι προβολής πηγών σελίδας σε κώδικες HTML σε iPhone ή iPad χωρίς να αξιοποιήσετε καμία εφαρμογή τρίτου μέρους. Αυτές οι μέθοδοι είναι κατάλληλες για κωδικοποιητές και τελικούς χρήστες που αφορούν το απόρρητο και την ασφάλεια:
1. Λάβετε τον πηγαίο κώδικα HTML χρησιμοποιώντας την εφαρμογή συντομεύσεων
Αυτή η μέθοδος θα λειτουργήσει μόνο εάν εκτελείτε iOS 12.0 (iPadOS 12.0) και νεότερη έκδοση. Δείτε πώς μπορείτε να δημιουργήσετε μια συντόμευση πηγής προβολής σελίδας σε iPhone ή iPad:
- Ανοιξε το Συντομεύσεις εφαρμογή από την αρχική οθόνη ή το συρτάρι εφαρμογών.
- Πατήστε το συν (+) εικονίδιο για να δημιουργήσετε μια νέα κενή συντόμευση.
- Στο πλαίσιο αναζήτησης, πληκτρολογήστε HTML και διάλεξε Δημιουργήστε HTML από εμπλουτισμένο κείμενο.
- Και πάλι, αναζητήστε το Γρήγορη ματιά εφαρμογή στο πλαίσιο αναζήτησης και προσθέστε την στο πρόγραμμα επεξεργασίας συντομεύσεων.
- Τώρα, πατήστε το εικονίδιο συντόμευσης στο επάνω μέρος και επιλέξτε Μετονομάζω.
- Μετονομάστε το σε Δείτε τον Πηγαίο Κώδικα και πατήστε Τέλος.
- Πατήστε το (Εγώ) κουμπί και εναλλαγή στο Εμφάνιση στο Φύλλο κοινής χρήσης επιλογή.
- Τώρα, ανοίξτε το πρόγραμμα περιήγησης Safari και επισκεφτείτε μια ιστοσελίδα της επιλογής σας.
- Αγγίξτε το Μερίδιο κουμπί στην εφαρμογή Safari και μετακινηθείτε προς τα κάτω για να βρείτε το Δείτε τον Πηγαίο Κώδικα συντομότερος τρόπος.
- Πατήστε τη συντόμευση και θα λάβετε τον πηγαίο κώδικα HTML στο Quick Look.
2. Προβολή πηγής σελίδας χρησιμοποιώντας σενάριο σελιδοδεικτών
Σε αυτήν τη μέθοδο, θα δημιουργήσετε έναν σελιδοδείκτη και η διεύθυνση URL θα είναι ένα σενάριο πηγής προβολής. Όταν περιηγείστε σε οποιαδήποτε ιστοσελίδα και θέλετε να προβάλετε την πηγή σελίδας στο Safari, απλώς πατήστε τον σελιδοδείκτη. Θα λάβετε έναν πηγαίο κώδικα HTML για τη σελίδα. Δείτε πώς γίνεται:
- Επισκεφτείτε έναν τυχαίο ιστότοπο και προσθέστε τον σελιδοδείκτη στο πρόγραμμα περιήγησης Safari για iPad ή iPhone.
- Πατήστε το Μενού σαφάρι στην επάνω αριστερή γωνία και μεταβείτε στο Σελιδοδείκτες.
- Αφή Αγαπημένα για να βρείτε τον σελιδοδείκτη που μόλις προσθέσατε.
- Πατήστε παρατεταμένα τον σελιδοδείκτη και, στη συνέχεια, επιλέξτε Επεξεργασία στο μενού περιβάλλοντος.
- Διαγράψτε τον υπάρχοντα τίτλο σελιδοδείκτη και μετονομάστε τον σε Πηγαίος κώδικας HTML ή οτιδήποτε άλλο απλώς για να θυμάστε τον σελιδοδείκτη.
- Πατήστε το Διεύθυνση και διαγράψτε την υπάρχουσα διεύθυνση URL.
- Αντιγράψτε και επικολλήστε τον ακόλουθο κώδικα ως URL (δημιουργός κώδικα: Rob Flaherty):
javascript:(function(){var a=window.open('about: blank').document; a.write('');a.close();var b=a.body.appendChild (a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace=' pre-wrap';b.appendChild (a.createTextNode (document.documentElement.innerHTML))})();
- Παρακέντηση Εγινε στο πληκτρολόγιο για να αποθηκεύσετε τις αλλαγές που έχετε κάνει μέχρι τώρα.
- Τώρα, μεταβείτε στην ιστοσελίδα για την οποία πρέπει να επιθεωρήσετε τον πηγαίο κώδικα.
- μεταβείτε στο Σελιδοδείκτες μενού και αγγίξτε το Πηγαίος κώδικας HTML σελιδοδείκτη που μόλις δημιουργήσατε.
- Θα πρέπει να δείτε τον κώδικα HTML της σελίδας που επισκέπτεστε σε μια νέα καρτέλα Safari.
Διαβάστε επίσης:Πώς να διαχειριστείτε τους σελιδοδείκτες στο Safari σε iOS και Mac
3. Προβολή πηγής σελίδας με χρήση του macOS Tethering
Η εφαρμογή Safari σε iPhone και iPad συνοδεύεται από ένα ενσωματωμένο εργαλείο Web Inspector. Δυστυχώς, η δυνατότητα δεν λειτουργεί απευθείας σε συσκευές iPhone ή iPad. Πρέπει να συνδέσετε τις συσκευές σε MacBook ή iMac. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε στοιχεία ελέγχου στο Mac Safari για να οπτικοποιήσετε τον πηγαίο κώδικα HTML. Η διαδικασία λειτουργεί σε δύο φάσεις όπως περιγράφεται παρακάτω:
Ενεργοποιήστε το Web Inspector
Ακολουθήστε αυτά τα βήματα για να την ενεργοποιήσετε Επιθεωρητής Ιστού λειτουργικότητα στο Safari για iPad και iPhone:
- Στο iPhone ή το iPad σας, ανοίξτε το Ρυθμίσεις εφαρμογή.
- Παω σε Ρυθμίσεις Safari.
- Κάντε κύλιση προς τα κάτω στο κάτω μέρος του παραθύρου Ρυθμίσεις Safari για να βρείτε το Προχωρημένος μενού. Πατήστε πάνω του.
- Ενεργοποιήστε το Επιθεωρητής Ιστού πατώντας το κουμπί εναλλαγής.
Προβολή προέλευσης σελίδας στο Mac Safari
Μεταβείτε στο Mac σας και ακολουθήστε τα παρακάτω βήματα:
- Συνδέστε το iPhone ή το iPad με MacBook ή iMac χρησιμοποιώντας το καλώδιο USB.
- Εάν η συσκευή δεν έχει ελεγχθεί νωρίτερα, ο Mac θα σας ζητήσει να την ελέγξετε χρησιμοποιώντας το Apple ID.
- Τώρα ανοίξτε την εφαρμογή Safari σε Mac και επισκεφτείτε οποιονδήποτε ιστότοπο.
- Στη γραμμή εργαλείων Mac, κάντε κλικ Αναπτύσσω.
- Αναζητήστε το iPad ή το iPhone σας στο μενού περιβάλλοντος που ανοίγει.
- Κάντε κλικ στο iPad ή το iPhone σας για να ανοίξετε ένα νέο παράθυρο στο Mac που εμφανίζει την οθόνη Safari αυτών των συσκευών.
- Τώρα, ανοίξτε τον ιστότοπο προορισμού στο iPhone ή το iPad σας και προβάλετε τον πηγαίο κώδικα στο πρόγραμμα περιήγησης Mac Safari.
Εάν είστε εντάξει με τις εφαρμογές και τα εργαλεία τρίτων κατασκευαστών, τότε ίσως θελήσετε επίσης να εξετάσετε αυτές τις πρόσθετες μεθόδους για να δείτε τους πηγαίους κώδικες HTML ιστοσελίδων:
4. Safari Extension – Web Inspector
Μπορείτε να εγκαταστήσετε την επέκταση Web Inspector για το πρόγραμμα περιήγησης Apple Safari σε iPad και iPhone. Στη συνέχεια, καλέστε την επέκταση όταν περιηγείστε σε μια ιστοσελίδα για να δείτε τον πηγαίο κώδικα HTML της. Εδώ είναι τα βήματα που πρέπει να δοκιμάσετε:
- Ανοιξε το Ρυθμίσεις εφαρμογή και μεταβείτε στο Ρυθμίσεις Safari Ενότητα.
- Κάντε κύλιση προς τα κάτω μέχρι να βρείτε το Επεκτάσεις επιλογή. Πατήστε πάνω του.
- Μέσα στις Επεκτάσεις, πατήστε Περισσότερες επεκτάσεις.
- Θα εμφανιστεί η σελίδα του App Store για τις επεκτάσεις Safari.
- Αγγίξτε το Αναζήτηση κουτί και τύπος Επιθεωρητής Ιστού και πατήστε Αναζήτηση στο πληκτρολόγιο.
- Βρείτε και εγκαταστήστε την εφαρμογή Web Inspector.
- Πάλι πηγαίνετε στο Ρυθμίσεις > Σαφάρι > Επεκτάσεις > και πατήστε Επιθεωρητής Ιστού.
- Χρησιμοποιήστε το κουμπί εναλλαγής για να ενεργοποιήσετε αυτήν την επέκταση για το Safari.
- Ανοίξτε το Safari και επισκεφτείτε οποιονδήποτε ιστότοπο.
- Πατήστε το Επεκτάσεις εικονίδιο στη δεξιά γωνία της γραμμής διευθύνσεων.
- Επίλεξε το Επιθεωρητής Ιστού επέκταση.
- Επιλέξτε το Αφήστε για μία ημέρα επιλογή στο αναδυόμενο παράθυρο που εμφανίζεται.
- Πάλι, πατήστε το Επεκτάσεις και μετά αγγίξτε το Web Inspector.
- Ο πηγαίος κώδικας HTML θα πρέπει να εμφανίζεται από το κάτω μέρος της ιστοσελίδας που προβάλλετε.
- Μπορείτε να κάνετε εναλλαγή μεταξύ των καρτελών όπως DOM, Elements, Console, Network και Resources.
- Για να επιστρέψετε στην κανονική προβολή, απλώς πατήστε την επέκταση Web Inspector στην ενότητα Επεκτάσεις του Safari.
5. Εφαρμογή iOS – Προβολή πηγής
Μπορείτε να το αποκτήσετε δωρεάν στο App Store. Στο πλαίσιο αναζήτησης, πληκτρολογήστε Προβολή πηγής και αγγίξτε Αναζήτηση. Θα δείτε πολλά αποτελέσματα στο App Store. Εγκαταστήστε αυτό που λέει Προβολή προέλευσης. Ο πάροχος της εφαρμογής είναι ο Roman Tomjak.
Ανοίξτε την εφαρμογή από την Αρχική οθόνη ή το Συρτάρι εφαρμογών. Στη συνέχεια, πληκτρολογήστε τη διεύθυνση URL του ιστότοπου στη γραμμή διευθύνσεων για να αποκαλύψετε τον πηγαίο κώδικα HTML.
Το εργαλείο παρέχει μια προβολή μεγέθους iPhone του πηγαίου κώδικα. Ωστόσο, μπορείτε να αλλάξετε τον προσανατολισμό ή να κάνετε μεγέθυνση χρησιμοποιώντας τα σχετικά κουμπιά στην κάτω δεξιά γωνία της οθόνης.
6. Δείτε τον πηγαίο κώδικα δωρεάν χρησιμοποιώντας την προσωρινή μνήμη Google Web
Μπορείτε να εκτελέσετε το ακόλουθο προσεγμένο και ωραίο κόλπο σε ιστότοπους που επισκέπτεστε για να δείτε τον υποκείμενο πηγαίο κώδικα τους στο Safari ή στο Chrome:
- Επισκεφθείτε την ιστοσελίδα για την οποία πρέπει να βρείτε τον πηγαίο κώδικα HTML.
- Πατήστε τη διεύθυνση στη γραμμή διευθύνσεων του Safari ή του Chrome.
- Πάρτε τον κέρσορα πληκτρολόγησης στην αρχή της διεύθυνσης όπως φαίνεται στην παραπάνω εικόνα.
- Τώρα, πληκτρολογήστε τον παρακάτω κώδικα πριν https://
κρύπτη:
- Χτύπα το Πηγαίνω κουμπί στο πληκτρολόγιο iOS.
- Στην κορυφή της σελίδας, πρέπει να δείτε το Προβολή πηγής επιλογή. Πατήστε πάνω του.
- Τώρα λαμβάνετε τον πηγαίο κώδικα της ιστοσελίδας που μόλις επισκεφτήκατε.
Διαβάστε επίσης:Πώς να εισαγάγετε τους σελιδοδείκτες, τους κωδικούς πρόσβασης και άλλα
7. Προβάλετε τον πηγαίο κώδικα σε εφαρμογές Ιστού
Υπάρχουν πολλοί ιστότοποι που σας επιτρέπουν να αποκαλύπτετε τους υποκείμενους πηγαίους κώδικες ιστότοπων και ιστοσελίδων δωρεάν ή με μικρή χρέωση. Από όλες αυτές τις εφαρμογές ιστού, διάλεξα το CodeBeautify's Source Code Viewer. Ετσι δουλευει:
- Σε iPhone ή iPad, μεταβείτε σε αυτόν τον σύνδεσμο: Πρόγραμμα προβολής πηγαίου κώδικα χρησιμοποιώντας το πρόγραμμα περιήγησης Safari.
- Στο Εισαγάγετε τη διεύθυνση URL πλαίσιο, πληκτρολογήστε ή αντιγράψτε και επικολλήστε τη διεύθυνση URL της ιστοσελίδας για την οποία θέλετε να αποκαλύψετε τον πηγαίο κώδικα HTML.
- Πατήστε το Θέα κουμπί για προβολή της πηγής σελίδας στο πρόγραμμα περιήγησης iPhone/iPad Safari.
συμπέρασμα
Έτσι, τώρα γνωρίζετε όλα τα κόλπα για να δείτε την πηγή σελίδας σε συσκευές iPhone και iPad. Ανακαλύψατε ορισμένες εγγενείς και μη εγγενείς μεθόδους σε αυτό το άρθρο. Μπορείτε απλώς να επιμείνετε στα εγγενή κόλπα στο iPad ή το iPhone για να προβάλετε τον πηγαίο κώδικα HTML των ιστοσελίδων ή να χρησιμοποιήσετε εφαρμογές που κάνουν την εργασία πολύ πιο εύκολη.
Πείτε μου ποια μέθοδος σας άρεσε αφήνοντας ένα σχόλιο παρακάτω. Επίσης, μοιραστείτε το άρθρο στα μέσα κοινωνικής δικτύωσης και στο WhatsApp για να βοηθήσετε τους φίλους σας που μαθαίνουν την ανάπτυξη ιστοτόπων και την κωδικοποίηση εφαρμογών.
Επόμενο, Πώς να μάθετε το Swift σε Mac και iPad.