Πώς να χρησιμοποιήσετε το Web Inspector για τον εντοπισμό σφαλμάτων του Mobile Safari (iPhone ή iPad)

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

Το Web Inspector επιτρέπει στους προγραμματιστές εφαρμογών ιστού και για κινητά να χρησιμοποιούν τα εργαλεία προγραμματιστών macOS και OS X Safari για τον απομακρυσμένο εντοπισμό σφαλμάτων περιεχομένου ιστού ή υβριδικών εφαρμογών στο Safari για κινητά σε iPad ή iPhone.

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

Για να αποκτήσετε πρόσβαση σε αυτά τα εργαλεία ανάπτυξης, ενεργοποιήστε το μενού Ανάπτυξη στις Προηγμένες προτιμήσεις του Safari του Mac σας.

Γρήγορες συμβουλές

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

• Επαναφέρετε τις ρυθμίσεις τοποθεσίας και απορρήτου στο iPhone, το iPad ή το iPod touch σας. Παω σε Ρυθμίσεις > Γενικά > Επαναφορά > Επαναφορά τοποθεσίας και απορρήτου
• Βεβαιωθείτε ότι έχετε συνδεθεί στο ίδιο Apple ID στον υπολογιστή με το iPhone, το iPad ή το iPod touch σας
• Ενεργοποιήστε τον συγχρονισμό Safari iCloud τόσο για τον υπολογιστή όσο και για οποιοδήποτε iPhone, iPad ή iPod touch
• Σε iPhone ή iPad, μεταβείτε στο Ρυθμίσεις > Safari > Για προχωρημένους και ενεργοποιήστε Επιθεωρητής Ιστού
• Στον υπολογιστή, ανοίξτε το Safari και μεταβείτε στο Μενού Safari > Προτιμήσεις > Για προχωρημένους και σημάδι επιλογής Εμφάνιση του μενού Ανάπτυξη στη γραμμή μενού

Σχετικά Άρθρα

• Προβολή πηγαίου κώδικα HTML ιστοσελίδας σε iPad ή iPhone. Δεν απαιτείται εφαρμογή!
• Πώς να προβάλετε τον πηγαίο κώδικα HTML στο Safari
• Πώς να δείτε Favicons στο Safari για iPhone και Mac

Απαιτείται υπολογιστής Mac

Λυπούμαστε φίλοι των Windows, αλλά το Safari's Web Inspector είναι συμβατό μόνο με Mac!

Χρησιμοποιήστε το ίδιο Apple ID και το iCloud Sync!

Βεβαιωθείτε ότι τόσο το iDevice όσο και το Mac σας είναι συνδεδεμένα με το ίδιο Apple ID και ότι έχετε ενεργοποιήσει το Safari στο iCloud.

Για το iDevice σας: Ρυθμίσεις > Προφίλ Apple ID > iCloud > Safari > ενεργοποιήθηκε

Για το Mac σας: Μενού Apple > Προτιμήσεις συστήματος > Apple ID ή iCloud > Safari > Σημάδι επιλογής

Και ελέγξτε ότι το Safari είναι επίσης η ίδια έκδοση

Βεβαιωθείτε ότι το Safari στο Mac σας είναι η ίδια έκδοση με το Safari στο iDevice σας. Ίσως χρειαστεί να ενημερώσετε την έκδοση iOS ή την έκδοση του Safari που εκτελείται στο Mac σας.

Επαναφέρετε τις ρυθμίσεις τοποθεσίας και απορρήτου

1. Παω σε Ρυθμίσεις > Γενικά
2. Επιλέγω Επαναφορά
3. Επιλέγω να Επαναφορά τοποθεσίας και απορρήτου

Επαγγελματική συμβουλή συντόμευσης πληκτρολογίου σε Mac για προγραμματιστές Ιστού

Εάν πατήσετε CTRL+Command+R στο Safari, μπορείτε να δείτε πώς θα φαίνεται ένας ιστότοπος σε μια συγκεκριμένη συσκευή επιλέγοντας τη συσκευή.

Χρησιμοποιήστε το Web Inspector για τον εντοπισμό σφαλμάτων του Safari για κινητά

1. Στο iPad, το iPhone ή το iPod touch, πατήστε Ρυθμίσεις > Safari > Για προχωρημένους και ενεργοποιήστε Επιθεωρητής Ιστού. Και ενεργοποιήστε τη JavaScript εάν δεν είναι ήδη ενεργοποιημένη

2. Στο Mac σας, εκκινήστε το Safari και μεταβείτε στο Μενού Safari > Προτιμήσεις > Για προχωρημένους στη συνέχεια ελέγξτε "Εμφάνιση του μενού Ανάπτυξη στη γραμμή μενού"αν δεν το έχετε κάνει ήδη

3. Συνδέστε τη συσκευή σας iOS στο Mac σας με το καλώδιο USB. Αυτό είναι κρίσιμο – πρέπει να συνδέσετε τις συσκευές χειροκίνητα, χρησιμοποιώντας ένα καλώδιο. Δεν λειτουργεί μέσω WiFi!

4. Τώρα στο iPad σας, ανοίξτε τον ιστότοπο που θέλετε να διορθώσετε και, στη συνέχεια, στο Mac σας, ανοίξτε το Safari και μεταβείτε στο "Αναπτύσσωμενού. Τώρα βλέπετε το iDevice που έχετε συνδέσει με το Mac σας. Εάν δεν έχετε ανοιχτή σελίδα στο iDevice σας, θα δείτε ένα μήνυμα που λέει "Χωρίς επιθεωρήσιμες εφαρμογές".

5. Τώρα διορθώστε τη σελίδα που είναι ανοιχτή στο Safari για κινητά όπως ακριβώς θα κάνατε σε Mac, επιθεωρήστε στοιχεία DOM, τροποποιήστε το CSS, μετρήστε την απόδοση της σελίδας και εκτελέστε εντολές Javascript.

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

Το Safari θα πρέπει επίσης να εντοπίσει τυχόν σφάλματα CSS, HTML και JavaScript. Και θα δείτε τις λεπτομέρειες κάθε σφάλματος στο πρόγραμμα εντοπισμού σφαλμάτων.

Το iDevice δεν εμφανίζεται στο μενού ανάπτυξης στο Safari;

•  Εκκαθαρίστε την προσωρινή μνήμη και τα cookie του Safari
• Ενημερώστε το Safari στο Mac και το iDevice σας εάν υπάρχει διαθέσιμη ενημέρωση.
  • Εάν εκτελείτε μια έκδοση beta για iOS ή macOS, ίσως χρειαστεί να εκτελέσετε την πιο πρόσφατη έκδοση beta σε όλες τις συσκευές
• Δοκιμάστε άλλο καλώδιο ή/και θύρα στο Mac σας. Σιγουρέψου ότι Το καλώδιο είναι ένα γνήσιο καλώδιο Apple Lightning ή πιστοποιημένο με MFI (Made For iPhone)
• Ελέγξτε ότι το Web Inspector είναι ενεργοποιημένο. Μερικές φορές οι ενημερώσεις iOS το αλλάζουν ξανά στην προεπιλεγμένη ρύθμιση OFF. Φροντίστε λοιπόν να ελέγξετε Ρυθμίσεις > Safari > Για προχωρημένους > Web Inspector
  • Δοκιμάστε να απενεργοποιήσετε το Web Inspector Off, περιμένετε 10 δευτερόλεπτα και ενεργοποιήστε ξανά
• Δοκιμάστε το πρόγραμμα περιήγησης Safari Technology Preview
• Κλείστε το Safari στο Mac σας και επανεκκινήστε το. Δείτε αν το Safari του Mac σας αναγνωρίζει τη συσκευή σας και επιτρέπει τον εντοπισμό σφαλμάτων
• Ελέγξτε ότι δεν χρησιμοποιείτε τη λειτουργία Ιδιωτικής περιήγησης του Safari if το iDevice σας εμφανίζεται μόνο για λίγο στο μενού Ανάπτυξης του Safari και στη συνέχεια εξαφανίζεται
• Ανοίξτε το Activity Monitor και ελέγξτε τι συμβαίνει με το Safari

Συμβουλές αναγνωστών 

• Εάν χρησιμοποιείτε ένα παλαιότερο iDevice με iOS 6 ή παλαιότερο, το πρόγραμμα περιήγησης ιστού Safari της συσκευής σας έχει τη δική του ενσωματωμένη Κονσόλα εντοπισμού σφαλμάτων! Απλώς αποκτήστε πρόσβαση στην Κονσόλα εντοπισμού σφαλμάτων του Safari μεταβαίνοντας στο Ρυθμίσεις > Σαφάρι > Προγραμματιστής > Κονσόλα εντοπισμού σφαλμάτων