Πώς να επιθεωρήσετε στοιχεία σε Mac, Windows, iPhone και iPad

Οι προγραμματιστές και οι σχεδιαστές διεπαφής χρήστη χρησιμοποιούν τη λειτουργία Inspect Element για να τροποποιούν ιστότοπους στο διαδίκτυο χωρίς να αλλάζουν τον πηγαίο κώδικα. Πώς όμως να επιθεωρήσετε στοιχεία χωρίς να κάνετε μάθημα ανάπτυξης Ιστού;

Το Inspect Element είναι ένα εύχρηστο εργαλείο προγραμματιστή που βγαίνει από το κουτί με δημοφιλή προγράμματα περιήγησης ιστού. Απλώς πρέπει να ξέρετε πώς να αναπτύξετε το εργαλείο με μερικά κλικ κατά την περιήγηση σε ιστότοπους.

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

Βρείτε παρακάτω έναν συνοπτικό οδηγό βήμα προς βήμα για να μάθετε πώς να επιθεωρείτε τα στοιχεία χωρίς κόπο.

Τι είναι το στοιχείο επιθεώρησης;

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

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

Ακολουθούν μερικοί δημιουργικοί τρόποι για να το χρησιμοποιήσετε:

• Πρέπει να τραβήξετε ένα στιγμιότυπο οθόνης από έναν ιστότοπο και τα κείμενα στην εικόνα σας προβληματίζουν. Χρησιμοποιήστε το εργαλείο Inspect Element για να διαγράψετε αυτά τα κείμενα.
• Θέλετε να κάνετε φάρσα στους φίλους σας δείχνοντάς τους το όνομά σας στους New York Times ή στην Washington Post. Το Inspect Element είναι ο καλύτερος τρόπος για να το κάνετε αυτό.
• Δοκιμάστε τους κωδικούς εντοπισμού σφαλμάτων σε ιστότοπους εφαρμόζοντάς τους σε πραγματικό χρόνο χρησιμοποιώντας το εργαλείο Inspect Element. Εάν λειτουργεί, μπορείτε να αλλάξετε τον πηγαίο κώδικα υποστήριξης.
• Ως έμπορος ψηφιακού μάρκετινγκ, μπορείτε να αποκαλύψετε τις λέξεις-κλειδιά των ανταγωνιστών, τους τίτλους SEO, τις μετα-ετικέτες κ.λπ., χρησιμοποιώντας αυτό το πανίσχυρο εργαλείο ανάπτυξης ιστού.

Πώς να επιθεωρήσετε στοιχεία στα Windows

Η χρήση του εργαλείου Inspect Element στα Windows είναι γελοία εύκολη. Βρείτε παρακάτω έναν αναλυτικό οδηγό για να επιθεωρήσετε στοιχεία χρησιμοποιώντας διάφορα προγράμματα περιήγησης ιστού στα Windows:

Εργαλείο επιθεώρησης Google Chrome

Πώς να επιθεωρήσετε στοιχεία στο πρόγραμμα περιήγησης Windows Chrome

• Όταν χρησιμοποιείτε το Google Chrome , κάντε δεξί κλικ οπουδήποτε σε έναν ιστότοπο.
• Θα εμφανιστεί το μενού περιβάλλοντος με το δεξί κλικ.
• Στο κάτω μέρος, θα δείτε Επιθεώρηση .
• Κάντε κλικ στην Επιθεώρηση για να προβάλετε τους κωδικούς HTML και CSS σε ένα πλαίσιο στη δεξιά πλευρά .

Πώς μπορώ να ανοίξω το Inspect Element στο Chrome χωρίς δεξί κλικ;

Υπάρχουν μερικές χρήσιμες συντομεύσεις για να ανοίξετε το εργαλείο Inspect Element στο Google Chrome για Windows. Αυτά τα πλήκτρα πρόσβασης είναι τα παρακάτω:

• Ctrl + Shift + C
• Το πλήκτρο λειτουργίας F12

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

Mozilla Inspector Tool

Πώς να επιθεωρήσετε στοιχεία στο πρόγραμμα περιήγησης Mozilla των Windows

Στο πρόγραμμα περιήγησης Mozilla, η διαδικασία είναι ίδια με το Google Chrome. Ωστόσο, το παράθυρο Inspector θα εμφανίζεται στο κάτω μέρος του προγράμματος περιήγησης αντί στη δεξιά πλευρά, όπως στο Google Chrome.

Εργαλείο επιθεώρησης Microsoft Edge

Πώς να επιθεωρήσετε στοιχεία στο πρόγραμμα περιήγησης Windows Edge

Παραδόξως, το Inspect Element του Microsoft Edge λειτουργεί παρόμοια με το πρόγραμμα περιήγησης Google Chrome. Το εργαλείο Inspect είναι διαθέσιμο με δεξί κλικ. Επίσης, οι κωδικοί HTML και CSS εμφανίζονται στη δεξιά πλευρά, παρόμοια με το Google Chrome.

Πώς να επιθεωρήσετε στοιχεία σε Mac

Χρησιμοποιείτε Google Chrome, Mozilla Firefox ή Microsoft Edge σε υπολογιστές Mac της Apple; Εάν ναι, τότε μπορείτε να αναπτύξετε το εργαλείο Inspect Element ακολουθώντας τα βήματα που αναφέρονται παραπάνω στην ενότητα των Windows.

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

Πώς να ανοίξετε το Inspect Element σε Mac

Πρώτα απ 'όλα, πρέπει να ενεργοποιήσετε τα εργαλεία προγραμματιστών στο Safari σε Mac. Δείτε πώς:

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

Ενεργοποιήσατε με επιτυχία τα εργαλεία προγραμματιστών στο Safari για Mac. Τώρα, ακολουθήστε αυτά τα βήματα για να χρησιμοποιήσετε το Inspect Element:

• Σε οποιοδήποτε στοιχείο ενός ιστότοπου, όπως ένα κείμενο ή μια εικόνα, κάντε δεξί κλικ .
• Θα εμφανιστεί ένα μενού περιβάλλοντος. Στο κάτω μέρος, θα δείτε το Inspect Element .
• Κάντε κλικ σε αυτό για να ανοίξετε μια ενότητα εντοπισμού σφαλμάτων κάτω από τον ιστότοπο που εμφανίζει κώδικες HTML και CSS .

Ποια είναι τα κλειδιά για το στοιχείο επιθεώρησης;

Ίσως ψάχνετε για συντομεύσεις για το Inspect Element σε Mac. Μπορείτε να χρησιμοποιήσετε τα ακόλουθα:

• Command + Shift + C
• Πατήστε το πλήκτρο Control και, στη συνέχεια, επιλέξτε οποιοδήποτε στοιχείο.
• Κάντε κλικ στο trackpad με δύο δάχτυλα

Πώς να επιθεωρήσετε στοιχεία σε Chromebook

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

Εάν χρησιμοποιείτε ένα Chromebook από την εργασία ή το σχολείο, μπορεί να κάνετε την εξής ερώτηση:

Γιατί δεν μπορώ να επιθεωρήσω το Chromebook του σχολείου μου;

Οι περισσότεροι διαχειριστές σχολείων και επιχειρήσεων απενεργοποιούν τις προηγμένες λειτουργίες του Chromebook που σας παρέχουν για εργασία ή μελέτη. Δεδομένου ότι τα εργαλεία προγραμματιστών είναι προηγμένες λειτουργίες, το πιο πιθανό είναι ότι το Chromebook στο σχολείο ή στην εργασία σας δεν θα εμφανίζει το εργαλείο Inspect Element.

Πώς να επιθεωρήσετε στοιχεία σε iPad/iPhone

Δυστυχώς, δεν μπορείτε να χρησιμοποιήσετε το εργαλείο Inspect Element σε iPhone ή iPad χωρίς Mac.

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

• Ανοίξτε την εφαρμογή Ρυθμίσεις iPad/iPhone .
• Κάντε κλικ στο Safari στο αριστερό παράθυρο πλοήγησης.

Άνοιγμα ρυθμίσεων Safari σε iPad ή iPhone

• Στη συνέχεια, κάντε κύλιση προς τα κάτω στη δεξιά πλευρά για να βρείτε και να επιλέξετε Για προχωρημένους .

Ενεργοποίηση Web Inspector σε iPad και iPhone

• Ενεργοποιήστε την εναλλαγή για το Web Inspector .
• Τώρα, συνδέστε την κινητή συσκευή σε Mac χρησιμοποιώντας USB .
• Εξουσιοδοτήστε το iPhone/iPad σε Mac.
• Ανοίξτε οποιονδήποτε ιστότοπο σε κινητή συσκευή στο Safari.
• Τώρα, εκτελέστε το Safari στο Mac και επιλέξτε Ανάπτυξη στην επάνω γραμμή μενού.
• Στο μενού περιβάλλοντος που ανοίγει, αναζητήστε το όνομα της κινητής συσκευής σας.
• Τοποθετήστε το δείκτη του ποντικιού πάνω από την κινητή συσκευή για να δείτε όλους τους ανοιχτούς ιστότοπους.
• Τώρα, επιλέξτε οποιονδήποτε ιστότοπο για να προβάλετε τον πηγαίο κώδικα HTML και CSS στο πρόγραμμα περιήγησης Safari του Mac.

συμπέρασμα

Εξερευνήσατε όλους τους πιθανούς τρόπους χρήσης του εργαλείου Inspect Element για προσωρινή επεξεργασία ιστοσελίδας. Έχετε μάθει επίσης πώς να επιθεωρείτε στοιχεία για διάφορες συσκευές όπως Mac, Windows, Chromebook, iPad και iPhone.

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

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

Χρειάζεστε μια ιστοσελίδα ως έντυπη αναφορά; Μάθετε πώς μπορείτε να αποθηκεύσετε γρήγορα μια ιστοσελίδα ως PDF τώρα!