Σε αυτόν τον οδηγό, θα ήθελα να σας δώσω μια εις βάθος ματιά στον τρόπο χρήσης των εργαλείων ανάπτυξης του Safari. Παρόλο που τα εργαλεία προγραμματιστών του Safari έχουν κάποιες διαφορές σε σχέση με αυτά του Chrome και του Firefox, η βασική αρχή παραμένει η ίδια. Θα μάθετε πώς να ενεργοποιείτε τα εργαλεία προγραμματιστή, να χρησιμοποιείτε τις διάφορες περιοχές και λειτουργίες και να εφαρμόζετε βασικές διαδικασίες εντοπισμού σφαλμάτων. Ας ξεκινήσουμε με τις πιο σημαντικές γνώσεις.
Οι σημαντικότερες διαπιστώσεις
- Τα Εργαλεία προγραμματιστή στο Safari δεν είναι τόσο εύκολα προσβάσιμα όσο στα άλλα προγράμματα περιήγησης, καθώς πρέπει να ενεργοποιηθούν μέσω των ρυθμίσεων.
- Η διεπαφή χρήστη και τα χαρακτηριστικά των Εργαλείων ανάπτυξης είναι παρόμοια από άλλα προγράμματα περιήγησης, αλλά οι συγκεκριμένες υλοποιήσεις διαφέρουν.
- Η αποσφαλμάτωση σε συσκευές iOS είναι δυνατή με το Safari με σύνδεση της συσκευής μέσω USB.
Οδηγίες βήμα προς βήμα
1. Ενεργοποιήστε τα εργαλεία προγραμματιστή στο Safari
Για να ενεργοποιήσετε τα Εργαλεία προγραμματιστή στο Safari, πρέπει να προσαρμόσετε τις ρυθμίσεις του Safari. Εκκινήστε το Safari και μεταβείτε στη γραμμή μενού. Επιλέξτε "Safari" και στη συνέχεια "Προτιμήσεις".
Μεταβείτε στην καρτέλα "Για προχωρημένους" στην άκρη δεξιά. Εκεί θα βρείτε την επιλογή "Εμφάνιση δυνατοτήτων ανάπτυξης για προγραμματιστές ιστού". Ενεργοποιήστε αυτή την επιλογή για να ενεργοποιήσετε τα εργαλεία ανάπτυξης.
2. Πρόσβαση στα εργαλεία ανάπτυξης
Μόλις ενεργοποιηθούν τα Εργαλεία ανάπτυξης, μπορείτε να τα ανοίξετε μέσω του μενού "Ανάπτυξη" στη γραμμή μενού ή χρησιμοποιώντας ορισμένους συνδυασμούς πλήκτρων. Η άμεση πρόσβαση μέσω των πλήκτρων F12 ή Alt-Cmd-I δεν λειτουργεί, αλλά μπορείτε, για παράδειγμα, να κάνετε δεξί κλικ στο στοιχείο και να επιλέξετε "Examine element".
Μπορείτε επίσης να χρησιμοποιήσετε το συνδυασμό πλήκτρων Cmd+Option+C για να ανοίξετε την κονσόλα και να μεταβείτε μπρος-πίσω μεταξύ διαφορετικών προβολών.
3. Πλοήγηση μέσω των εργαλείων ανάπτυξης
Παρόλο που το περιβάλλον εργασίας χρήστη των Εργαλείων ανάπτυξης μοιάζει με αυτό που έχετε συνηθίσει από άλλα προγράμματα περιήγησης, έχουν κάποιες ιδιαίτερες διαφορές. Στην αριστερή πλαϊνή μπάρα, μπορείτε να εναλλάσσεστε μεταξύ των καρτελών "Στοιχεία", "Κονσόλα", "Πηγές", "Δίκτυο" και άλλων.
Εδώ μπορείτε να μάθετε περισσότερα για τα στοιχεία του ιστότοπου για να δείτε και να επεξεργαστείτε τα στυλ και τις διατάξεις τους. Μπορείτε να επεξεργαστείτε κάθε στυλ κάνοντας απλώς κλικ στους αντίστοιχους κανόνες CSS.
4. Εργασία με την κονσόλα
Η κονσόλα στο Safari σας επιτρέπει να εκτελείτε κώδικα JavaScript και να εμφανίζετε τα επιθυμητά αποτελέσματα. Μια συναρπαστική πτυχή είναι ότι η μορφοποίηση των εξόδων διαφέρει εδώ. Το πρώτο όρισμα εξάγεται ως κείμενο, ενώ όλα τα επόμενα ορίσματα εμφανίζονται ως αντικείμενα JavaScript.
Εάν εξάγετε πρόσθετα μηνύματα καταγραφής, βεβαιωθείτε ότι η εμφάνιση δεν έχει κενά μεταξύ των επιμέρους ορίων, αλλά διαχωρίζεται με παύλες. Αυτό μπορεί να είναι σημαντικό για την αποφυγή παρεξηγήσεων κατά τη διάρκεια της αποσφαλμάτωσης.
5. Ορίστε τον πηγαίο κώδικα και τα σημεία διακοπής
Στην καρτέλα "Πηγές", μπορείτε να δείτε τα πρωτότυπα αρχεία και τα μεταγλωττισμένα αρχεία του ιστότοπού σας. Είναι επίσης δυνατό να ορίσετε εδώ σημεία διακοπής για να διευκολύνετε την αποσφαλμάτωση. Για να το κάνετε αυτό, απλώς κάντε κλικ στην αντίστοιχη γραμμή κώδικα.
Μην ξεχνάτε να χρησιμοποιείτε τα διάφορα στοιχεία ελέγχου για να διευκολύνετε το βηματισμό στον κώδικα. Στο Safari, η συντόμευση για το βηματισμό είναι διαφορετική- χρησιμοποιήστε συγκεκριμένα εικονίδια αντ' αυτού.
6. Εκτελέστε αναλύσεις δικτύου
Η καρτέλα "Δίκτυο" σας παρέχει ολοκληρωμένες πληροφορίες σχετικά με όλες τις αιτήσεις που πραγματοποιεί η σελίδα σας κατά τη διάρκεια της φόρτωσής της. Εδώ μπορείτε να δείτε τα αιτήματα που αποστέλλονται και λαμβάνονται, καθώς και τις επικεφαλίδες και τις προεπισκοπήσεις τους.
Ένα ενδιαφέρον χαρακτηριστικό εδώ είναι η διάκριση μεταξύ κεφαλίδων και χρονομετρήσεων, η οποία σας δίνει μια βαθύτερη εικόνα της απόδοσης του ιστότοπού σας.
7. Χρησιμοποιήστε μετρήσεις επιδόσεων και χρονοδιαγράμματα
Στην καρτέλα "Χρονοδιαγράμματα", μπορείτε να πραγματοποιήσετε εκτεταμένες αναλύσεις επιδόσεων και να κάνετε καταγραφές για να κατανοήσετε καλύτερα την ταχύτητα και τις διεργασίες στον ιστότοπό σας.
Αυτή η λειτουργία λειτουργεί με παρόμοιο τρόπο με τα προφίλ επιδόσεων σε άλλα προγράμματα περιήγησης, αλλά ίσως χρειαστεί να συνηθίσετε κάποιες διαφορές στην εμφάνιση και την ονομασία.
8 Αποσφαλμάτωση σε κινητές συσκευές
Ένα ιδιαίτερο χαρακτηριστικό των εργαλείων Safari Developer Tools είναι η δυνατότητα αποσφαλμάτωσης ιστότοπων στο iPhone ή το iPad. Συνδέστε τη συσκευή σας μέσω USB και ενεργοποιήστε τις αντίστοιχες επιλογές εντοπισμού σφαλμάτων στις ρυθμίσεις της συσκευής.
Στη συνέχεια, μεταβείτε στο μενού "Develop" και επιλέξτε τη συνδεδεμένη συσκευή σας για να αποκτήσετε πρόσβαση στα ανοιχτά παράθυρα και τα εργαλεία Developer Tools τους.
Περίληψη
Σε αυτόν τον αναλυτικό οδηγό, μάθατε πώς να ενεργοποιείτε τα Εργαλεία Προγραμματιστή του Safari, να χρησιμοποιείτε τις διάφορες λειτουργίες και καρτέλες και να εκτελείτε αποσφαλμάτωση σε κινητές συσκευές. Οι περισσότερες λειτουργίες είναι παρόμοιες με τα εργαλεία σε άλλα προγράμματα περιήγησης, αλλά υπάρχουν συγκεκριμένες διαφορές, ειδικά στο περιβάλλον εργασίας χρήστη και στις συντομεύσεις. Μόλις εξοικειωθείτε με αυτά, η αποσφαλμάτωση στο Safari θα είναι παιχνιδάκι.
Συχνές ερωτήσεις
Πώς ενεργοποιώ τα εργαλεία ανάπτυξης στο Safari;Μεταβείτε στις ρυθμίσεις του Safari στην ενότητα "Για προχωρημένους" και ενεργοποιήστε την επιλογή "Εμφάνιση δυνατοτήτων ανάπτυξης για προγραμματιστές ιστού".
Πώς μπορώ να ανοίξω την κονσόλα στο Safari;Μπορείτε να ανοίξετε την κονσόλα με το συνδυασμό πλήκτρων Cmd+Option+C ή κάνοντας κλικ στην επιλογή "Explore item" στο μενού περιβάλλοντος.
Ποιες είναι οι διαφορές στην κονσόλα του Safari σε σχέση με άλλους φυλλομετρητές; Στο Safari, το πρώτο όρισμα εξάγεται ως κείμενο και τα επόμενα ορίσματα εξάγονται ως αντικείμενα JavaScript και δεν χρησιμοποιείται κενό μεταξύ των εξόδων.
Μπορώ να κάνω αποσφαλμάτωση στο iPhone μου με το Safari;Ναι, συνδέοντας το iPhone σας μέσω USB και ενεργοποιώντας τις επιλογές αποσφαλμάτωσης, μπορείτε να κάνετε αποσφαλμάτωση ιστοσελίδων στο iPhone σας.
Υπάρχει η ίδια ανάλυση επιδόσεων στο Safari όπως και στο Chrome;Ναι, η λειτουργία χρονογραμμής στο Safari επιτρέπει παρόμοιες αναλύσεις επιδόσεων, αλλά η εμφάνιση μπορεί να είναι διαφορετική.
