Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Safari Web Inspector

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

by
Length:LongLanguages:

Greek (ελληνικά) translation by Iris Diakoumi (you can also view the original English article)

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.

Screenshot Safari web inspector

Παρόλα αυτά, μέχρι αυτό το σημείο ο εντοπισμός σφαλμάτων σε ιστοσελίδες και διαδικτυακές εφαρμογές για κινητές συσκευές ήταν μια ταλαιπωρία. Μιας που ο 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 προσομοιωτή, θα χρειαστείτε τα εξής:

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

iOS Version Number Screenshot

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

Safari Version Number Screenshot

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

OSX Version Number Screenshot

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

Xcode Version Number Screenshot

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

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

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

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

Screenshot opening iOS Simulator

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

iOS Screenshot for turning on web inspector

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

Safari 6 Developer Menu

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

Safari 6 Advandced Preferences

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

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

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

Screenshot developer menu devices

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

Screenshot developer menu no applications

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

Screenshot developer menu virtual device
Screenshot developer menu real device

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

Screenshot iOS simulator and web inspector

Συμπέρασμα

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

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

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.