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

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

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

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

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

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

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

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

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

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

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

Για το iDevice σας:Ρυθμίσεις> Προφίλ Apple ID> iCloud> Safari> ΕΝΕΡΓΟΠΟΙΗΜΕΝΟ

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

Και βεβαιωθείτε ότι το Safari είναι η ίδια έκδοση πάρα πολύ

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

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

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

Pro Keyboard ShortCut Tip σε Mac για Web Devs

Εάν πατήσετε 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 ή πιστοποιημένο από MFI (Made for iPhone)
  • Βεβαιωθείτε ότι το Web Inspector είναι ενεργοποιημένο. Ορισμένες φορές, οι ενημερώσεις του iOS αλλάζουν ξανά την προεπιλεγμένη ρύθμιση OFF. Απλά φροντίστε να το ελέγξετεΡυθμίσεις> Safari> Για προχωρημένους> Web Inspector
    • Δοκιμάστε να απενεργοποιήσετε το Web Inspector, περιμένετε 10 δευτερόλεπτα και ενεργοποιήστε ξανά
  • Δοκιμάστε το πρόγραμμα περιήγησης προεπισκόπησης τεχνολογίας Safari
  • Κλείστε το Safari στο Mac σας και επανεκκινήστε το. Δείτε αν το Safari του Mac σας αναγνωρίζει τη συσκευή σας και επιτρέπει τον εντοπισμό σφαλμάτων
  • Βεβαιωθείτε ότι δεν χρησιμοποιείτε τη λειτουργία Ιδιωτικής περιήγησης του Safari στο iDevice σας εμφανίζεται μόνο για λίγο στο μενού Ανάπτυξης του Safari και μετά εξαφανίζεται
  • Ανοίξτε το Activity Monitor και ελέγξτε τι συμβαίνει με το Safari

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

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

Πρόσφατες δημοσιεύσεις