Γρήγορη Συμβουλή: Χρησιμοποιώντας τον Web Inspector για να Κάνετε Αποσφαλμάτωση στο Mobile Safari

H δημιουργία και ο εντοπισμός σφαλμάτων σε ιστοσελίδες και διαδικτυακές εφαρμογές για κινητές συσκευές μπορεί να είναι μια ταλαιπωρία. Στο desktop έχουμε ισχυρά εργαλεία εντοπισμού σφαλμάτων; τα περισσότερα προγράμματα περιήγησης έχουν ένα web inspector κάποιου είδους. Αλλά δεν έχουμε αυτά τα εργαλεία για συσκευές όπως το iPhone και iPad..., μέχρι τώρα!

Με την πρόσφατη έκδοση του Safari 6 και του iOS 6, μπορείτε τώρα να χρησιμοποιήσετε τον web inspector για τη δημιουργία και τον εντοπισμό σφαλμάτων σε ιστοσελίδες στο desktop και στο mobile Safari. Το καλύτερο από όλα;  Η διαδικασία εγκατάστασης είναι απλή. Ακολουθήστε αυτό το tutorial και θα έχετε κάποια ισχυρά εργαλεία εντοπισμού σφαλμάτων για κινητές iDevices στη διάθεσή σας άμεσα.

Τα σύγχρονα προγραμματιστικά εργαλεία στα προγράμματα περιήγησης έχουν υπάρξει μια τεράστια βοήθεια στην ανάπτυξη ιστοσελίδων και διαδικτυακών εφαρμογών. O Chrome έχει τα developer tools. O Firefox; To Firebug. O Safari; Τον Web Inspector. Όλα αυτά είναι εξαιρετικά ισχυρά εργαλεία στην ανάπτυξη web.

Παρόλα αυτά, μέχρι αυτό το σημείο ο εντοπισμός σφαλμάτων σε ιστοσελίδες και διαδικτυακές εφαρμογές για κινητές συσκευές ήταν μια ταλαιπωρία. Μιας που ο Safari και ο Chrome είναι βασισμένα στη μηχανή webkit, υπάρχουν πολλές ομοιότητες με τον τρόπο που το desktop και mobile πρόγραμμα περιήγησης εμφανίζει μια ιστοσελίδα. Έτσι, οι περισσότεροι σχεδιαστές/προγραμματιστές αναπτύσσουν και αλλάζουν τις ιστοσελίδες τους στο desktop χρησιμοποιώντας ένα από αυτά τα προγράμματα περιήγησης, υποθέτοντας ότι οι ομοιότητες που προκύπτουν από τη μηχανή webkit θα καταστήσει την σελίδα εξίσου όμοια σε μια κινητή συσκευή.

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

Οι νέες εκδόσεις λογισμικού της Apple στα  iOS 6 και Safari 6 φέρει πολλά από τα χαρακτηριστικά των desktop εργαλείων εντοπισμού σφαλμάτων προγράμματος περιήγησης που όλοι ξέρουμε και αγαπάμε, σε φορητές συσκευές . Αυτό το tutorial θα σας δείξει τη απλή διαδικασία εγκατάστασης (Setup) για τον εντοπισμό σφαλμάτων σε ιστότοπους για κινητά μέσω του Safari web inspector.

Πριν αρχίσουμε, μια σημείωση σχετικά με τη συμβατότητα: υπάρχουν μερικά άσχημα νέα για εκείνους που χρησιμοποιούν τα Windows. Μπορείτε μόνο να κάνετε έλεγχο σφαλμάτων χρησιμοποιώντας το απομακρυσμένο web inspector σε έναν Mac. Ο Safari 6 δεν είναι διαθέσιμος για windows. Επίσης, ο Safari 6 είναι διαθέσιμος μόνο για Macs που τρέχουν OSX Lion ή υψηλότερo.

Μεθόδοι για τη χρήση του Web Inspector

Υπάρχουν δύο μέθοδοι για τη χρήση του web inspector σε mobile Safari:

1. Mέθοδος Πραγματικής Συσκευής: Χρήσιμοποιήστε μια πραγματική iDevice (iPhone, iPad, κλπ) συνδεδεμένη στον υπολογιστή σας μέσω USB
2. Μέθοδος Εικονικής Συσκευής: Χρησιμοποιήσετε το iOS προσομοιωτή, που αποτελεί μέρος του Xcode

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

Βήμα 1: Βεβαιωθείτε ότι είστε Ενημερωμένοι

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

Μέθοδος Πραγματικής Συσκευής: Για να χρησιμοποιήσετε το web inspector παράλληλα με μια πραγματική διασύνδεση iDevice, θα χρειαστείτε τα εξής:

• Ένα iDevice (iPhone, iPad, iTouch) που να τρέχει iOS 6
• Καλώδιο USB
• Safari 6
• Mac OSX Lion (10.7.4) ή νεότερο

Μέθοδος Εικονικής Συσκευής: Για να χρησιμοποιήσετε web inspector παράλληλα με iOS προσομοιωτή, θα χρειαστείτε τα εξής:

• Safari 6
• Mac OSX Lion (10.7.4) ή νεότερο
• Xcode 4.5 με iOS 6 SDK (διαθέσιμο στο app store)

Έλεγχος εκδόσεων λογισμικού: για να ελέγξετε αν χρησιμοποιείτε iOS 6 στην iDevice σας, πηγαίνετε στο "Settings > General > About" στη συσκευή σας.

Για να ελέγξετε εάν εκτελείτε Safari 6 μεταβείτε στη γραμμή μενού του Safari, και κάντε κλικ στην επιλογή "Safari > About Safari".

Για να διασφαλίσετε ότι τρέχετε Lion, κάντε κλικ στο λογότυπο της Apple στη γραμμή μενού και επιλέξτε "About this Mac"

Να διασφαλίσετε ότι θα τρέχετε τη σωστή έκδοση του Xcode, ανοίξτε το Xcode και επιλέξτε "Xcode > About Xcode"

Βήμα 2: Ενεργοποιήστε τα Developer Tools

Πρέπει να ενεργοποιήσετε τα developer tools και τον web inspector στις desktop και τις κινητές εκδόσεις του Safari.

Μέθοδος Πραγματικής Συσκευής: Αν πρόκειται να χρησιμοποιήσετε μια πραγματική συσκευή, συνδέστε τη στο mac σας μέσω USB.

Μέθοδος Εικονικής Συσκευής: Αν πρόκειται να χρησιμοποιείτε iOS προσομοιωτή, ανοίξτε το Xcode, στη συνέχεια, κάντε δεξιό κλικ στο εικονίδιο dock και επιλέξτε "Open Developer Tool > iOS Simulator".

Mobile Safari: Στην πραγματική iDevice σας ή στο iOS προσομοιωτή πηγαίνετε στο "Settings > Safari > Advanced"» και ενεργοποιήστε το "Web Inspector".

Desktop Safari: Αν δεν το έχετε κάνει ήδη, βεβαιωθείτε ότι έχετε developer tools στο Safari ενεργοποιημένα. Θα ξέρετε ότι έχετε ενεργοποιημένα, αν μπορείτε να δείτε το "Develop" στη γραμμή μενού.

Αν δεν βλέπετε την επιλογή "Develop" στη γραμμή μενού, μεταβείτε στη γραμμή μενού και κάντε κλικ στην επιλογή "Safari > Preferences > Advanced" και επιλέξτε το πλαίσιο ελέγχου "Show develop menu in menu bar".

Βήμα 3: Ελέγξτε την ιστοσελίδα σας

Τώρα που έχετε είτε τον iOS προσομοιωτή ανοιχτό ή την iDevice σας συνδεδεμένη με το mac σας μέσω USB (ή και τα δύο!), είστε έτοιμοι να αρχίσετε να χρησιμοποιείτε το web inspector στον ιστότοπό σας.

Στον υπολογιστή σας mac, ανοίξτε το Safari και πηγαίνετε στο «Develop». Πρέπει τώρα να δείτε οποιαδήποτε iDevice (εικονική ή πραγματική) που έχετε συνδέσει και λειτουργεί με το mac σας. Θα δείτε στο screenshot από κάτω, ότι έχω δύο συσκευές στο μενού: ένας είναι ο iOS προσομοιωτής, το άλλο είναι ένα πραγματικό iPhone συνδεδεμένο στο mac μου.

Προκειμένου να αρχίσετε να επιθεωρείτε πραγματικά μια ιστοσελίδα, θα πρέπει να έχετε ανοιχτό το mobile Safari στη συσκευή και μία από τις καρτέλες ανοικτές στην ιστοσελίδα. Αν δεν έχετε ανοιχτό το mobile Safari, θα δείτε ένα μήνυμα που δηλώνει «No Inspectable Applications».

Για να ξεκινήσετε την επιθεώρηση, απλά εισάγετε το URL της σελίδας που θέλετε να επιθεωρήσετε στο mobile Safari και στη συνέχεια επιλέξτε αυτήν την τοποθεσία από το μενού «Develop». Μπορείτε να αρχίσετε να επιθεωρείτε τοποθεσίες στην πραγματική iDevice σας ή από iOS προσομοιωτή. Όταν επιλέξετε τη σελίδα, θα βλέπετε μια μπλε επικάλυψη στη σελίδα, υποδεικνύοντας ποια επιλέξατε.

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

Συμπέρασμα

Τώρα που έχετε το web inspector του Safari στα χέρια σας, έχετε πολύ μεγαλύτερο έλεγχο στη δημιουργία και τον εντοπισμό σφαλμάτων σε ιστοσελίδες και διαδικτυακές εφαρμογές.

Εδώ είναι ένα δείγμα από κάποια πράγματα που μπορείτε να κάνετε τώρα κατά τον εντοπισμό σφαλμάτων σε ιστοσελίδες κινητών:

• Πραγματοποιείστε αλλαγές ζωντανά σε HTML και CSS.
• Δείτε πώς αποδίδει η ιστοσελίδα/εφαρμογή σας συμπεριλαμβανομένου να δειτε λεπτομέρειες για JavaScript events και αιτήσεις δικτύου.
• Εντοπισμός σφαλμάτων JavaScript χρησιμοποιώντας σημεία διακοπής και άλλα εργαλεία.
• Δείτε προειδοποιήσεις και σφάλματα.
• Πρόσβαση στην κονσόλα.
• Αναζητήστε το DOM.
• Πρόσβαση και προβολή αποθηκευτικού χώρου σελίδας.

Έχετε τα εργαλεία, προχωρήστε μπροστά και κατασκευάστε!