Το να είσαι web developer στον σημερινό κόσμο σημαίνει να υποστηρίξεις μια σειρά από συσκευές και πλατφόρμες, οι οποίες μπορεί μερικές φορές να αποδειχθούν αποθαρρυντικές. Ακόμη και με τον πιο καλά σχεδιασμένο κώδικα που συμμορφώνεται με τα πιο πρόσφατα πρότυπα ιστού, εξακολουθείτε να διαπιστώνετε ότι τμήματα του ιστότοπού σας ενδέχεται να μην φαίνονται ή να ενεργούν όπως θέλετε σε συγκεκριμένες συσκευές ή αναλύσεις. Όταν αντιμετωπίζετε την πρόκληση να υποστηρίξετε ένα τόσο ευρύ φάσμα σεναρίων, το να έχετε τα κατάλληλα εργαλεία προσομοίωσης στη διάθεσή σας μπορεί να είναι ανεκτίμητο.
Εάν είστε ένας από τους πολλούς προγραμματιστές που χρησιμοποιούν ένα Mac, το κιτ ανάπτυξης λογισμικού του Safari έχει έρθει πάντα χρήσιμο. Με την κυκλοφορία του Safari 9 το εύρος αυτής της λειτουργικότητας έχει επεκταθεί σημαντικά, κυρίως λόγω της ευέλικτης σχεδίασης, που σας επιτρέπει να κάνετε προεπισκόπηση του τρόπου εμφάνισης του ιστότοπού σας σε διάφορες αναλύσεις οθόνης καθώς και σε διαφορετικές κατασκευές iPad, iPhone και iPod touch.
Αυτό το σεμινάριο περιγράφει λεπτομερώς τον τρόπο ενεργοποίησης του τρόπου ανταπόκρισης σχεδίασης καθώς και τον τρόπο χρήσης του για τις αναπτυξιακές σας ανάγκες.
Προτιμήσεις για σαφάρι
Αρχικά, ανοίξτε το πρόγραμμα περιήγησης Safari.
Κάντε κλικ στο Σαφάρι στο μενού του προγράμματος περιήγησης που βρίσκεται στο πάνω μέρος της οθόνης. Όταν εμφανιστεί το αναπτυσσόμενο μενού, επιλέξτε το Προτιμήσεις επιλογή που περιγράφεται στο παράδειγμα που εμφανίζεται.
Σημείωση: Μπορείτε να χρησιμοποιήσετε την ακόλουθη συντόμευση πληκτρολογίου αντί του προαναφερθέντος στοιχείου μενού: COMMAND + COMMA (,)
02 του 05Εμφάνιση αναπτυσσόμενου μενού
Το παράθυρο "Προτιμήσεις" του Safari πρέπει τώρα να εμφανίζεται, επικαλύπτοντας το παράθυρο του προγράμματος περιήγησης. Πρώτα, κάντε κλικ στο Προχωρημένος εικονίδιο που απεικονίζεται με γρανάζι και βρίσκεται στην επάνω δεξιά γωνία του παραθύρου.
Οι Προχωρημένες προτιμήσεις του προγράμματος περιήγησης πρέπει τώρα να είναι ορατές. Στο κάτω μέρος υπάρχει μια επιλογή που συνοδεύεται από ένα πλαίσιο ελέγχου, με την ετικέτα Εμφάνιση του αναπτυσσόμενου μενού στη γραμμή μενού και περιστράφηκε στο παραπάνω παράδειγμα. Κάντε κλικ στο πλαίσιο ελέγχου μία φορά για να ενεργοποιήσετε αυτό το μενού.
03 του 05Εισαγάγετε τη λειτουργία υπεύθυνης σχεδίασης
Μια νέα επιλογή θα πρέπει τώρα να είναι διαθέσιμη στο μενού Safari, που βρίσκεται στο επάνω μέρος της οθόνης, με την ετικέτα Αναπτύσσω. Κάντε κλικ σε αυτήν την επιλογή.
Όταν εμφανιστεί το αναπτυσσόμενο μενού, επιλέξτε Εισαγάγετε τη λειτουργία υπεύθυνης σχεδίασηςκύκλωμα στο παραδειγμένο παράδειγμα.
Σημείωση: Μπορείτε να χρησιμοποιήσετε την ακόλουθη συντόμευση πληκτρολογίου αντί του προαναφερθέντος στοιχείου μενού:OPTION + COMMAND + R
04 του 05Λειτουργία σχεδίασης
Η ενεργή ιστοσελίδα θα πρέπει τώρα να εμφανίζεται στη λειτουργία ανταποκρινούς σχεδιασμού, όπως φαίνεται στο παραπάνω παράδειγμα. Επιλέγοντας μία από τις συσκευές iOS που αναφέρονται, όπως το iPhone 6 ή μία από τις διαθέσιμες αναλύσεις οθόνης, όπως 800 x 600, μπορείτε να δείτε αμέσως πώς θα εμφανιστεί η σελίδα στη συγκεκριμένη συσκευή ή σε αυτή την ανάλυση οθόνης.
Εκτός από τις συσκευές και τις αναλύσεις που εμφανίζονται, μπορείτε επίσης να δώσετε εντολή στο Safari να προσομοιώνει έναν διαφορετικό πράκτορα χρήστη - όπως κάποιον από διαφορετικό πρόγραμμα περιήγησης - κάνοντας κλικ στο αναπτυσσόμενο μενού που εμφανίζεται ακριβώς πάνω από τα εικονίδια της ανάλυσης.
05 του 05Μενού ανάπτυξης: Άλλες επιλογές
Εκτός από τη λειτουργία Ανταπόκριτου Σχεδιασμού, το μενού Ανάπτυξης του Safari 9 προσφέρει πολλές άλλες χρήσιμες επιλογές, μερικές από τις οποίες παρατίθενται παρακάτω.
- Άνοιγμα σελίδας με: Σας επιτρέπει να ανοίξετε την ενεργή ιστοσελίδα σε οποιοδήποτε άλλο πρόγραμμα περιήγησης που είναι εγκατεστημένο στον Mac σας.
- User Agent: Η αλλαγή του παράγοντα χρήστη αναγκάζει τους διακομιστές Web να αναγνωρίζουν το πρόγραμμα περιήγησης ως κάτι άλλο από το Safari 9.
- Σύνδεση επιθεωρητή ιστού: Ο Επιθεωρητής Ιστού του Safari 9 εμφανίζει όλους τους πόρους μιας ιστοσελίδας, παρέχοντας τη δυνατότητα ανάγνωσης πληροφοριών CSS, μετρήσεων DOM και δομής, καθώς και του εγγενή πηγαίου κώδικα.
- Εμφάνιση κονσόλας σφαλμάτων: Μία από τις πιο ευρέως χρησιμοποιούμενες επιλογές στο αναπτυσσόμενο μενού, αυτή η κονσόλα εμφανίζει σφάλματα και προειδοποιήσεις JavaScript, HTML και XML.
- Εμφάνιση σελίδας Πηγή: Σας επιτρέπει να προβάλετε και να αναζητήσετε τον πηγαίο κώδικα της ενεργής ιστοσελίδας.
- Εμφάνιση πόρων σελίδας: Η επιλογή αυτής της επιλογής εμφανίζει έγγραφα, σενάρια, CSS και άλλους πόρους από την τρέχουσα σελίδα.
- Εμφάνιση επεξεργαστή αποσπάσματος: Παρέχει τη δυνατότητα επεξεργασίας και εκτέλεσης τμημάτων κώδικα, σε αντίθεση με μια πλήρη σελίδα. Αυτή η λειτουργία είναι πολύ χρήσιμη από την άποψη των δοκιμών.
- Εμφάνιση παράδοσης επέκτασης: Σας επιτρέπει να δημιουργείτε τις δικές σας επεκτάσεις Safari, συσκευάζοντας τον κώδικα σας ανάλογα και προσθέτοντας μεταδεδομένα.
- Έναρξη καταγραφής χρονικών γραμμών: Καταγράφει έναν αριθμό στοιχείων, συμπεριλαμβανομένων των αιτημάτων δικτύου, εκτέλεσης JavaScript, απόδοση σελίδας και άλλα συμβάντα για μια περίοδο καθορισμένη από το χρήστη, όλα τα οποία μπορούν να προβληθούν μέσα στον επιθεωρητή WebKit.
- Άδειασμα Caches: Κάνοντας κλικ σε αυτήν την επιλογή διαγράφονται όλες οι αποθηκευμένες προσωρινές μνήμες στο Safari, όχι μόνο τα τυπικά αρχεία προσωρινής μνήμης ιστότοπων.
- Απενεργοποίηση προσωρινής αποθήκευσης: Με την απενεργοποίηση της προσωρινής αποθήκευσης, οι πηγές μεταφέρονται από έναν ιστότοπο κάθε φορά που γίνεται μια αίτηση πρόσβασης σε αντίθεση με τη χρήση της τοπικής μνήμης cache.
- Να επιτρέπεται η JavaScript από το πεδίο έξυπνης αναζήτησης: Απενεργοποιημένη από προεπιλογή για λόγους ασφαλείας, αυτή η λειτουργία σάς επιτρέπει να εισάγετε διευθύνσεις URL που περιέχουν JavaScript στη γραμμή διευθύνσεων του Safari.
- Αντιμετωπίστε τα πιστοποιητικά SHA-1 ως μη ασφαλή: Σύντομη για τον Αλγόριθμο Secure Hash, η λειτουργία hash SHA-1 αποδείχθηκε λιγότερο ασφαλής από ό, τι είχε αρχικά θεωρηθεί, εξ ου και η προσθήκη αυτής της επιλογής στο Safari 9.
