MacOS: Ενεργοποίηση του Web Inspector στο Safari

Εάν θέλετε να προβάλετε τον κώδικα πηγής μιας ιστοσελίδας στο Apple Safari για το macOS Sierra, θα πρέπει να ενεργοποιήσετε το εργαλείο Safari Web Inspector χρησιμοποιώντας τις παρακάτω μεθόδους.

Οι προγραμματιστές φυλλομετρητών ιστού, όπως η Apple, η Google, κ.λπ., παρέχουν ένα έτοιμο εργαλείο για να προβάλετε τους υποκείμενους κωδικούς. Οι προγραμματιστές το χρησιμοποιούν κυρίως για να αποσφαλματώσουν και να οπτικοποιήσουν τις αλλαγές που έχουν γίνει σε μια ζωντανή ιστοσελίδα χωρίς να διαταράσσουν τον πραγματικό κώδικα στον διακομιστή. Ωστόσο, αυτό το εργαλείο έχει γίνει δημοφιλές μεταξύ των δημιουργών περιεχομένου και των τεχνολογικά καταρτισμένων χρηστών του διαδικτύου που θέλουν να επεξεργαστούν μια ζωντανή ιστοσελίδα για προσωπικούς ή επαγγελματικούς λόγους. Εάν είστε ένας από αυτούς, διαβάστε το άρθρο μέχρι το τέλος για να μάθετε τα πάντα σχετικά με το Safari Web Inspector και πώς να επιθεωρήσετε ένα στοιχείο.

Περιεχόμενα

• 1 Τι είναι το Safari Web Inspector;
• 2 Πώς να ενεργοποιήσετε το Safari Web Inspector στο Safari 10 και ανώτερες εκδόσεις
• 3 Πώς να χρησιμοποιήσετε το Safari Web Inspector στο macOS
• 4 Πώς να ανοίξετε το Safari Web Inspector σε παλαιότερες εκδόσεις του macOS
  • 4.1 Safari Web Inspector: Τελικά λόγια

Τι είναι το Safari Web Inspector;

Ο Web Inspector είναι μέρος του πακέτου εργαλείων ανάπτυξης που προσφέρει η Apple στους προγραμματιστές ιστοσελίδων και εφαρμογών σε όλο τον κόσμο. Το εργαλείο είναι διαθέσιμο τόσο για macOS όσο και για iOS συσκευές. Οι προγραμματιστές μπορούν να τροποποιούν, να βελτιστοποιούν και να αποσφαλματώνουν ιστοσελίδες για να επιτύχουν την καλύτερη απόδοση για τα διαδικτυακά τους περιουσιακά στοιχεία.

Το εργαλείο Web Inspector στο Safari συγκεντρώνει τους περισσότερους πόρους της ιστοσελίδας σε μια ενιαία διεπαφή. Το εργαλείο διαχωρίζει επίσης τους πόρους και τις παραμέτρους τους σε ειδικές καρτέλες έτσι ώστε να μην αισθάνεστε κατακλυσμένοι από τόσους πολλούς κωδικούς και επιλογές. Ο Web Inspector σας παρέχει επίσης μια χρονολογική καταγραφή της μνήμης της ιστοσελίδας ώστε να μπορείτε να αποσφαλματώσετε εύκολα τη μνήμη. Επίσης, ως προγραμματιστής, μπορείτε να τροποποιήσετε και να βελτιστοποιήσετε περισσότερες από 150 δημοφιλείς ιδιότητες CSS που χρειάζεστε για να αναπτύξετε μια λειτουργική ιστοσελίδα.

Στο εργαλείο Web Inspector, έχετε τις παρακάτω καρτέλες για τους πόρους της ιστοσελίδας:

• Στοιχεία
• Κονσόλα
• Πηγές
• Δίκτυο
• Χρονικά Διαγράμματα
• Αποθήκευση
• Γραφικά
• Επίπεδα
• Έλεγχος

Πώς να ενεργοποιήσετε το Safari Web Inspector στο Safari 10 και ανώτερες εκδόσεις

Από προεπιλογή, η Apple Mac απενεργοποιεί τον Web Inspector στο Safari. Αυτό γίνεται για να αποτραπεί η περιττή ακαταστασία στη διεπαφή χρήστη του φυλλομετρητή. Ωστόσο, αν είστε προγραμματιστής, δημιουργός περιεχομένου ή έμπειρος χρήστης Mac, μπορεί να θέλετε να ενεργοποιήσετε τη δυνατότητα ακολουθώντας τα παρακάτω βήματα:

• Ανοίξτε την εφαρμογή Safari στο MacBook ή iMac σας.
• Βεβαιωθείτε ότι έχετε κάνει κλικ στον φυλλομετρητή για να εμφανιστεί το εικονίδιο Safari στην εργαλειοθήκη Mac.

• Κάντε κλικ στο Safari στην επάνω αριστερή γωνία και επιλέξτε Προτιμήσεις.
• Εναλλακτικά, μπορείτε να χρησιμοποιήσετε τη συντόμευση Command + , για να εμφανίσετε το μενού Προτιμήσεις.
• Εντός του μενού Προτιμήσεις, πρέπει να είστε στην καρτέλα Γενικά.

• Μεταβείτε στην καρτέλα Προχωρημένα.
• Λίγο κάτω από την επιλογή Προξενεία, θα πρέπει να δείτε την επιλογή Εμφάνιση μενού Ανάπτυξης στη γραμμή μενού. Τσεκάρετε το πλαίσιο.

• Τώρα, το μενού Ανάπτυξης του Safari θα εμφανιστεί στην εργαλειοθήκη Mac.

Έτσι μπορείτε να ενεργοποιήσετε τη δυνατότητα Web Inspector στον φυλλομετρητή σας Safari. Τα βήματα είναι παρόμοια για τη πιο πρόσφατη έκδοση macOS, Ventura, και παλαιότερες εκδόσεις όπως οι Monterey, Big Sur, Catalina κ.λπ., μέχρι την Jaguar.

Διαβάστε επίσης: Html 4.01

Μέχρι στιγμής, μάθατε πώς να αποκτήσετε τη δυνατότητα Web Inspector στην εφαρμογή Safari του Mac. Μάθετε παρακάτω πώς να το χρησιμοποιήσετε στο Safari για ζωντανές ιστοσελίδες:

Πώς να χρησιμοποιήσετε το Safari Web Inspector στο macOS

Βρείτε παρακάτω τα βήματα για να καλέσετε το εργαλείο Web Inspector για ανάπτυξη ιστού, δημιουργία περιεχομένου ή οποιονδήποτε άλλο σκοπό. Σε αυτό το άρθρο, δείχνω τα βήματα χρησιμοποιώντας το λειτουργικό σύστημα macOS Monterey. Ωστόσο, τα βήματα είναι αρκετά παρόμοια από τη macOS Jaguar έως τη Venture.

• Ανοίξτε το Safari και επισκεφτείτε οποιαδήποτε ιστοσελίδα θέλετε να επιθεωρήσετε.
• Υπάρχουν δύο τρόποι για να επιθεωρήσετε τους υποκείμενους κωδικούς HTML/CSS μιας ιστοσελίδας ή να κάνετε αλλαγές χρησιμοποιώντας το εργαλείο ανάπτυξης της Apple, Web Inspector. Αυτοί είναι:
  • Ανάπτυξη > Εμφάνιση Web Inspector.
  • Κάντε δεξί κλικ > Επιθεώρηση στοιχείου.
• Για να χρησιμοποιήσετε την πρώτη επιλογή, μεταβείτε στην εργαλειοθήκη Mac για τον φυλλομετρητή Safari και κάντε κλικ στο μενού Ανάπτυξη.

• Στο μενού που εμφανίζεται, κάντε κλικ στο Εμφάνιση Web Inspector. Η συντόμευση για αυτή τη δράση είναι Option + Command + I.

• Αυτό θα ανοίξει το εργαλείο Web Inspector στην κάτω μισή της οθόνης του φυλλομετρητή. Οι κωδικοί που βλέπετε ισχύουν για τη διεύθυνση URL ή τη σελίδα ιστού που αποκτήσατε.
• Εάν θέλετε να οπτικοποιήσετε τον υποκείμενο κώδικα για ένα συγκεκριμένο στοιχείο στην ιστοσελίδα χωρίς να ανοίξετε τον κώδικα για ολόκληρη την ιστοσελίδα, επιλέξτε το στοιχείο που θέλετε να επιθεωρήσετε.

• Κάντε δεξί κλικ και επιλέξτε Επιθεώρηση στοιχείου από το μενού που ανοίγει.
• Ο Web Inspector του Safari θα ανοίξει.

• Αλλά αυτή τη φορά, το Safari θα σας μεταφέρει απευθείας στον υποκείμενο κώδικα HTML ή CSS του στοιχείου που ελέγχετε.
• Σε αυτό το εργαλείο, έχετε τους κωδικούς HTML και CSS του στοιχείου της ιστοσελίδας που επιθεωρείτε.

Διαβάστε επίσης: Η Technipages εξηγεί το CSS

Πώς να ανοίξετε το Safari Web Inspector σε παλαιότερες εκδόσεις του macOS

Υποθέτοντας ότι έχετε ένα Mac παλαιότερο από την Jaguar και χρειάζεστε να χρησιμοποιήσετε το εργαλείο Web Inspector. Εάν δεν βρείτε τα παραπάνω βήματα σε εκείνο το Mac, μπορείτε να εκτελέσετε έναν απλό κώδικα για να ενεργοποιήσετε τον Web Inspector. Ιδού πώς γίνεται:

• Ανοίξτε Εφαρμογές και μεταβείτε στον φάκελο Utilities.
• Μέσα στο Χρήση, θα πρέπει να βρείτε το Terminal. Είναι η γραμμή εντολών στους υπολογιστές macOS.
• Τώρα, ανοίξτε το Terminal και πληκτρολογήστε την παρακάτω απλή εντολή:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• Πατήστε Return για να εκτελέσετε την εντολή.
• Τώρα μπορείτε να ανοίξετε μια ιστοσελίδα στο Safari και να κάνετε δεξί κλικ ή να κρατήσετε πατημένο το κουμπί του ποντικιού οπουδήποτε στη σελίδα έως ότου εμφανιστεί το μενού περιβάλλοντος.
• Εκεί, κάντε κλικ στη Επιθεώρηση στοιχείου για να δείτε τους υποκείμενους κωδικούς CSS και HTML της ιστοσελίδας.

Safari Web Inspector: Τελικά λόγια

Αυτές είναι οι μέθοδοι για να ενεργοποιήσετε τον Web Inspector στο Safari χωρίς κόπο. Μπορείτε να ακολουθήσετε τα βήματα μόνοι σας και να ξεκινήσετε με την ανάπτυξη ή τη δημιουργία περιεχομένου σε λίγα λεπτά. Μάθατε τις μεθόδους για να ενεργοποιήσετε την Επιθεώρηση στοιχείου στο Safari για τόσο νέες όσο και παλαιές εκδόσεις του macOS. Αν μου διέφυγε κάποια μέθοδος για να αποκτήσετε και να χρησιμοποιήσετε τον Web Inspector, μην διστάσετε να με ενημερώσετε αφήνοντας ένα σχόλιο παρακάτω.

Στη συνέχεια, οι καλύτερες εφαρμογές κωδικοποίησης για iPad.