Πώς να χρησιμοποιήσετε τα Εργαλεία προγραμματιστών προγράμματος περιήγησης Ιστού

2024 Συγγραφέας: Abigail Brown | [email protected]. Τελευταία τροποποίηση: 2023-12-17 06:44

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

Πέρασαν οι μέρες όπου τα μόνα εργαλεία προγραμματισμού και δοκιμής που βρέθηκαν σε ένα πρόγραμμα περιήγησης σάς επέτρεπαν να προβάλετε τον πηγαίο κώδικα μιας σελίδας και τίποτα περισσότερο. Τα σημερινά προγράμματα περιήγησης σάς επιτρέπουν να κάνετε μια πολύ βαθύτερη βουτιά κάνοντας πράγματα όπως η εκτέλεση και ο εντοπισμός σφαλμάτων αποσπασμάτων JavaScript, η επιθεώρηση και η επεξεργασία στοιχείων DOM, η παρακολούθηση της κυκλοφορίας δικτύου σε πραγματικό χρόνο καθώς η εφαρμογή ή η σελίδα σας φορτώνει για να εντοπίσετε σημεία συμφόρησης, αναλύοντας την απόδοση CSS, διασφαλίζοντας ότι ο κώδικας σας είναι δεν χρησιμοποιεί υπερβολική μνήμη ή πάρα πολλούς κύκλους CPU και πολλά άλλα.

Από μια οπτική δοκιμής, μπορείτε να αναπαράγετε τον τρόπο απόδοσης μιας εφαρμογής ή ιστοσελίδας σε διαφορετικά προγράμματα περιήγησης, καθώς και σε διαφορετικές συσκευές και πλατφόρμες μέσω της μαγείας του αποκριτικού σχεδιασμού και των ενσωματωμένων προσομοιωτών. Το καλύτερο μέρος είναι ότι μπορείτε να τα κάνετε όλα αυτά χωρίς να χρειάζεται να αφήσετε το πρόγραμμα περιήγησής σας!

Τα παρακάτω σεμινάρια σας καθοδηγούν στον τρόπο πρόσβασης σε αυτά τα εργαλεία προγραμματιστών σε πολλά δημοφιλή προγράμματα περιήγησης ιστού.

Google Chrome

Τα εργαλεία προγραμματιστών του Chrome σάς επιτρέπουν να επεξεργάζεστε και να διορθώνετε σφάλματα, να ελέγχετε μεμονωμένα στοιχεία για να εκθέσετε προβλήματα απόδοσης, να προσομοιώνετε διαφορετικές οθόνες συσκευών, συμπεριλαμβανομένων εκείνων που διαθέτουν Android ή iOS, και να εκτελείτε πολλές άλλες χρήσιμες λειτουργίες.

1. Επιλέξτε το κύριο μενού του Chrome, που επισημαίνεται με τρεις οριζόντιες γραμμές και βρίσκεται στην επάνω δεξιά γωνία του προγράμματος περιήγησης.

2. Όταν εμφανιστεί το αναπτυσσόμενο μενού, τοποθετήστε το δείκτη του ποντικιού πάνω από την επιλογή Περισσότερα εργαλεία.

   

3. Θα πρέπει τώρα να εμφανιστεί ένα υπομενού. Επιλέξτε την επιλογή με την ένδειξη Developer tools. Μπορείτε επίσης να χρησιμοποιήσετε την ακόλουθη συντόμευση πληκτρολογίου στη θέση αυτού του στοιχείου μενού: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. Η διεπαφή του Chrome Developer Tools θα πρέπει τώρα να εμφανίζεται, όπως φαίνεται σε αυτό το παράδειγμα στιγμιότυπο οθόνης. Ανάλογα με την έκδοση του Chrome που διαθέτετε, η αρχική διάταξη που βλέπετε μπορεί να είναι ελαφρώς διαφορετική από αυτή που παρουσιάζεται εδώ. Το κύριο κέντρο των εργαλείων προγραμματιστή, που συνήθως βρίσκεται είτε στο κάτω μέρος είτε στη δεξιά πλευρά της οθόνης, περιέχει τις ακόλουθες καρτέλες.

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

   • Μνήμη: Παρακολουθήστε και καταγράψτε τη χρήση της μνήμης σε μια ιστοσελίδα. Μπορείτε να δείτε πόσο βαρύ είναι το JavaScript στον ιστότοπό σας.
   • Ασφάλεια: Επισημαίνει προβλήματα πιστοποιητικών και άλλα ζητήματα που σχετίζονται με την ασφάλεια με την ενεργή σελίδα ή εφαρμογή.
   • Εφαρμογή: Επιθεωρήστε τους πόρους που χρησιμοποιούνται από μια εφαρμογή Ιστού. Λάβετε μια πλήρη ανάλυση του τι χρησιμοποιείται.
   • Audits: Προσφέρει τρόπους βελτιστοποίησης του χρόνου φόρτωσης μιας σελίδας ή εφαρμογής και της γενικής απόδοσης.

   

6. Λειτουργία συσκευής σάς επιτρέπει να προβάλλετε την ενεργή σελίδα σε έναν προσομοιωτή που την αποδίδει σχεδόν ακριβώς όπως θα εμφανιζόταν σε μία από τις δώδεκα συσκευές, συμπεριλαμβανομένων πολλών γνωστών Android και μοντέλα iOS όπως το iPad, το iPhone και το Samsung Galaxy. Σας δίνεται επίσης η δυνατότητα να μιμηθείτε προσαρμοσμένες αναλύσεις οθόνης ώστε να ταιριάζουν στις ιδιαίτερες ανάγκες ανάπτυξης ή δοκιμών σας.

   Για να ενεργοποιήσετε και να απενεργοποιήσετε Λειτουργία συσκευής, επιλέξτε το εικονίδιο κινητού τηλεφώνου που βρίσκεται ακριβώς στα αριστερά του Στοιχεία καρτέλα.

   

7. Μπορείτε επίσης να προσαρμόσετε την εμφάνιση και την αίσθηση των εργαλείων προγραμματιστή επιλέγοντας πρώτα το κουμπί μενού που αντιπροσωπεύεται από τρεις κάθετα τοποθετημένες κουκκίδες και βρίσκεται στην άκρα δεξιά πλευρά των προαναφερθέντων καρτελών.

   Μέσα από αυτό το αναπτυσσόμενο μενού, μπορείτε να επανατοποθετήσετε το dock, να εμφανίσετε ή να αποκρύψετε διαφορετικά εργαλεία, καθώς και να εκκινήσετε πιο προηγμένα στοιχεία, όπως έναν επιθεωρητή συσκευών. Θα διαπιστώσετε ότι η ίδια η διεπαφή των εργαλείων dev είναι εξαιρετικά προσαρμόσιμη μέσω των ρυθμίσεων που βρίσκονται σε αυτήν την ενότητα.

   

Mozilla Firefox

Η ενότητα προγραμματιστών ιστού του Firefox περιλαμβάνει εργαλεία για σχεδιαστές, προγραμματιστές και δοκιμαστές, όπως πρόγραμμα επεξεργασίας στυλ και σταγονόμετρο στόχευσης pixel.

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

2. Όταν εμφανιστεί το αναπτυσσόμενο μενού, επιλέξτε Web Developer.

   

3. Το Μενού προγραμματιστή ιστού θα πρέπει τώρα να εμφανίζεται, το οποίο περιέχει τις ακόλουθες επιλογές. Θα παρατηρήσετε ότι τα περισσότερα στοιχεία μενού έχουν συντομεύσεις πληκτρολογίου που σχετίζονται με αυτά.

   • Εργαλεία εναλλαγής: Εμφανίζει ή αποκρύπτει τη διεπαφή εργαλείων προγραμματιστή, που συνήθως βρίσκεται στο κάτω μέρος του παραθύρου του προγράμματος περιήγησης. Συντόμευση πληκτρολογίου: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Σας επιτρέπει να επιθεωρήσετε ή/και να τροποποιήσετε τον κώδικα CSS και HTML στην ενεργή σελίδα καθώς και σε μια φορητή συσκευή μέσω απομακρυσμένου εντοπισμού σφαλμάτων. Συντόμευση πληκτρολογίου: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Κονσόλα Ιστού: Σας επιτρέπει να εκτελέσετε εκφράσεις JavaScript εντός της ενεργής σελίδας καθώς και να ελέγξετε ένα διαφορετικό σύνολο καταγεγραμμένων δεδομένων, συμπεριλαμβανομένων προειδοποιήσεων ασφαλείας, αιτημάτων δικτύου, μηνυμάτων CSS και άλλα. Συντόμευση πληκτρολογίου: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: Το JavaScript Debugger σάς επιτρέπει να εντοπίζετε και να διορθώνετε ελαττώματα ορίζοντας σημεία διακοπής, επιθεωρώντας κόμβους DOM, εξωτερικές πηγές μαύρης πυγμαχίας και πολλά άλλα. Όπως συμβαίνει με το Inspector, αυτή η δυνατότητα υποστηρίζει επίσης απομακρυσμένο εντοπισμό σφαλμάτων. Συντόμευση πληκτρολογίου: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Επεξεργαστής στυλ: Σας επιτρέπει να δημιουργείτε νέα φύλλα στυλ και να τα ενσωματώνετε με την ενεργή ιστοσελίδα ή να επεξεργάζεστε υπάρχοντα φύλλα και να δοκιμάζετε πώς αποδίδονται οι αλλαγές σας σε ένα πρόγραμμα περιήγησης με ένα μόνο κλικ. Συντόμευση πληκτρολογίου: Mac OS X, Windows (SHIFT+F7)
   • Performance: Παρέχει μια λεπτομερή ανάλυση της απόδοσης δικτύου της ενεργής σελίδας, των δεδομένων ρυθμού καρέ, του χρόνου και της κατάστασης εκτέλεσης JavaScript, του χρώματος που αναβοσβήνει και πολλά άλλα. Συντόμευση πληκτρολογίου: Mac OS X, Windows (SHIFT+F5)
   • Δίκτυο: Εμφανίζει κάθε αίτημα δικτύου που ξεκίνησε από το πρόγραμμα περιήγησης μαζί με την αντίστοιχη μέθοδο, τον τομέα προέλευσης, τον τύπο, το μέγεθος και τον χρόνο που έχει περάσει. Συντόμευση πληκτρολογίου: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Ρίξτε μια ματιά στην κρυφή μνήμη και τα cookie που αποθηκεύονται από έναν ιστότοπο. Συντόμευση πληκτρολογίου: (SHIFT+F9)
   • Γραμμή εργαλείων προγραμματιστών: Ανοίγει έναν διαδραστικό διερμηνέα γραμμής εντολών. Εισαγάγετε help στον διερμηνέα για μια λίστα με όλες τις διαθέσιμες εντολές και τη σωστή σύνταξη τους. Συντόμευση πληκτρολογίου: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Παρέχει τη δυνατότητα δημιουργίας και εκτέλεσης εφαρμογών Ιστού μέσω μιας πραγματικής συσκευής που εκτελεί Firefox OS ή μέσω του Προσομοιωτή του Firefox OS. Συντόμευση πληκτρολογίου: Mac OS X, Windows (SHIFT+F8)
   • Κονσόλα προγράμματος περιήγησης: Παρέχει την ίδια λειτουργικότητα με την Κονσόλα Ιστού (δείτε παραπάνω). Ωστόσο, όλα τα δεδομένα που επιστρέφονται αφορούν ολόκληρη την εφαρμογή Firefox (συμπεριλαμβανομένων των επεκτάσεων και των λειτουργιών σε επίπεδο προγράμματος περιήγησης) σε αντίθεση με μόνο την ενεργή ιστοσελίδα. Συντόμευση πληκτρολογίου: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Προβολή αποκριτικής σχεδίασης: Σας επιτρέπει να προβάλλετε άμεσα μια ιστοσελίδα σε διαφορετικές αναλύσεις, διατάξεις και μεγέθη οθόνης για να μιμηθείτε πολλές συσκευές, συμπεριλαμβανομένων tablet και smartphone. Συντόμευση πληκτρολογίου: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: Εμφανίζει τον εξαγωνικό χρωματικό κωδικό για μεμονωμένα επιλεγμένα pixel.
   • Scratchpad: Το Scratchpad σάς επιτρέπει να γράφετε, να επεξεργάζεστε, να ενσωματώνετε και να εκτελείτε αποσπάσματα κώδικα JavaScript μέσα από ένα αναδυόμενο παράθυρο του Firefox. Ανοίξτε ένα διαδραστικό έγγραφο JavaScript που σας επιτρέπει να γράφετε κώδικα και να τον δοκιμάσετε σε έναν ιστότοπο. Συντόμευση πληκτρολογίου: (SHIFT+F4)
   • Service Workers: Εντοπισμός σφαλμάτων των εργαζομένων υπηρεσιών στην εφαρμογή ιστού σας. Λάβετε λεπτομερείς πληροφορίες για την απόδοση και τα λάθη τους.
   • Πηγή σελίδας: Το αρχικό εργαλείο προγραμματιστή που βασίζεται σε πρόγραμμα περιήγησης, αυτή η επιλογή απλώς εμφανίζει τον διαθέσιμο πηγαίο κώδικα για την ενεργή σελίδα. Συντόμευση πληκτρολογίου: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Λήψη περισσότερων εργαλείων: Ανοίγει τη συλλογή Web Developer's Toolbox στον επίσημο ιστότοπο πρόσθετων της Mozilla, που διαθέτει περίπου δώδεκα δημοφιλείς επεκτάσεις όπως ως Firebug και Greasemonkey.

   

Microsoft Edge/Internet Explorer

Συνήθως αναφέρεται ως το F12 Developer Tools, ένας φόρος τιμής στη συντόμευση πληκτρολογίου που έχει ξεκινήσει τη διεπαφή από προηγούμενες εκδόσεις του Internet Explorer, το σύνολο εργαλείων dev στον IE11 και τον Microsoft Edge έχει διανύσει πολύ δρόμο από την έναρξή του, προσφέροντας μια πολύ εύχρηστη ομάδα οθονών, προγραμμάτων εντοπισμού σφαλμάτων, εξομοιωτών και μεταγλωττιστών on-the-fly.

Η Microsoft δεν υποστηρίζει πλέον τον Internet Explorer και συνιστά την ενημέρωση στο νεότερο πρόγραμμα περιήγησης Edge. Μεταβείτε στον ιστότοπό τους για λήψη της πιο πρόσφατης έκδοσης.

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

   

2. Όταν εμφανιστεί το αναπτυσσόμενο μενού, επιλέξτε την επιλογή με την ένδειξη Εργαλεία προγραμματιστή.

   

3. Η διεπαφή ανάπτυξης θα πρέπει τώρα να εμφανίζεται, συνήθως στο κάτω μέρος του παραθύρου του προγράμματος περιήγησης. Τα ακόλουθα εργαλεία είναι διαθέσιμα, καθένα προσβάσιμα κάνοντας κλικ στην αντίστοιχη επικεφαλίδα της καρτέλας τους ή χρησιμοποιώντας τη συνοδευτική συντόμευση πληκτρολογίου.

   

   • DOM Explorer: Σας επιτρέπει να επεξεργάζεστε φύλλα στυλ και HTML στην ενεργή σελίδα, αποδίδοντας τα τροποποιημένα αποτελέσματα καθώς προχωράτε. Χρησιμοποιεί τη λειτουργικότητα IntelliSense για την αυτόματη συμπλήρωση κώδικα όπου ισχύει. Συντόμευση πληκτρολογίου: (CTRL+1)
   • Κονσόλα: Παρέχει τη δυνατότητα υποβολής πληροφοριών εντοπισμού σφαλμάτων, συμπεριλαμβανομένων μετρητών, χρονόμετρων, ιχνών και προσαρμοσμένων μηνυμάτων μέσω ενός ενσωματωμένου API. Επίσης, σας επιτρέπει να εισάγετε κώδικα σε μια ενεργή ιστοσελίδα και να τροποποιείτε τις τιμές που έχουν εκχωρηθεί σε μεμονωμένες μεταβλητές σε πραγματικό χρόνο. Συντόμευση πληκτρολογίου: (CTRL+2)
   • Debugger: Σας επιτρέπει να ορίσετε σημεία διακοπής και να διορθώσετε τον κωδικό σας κατά την εκτέλεσή του, γραμμή προς γραμμή εάν χρειάζεται. Συντόμευση πληκτρολογίου: (CTRL+3)
   • Δίκτυο: Παραθέτει κάθε αίτημα δικτύου που ξεκίνησε από το πρόγραμμα περιήγησης κατά τη φόρτωση και την εκτέλεση της σελίδας, συμπεριλαμβανομένων των λεπτομερειών πρωτοκόλλου, του τύπου περιεχομένου, της χρήσης εύρους ζώνης και πολλά άλλα. Συντόμευση πληκτρολογίου: (CTRL+4)
   • Performance: Αναφέρει λεπτομερώς τους ρυθμούς καρέ, τη χρήση της CPU και άλλες μετρήσεις που σχετίζονται με την απόδοση για να σας βοηθήσουν να επιταχύνετε τους χρόνους φόρτωσης της σελίδας και άλλες δραστηριότητες. Συντόμευση πληκτρολογίου: (CTRL+5)
   • Μνήμη: Σας βοηθά να απομονώσετε και να διορθώσετε πιθανές διαρροές μνήμης στην τρέχουσα ιστοσελίδα, εμφανίζοντας ένα χρονοδιάγραμμα χρήσης μνήμης μαζί με στιγμιότυπα από διαφορετικά χρονικά διαστήματα. Συντόμευση πληκτρολογίου: (CTRL+6)
   • Εξομοίωση: Σας δείχνει πώς θα αποδίδεται η ενεργή σελίδα σε διάφορες αναλύσεις και μεγέθη οθόνης, προσομοιώνοντας smartphone, tablet και άλλες συσκευές. Παρέχει επίσης τη δυνατότητα τροποποίησης του παράγοντα χρήστη και του προσανατολισμού της σελίδας, καθώς και την προσομοίωση διαφορετικών γεωγραφικών τοποθεσιών εισάγοντας γεωγραφικό πλάτος και μήκος. Συντόμευση πληκτρολογίου: (CTRL+7)

4. Για να εμφανίσετε την Κονσόλα ενώ βρίσκεστε σε οποιοδήποτε από τα άλλα εργαλεία, πατήστε το τετράγωνο κουμπί με μια δεξιά αγκύλη στο εσωτερικό της, που βρίσκεται στο την επάνω δεξιά γωνία της διεπαφής εργαλείων ανάπτυξης.

   

5. Για να αποσυνδέσετε τη διεπαφή των εργαλείων προγραμματιστή ώστε να γίνει ένα ξεχωριστό παράθυρο, επιλέξτε τα δύο παραλληλόγραμμα σε σειρά ή χρησιμοποιήστε την ακόλουθη συντόμευση πληκτρολογίου: CTRL+P. Μπορείτε να επανατοποθετήσετε τα εργαλεία στην αρχική τους θέση πατώντας CTRL+P δεύτερη φορά.

   

Apple Safari (μόνο Mac)

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

1. Επιλέξτε Safari στο μενού του προγράμματος περιήγησης, που βρίσκεται στο επάνω μέρος της οθόνης σας. Όταν εμφανιστεί το αναπτυσσόμενο μενού, επιλέξτε Preferences. Μπορείτε επίσης να χρησιμοποιήσετε την ακόλουθη συντόμευση πληκτρολογίου στη θέση αυτού του στοιχείου μενού: COMMAND+COMMA(,)

   

2. Η διεπαφή Προτιμήσεις του Safari θα πρέπει τώρα να εμφανίζεται, επικαλύπτοντας το παράθυρο του προγράμματος περιήγησής σας. Επιλέξτε το Εικονίδιο για προχωρημένους, που βρίσκεται στη δεξιά πλευρά της κεφαλίδας.

   

3. Οι προτιμήσεις Σύνθετες θα πρέπει τώρα να είναι ορατές. Στο κάτω μέρος αυτής της οθόνης υπάρχει μια επιλογή με την ένδειξη Εμφάνιση μενού ανάπτυξης στη γραμμή μενού, συνοδευόμενη από ένα πλαίσιο ελέγχου. Εάν δεν εμφανίζεται κανένα σημάδι επιλογής στο πλαίσιο, κάντε κλικ σε αυτό μία φορά για να το τοποθετήσετε εκεί.

   

4. Κλείστε τη διεπαφή Preferences.

5. Θα πρέπει τώρα να παρατηρήσετε μια νέα επιλογή στο μενού του προγράμματος περιήγησης με το όνομα Develop, που βρίσκεται μεταξύ Σελιδοδεικτών και Παράθυρο. Κάντε κλικ σε αυτό το στοιχείο μενού. Θα πρέπει τώρα να εμφανιστεί ένα αναπτυσσόμενο μενού, το οποίο θα περιέχει τις ακόλουθες επιλογές.

   • Άνοιγμα σελίδας με: Σας επιτρέπει να ανοίξετε την ενεργή ιστοσελίδα σε ένα από τα άλλα προγράμματα περιήγησης που είναι εγκατεστημένα αυτήν τη στιγμή στο Mac σας.
   • User Agent: Σας επιτρέπει να επιλέξετε από δώδεκα προκαθορισμένες τιμές παράγοντα χρήστη, συμπεριλαμβανομένων πολλών εκδόσεων Chrome, Firefox και Internet Explorer, καθώς και να ορίσετε το δικό σας προσαρμοσμένο συμβολοσειρά.
   • Είσοδος σε λειτουργία αποκριτικής σχεδίασης: Αποδίδει την τρέχουσα σελίδα όπως θα εμφανιζόταν σε διάφορες συσκευές και σε διαφορετικές αναλύσεις οθόνης.
   • Εμφάνιση Web Inspector: Εκκινεί την κύρια διεπαφή για τα εργαλεία προγραμματισμού του Safari, που συνήθως τοποθετείται στο κάτω μέρος της οθόνης του προγράμματος περιήγησής σας και περιέχει τις ακόλουθες ενότητες: Στοιχεία, Δίκτυο, Πόροι, Χρονολογίες, Debugger, Storage, Console.
   • Εμφάνιση κονσόλας σφαλμάτων: Εκκινεί επίσης τη διεπαφή εργαλείων dev, απευθείας στην καρτέλα Κονσόλα, η οποία εμφανίζει σφάλματα, προειδοποιήσεις και άλλα με δυνατότητα αναζήτησης δεδομένα καταγραφής.
   • Εμφάνιση πηγής σελίδας: Ανοίγει την καρτέλα Πόροι, η οποία εμφανίζει τον πηγαίο κώδικα για την ενεργή σελίδα που ταξινομείται βάσει του εγγράφου.
   • Εμφάνιση πόρων σελίδας: Εκτελεί την ίδια λειτουργία με την επιλογή Εμφάνιση πηγής σελίδας.
   • Show Snippet Editor: Ανοίγει ένα νέο παράθυρο όπου μπορείτε να εισαγάγετε κώδικα CSS και HTML, κάνοντας προεπισκόπηση της εξόδου του αμέσως.
   • Show Extension Builder: Παρέχει τη δυνατότητα δημιουργίας ή επεξεργασίας επεκτάσεων Safari με CSS, HTML και JavaScript.
   • Εμφάνιση εγγραφής χρονολογίου: Ανοίγει την καρτέλα Χρονολογίες και αρχίζει να εμφανίζει αιτήματα δικτύου, διάταξη και πληροφορίες απόδοσης καθώς και εκτέλεση JavaScript σε πραγματικό χρόνο.
   • Empty Caches: Διαγράφει ολόκληρη την προσωρινή μνήμη που είναι αποθηκευμένη αυτήν τη στιγμή στον σκληρό σας δίσκο.
   • Απενεργοποίηση προσωρινής μνήμης: Διακόπτει την προσωρινή αποθήκευση του Safari, έτσι ώστε όλο το περιεχόμενο να ανακτάται από τον διακομιστή με κάθε φόρτωση σελίδας.
   • Απενεργοποίηση εικόνων: Αποτρέπει την απόδοση εικόνων σε όλες τις ιστοσελίδες.
   • Απενεργοποίηση στυλ: Αγνοεί τις ιδιότητες CSS όταν φορτώνεται μια σελίδα.
   • Απενεργοποίηση JavaScript: Περιορίζει την εκτέλεση JavaScript σε όλες τις σελίδες.
   • Απενεργοποίηση επεκτάσεων: Απαγορεύει την εκτέλεση όλων των εγκατεστημένων επεκτάσεων εντός του προγράμματος περιήγησης.
   • Disable Site-specific Hacks: Εάν το Safari έχει τροποποιηθεί για να χειρίζεται ρητά ζητήματα που αφορούν την ενεργή ιστοσελίδα, αυτή η επιλογή θα αποκλείσει αυτές τις αλλαγές, έτσι ώστε η σελίδα φορτώνει όπως θα είχε πριν από την εισαγωγή αυτών των τροποποιήσεων.
   • Απενεργοποίηση τοπικών περιορισμών αρχείων: Επιτρέπει στο πρόγραμμα περιήγησης να έχει πρόσβαση σε αρχεία στους τοπικούς σας δίσκους, μια ενέργεια που περιορίζεται από προεπιλογή για λόγους ασφαλείας.
   • Απενεργοποίηση περιορισμών πολλαπλής προέλευσης: Αυτοί οι περιορισμοί τίθενται από προεπιλογή για την αποτροπή XSS και άλλους πιθανούς κινδύνους. Ωστόσο, συχνά χρειάζεται να απενεργοποιηθούν προσωρινά για λόγους ανάπτυξης.
   • Να επιτρέπεται η JavaScript από το Έξυπνο Πεδίο Αναζήτησης: Όταν είναι ενεργοποιημένο, παρέχει τη δυνατότητα εισαγωγής διευθύνσεων URL με javascript: ενσωματωμένη απευθείας στη γραμμή διευθύνσεων.
   • Θεωρήστε τα πιστοποιητικά SHA-1 ως ανασφαλή: Τα πιστοποιητικά SSL που χρησιμοποιούν τον αλγόριθμο SHA-1 θεωρούνται ευρέως ως ξεπερασμένα και ευάλωτα.