Οι προγραμματιστές και οι σχεδιαστές διεπαφής χρήστη χρησιμοποιούν τη λειτουργία 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
- Οταν χρησιμοποιείτε Google Chrome, κάντε δεξί κλικ οπουδήποτε σε έναν ιστότοπο.
- Θα εμφανιστεί το μενού περιβάλλοντος με το δεξί κλικ.
- Στο κάτω μέρος, θα δείτε Ελέγχω.
- Κάντε κλικ Ελέγχω για να προβάλετε τους κωδικούς HTML και CSS στο α δεξιά πλευρά.
Πώς μπορώ να ανοίξω το Inspect Element στο Chrome χωρίς δεξί κλικ;
Υπάρχουν μερικές χρήσιμες συντομεύσεις για να ανοίξετε το εργαλείο Inspect Element στο Google Chrome για Windows. Αυτά τα πλήκτρα πρόσβασης είναι τα παρακάτω:
- Ctrl + Βάρδια + ντο
- Το πλήκτρο λειτουργίας F12
Τα παραπάνω πλήκτρα πρόσβασης λειτουργούν επίσης στο πρόγραμμα περιήγησης Mozilla για Windows.
Mozilla Inspector Tool
Στο πρόγραμμα περιήγησης Mozilla, η διαδικασία είναι ίδια με το Google Chrome. Ωστόσο, το Επιθεωρητής Το παράθυρο θα εμφανιστεί στο κάτω μέρος του προγράμματος περιήγησης αντί στη δεξιά πλευρά, όπως στο Google Chrome.
Εργαλείο επιθεώρησης Microsoft Edge
Παραδόξως, το στοιχείο Inspect του 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 για Mac. Τώρα, ακολουθήστε αυτά τα βήματα για να χρησιμοποιήσετε το Inspect Element:
- Σε οποιοδήποτε στοιχείο ενός ιστότοπου, όπως ένα κείμενο ή μια εικόνα, κάντε δεξί κλικ.
- Θα εμφανιστεί ένα μενού περιβάλλοντος. Στο κάτω μέρος, θα δείτε Επιθεωρήστε το στοιχείο.
- Κάντε κλικ σε αυτό για να ανοίξετε μια ενότητα εντοπισμού σφαλμάτων κάτω από τον ιστότοπο που εμφανίζει HTML και CSS κωδικούς.
Ποια είναι τα κλειδιά για το στοιχείο επιθεώρησης;
Ίσως ψάχνετε για συντομεύσεις για το Inspect Element σε Mac. Μπορείτε να χρησιμοποιήσετε τα ακόλουθα:
- Εντολή + Βάρδια + ντο
- Πάτα το Ελεγχος πλήκτρο και μετά επιλέξτε οποιοδήποτε στοιχείο.
- Κάντε κλικ στο 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 Ρυθμίσεις εφαρμογή.
- Κάντε κλικ Σαφάρι στο αριστερό παράθυρο πλοήγησης.
- Στη συνέχεια, κάντε κύλιση προς τα κάτω στη δεξιά πλευρά για να βρείτε και να επιλέξετε Προχωρημένος.
- Ενεργοποιήστε την εναλλαγή για Επιθεωρητής Ιστού.
- Τώρα, συνδέστε την κινητή συσκευή στο Mac χρησιμοποιώντας USB.
- Εξουσιοδοτήστε το iPhone/iPad σε Mac.
- Ανοίξτε οποιονδήποτε ιστότοπο σε κινητή συσκευή στο Safari.
- Τώρα, εκτελέστε το Safari στο Mac και επιλέξτε Αναπτύσσω στην επάνω γραμμή μενού.
- Στο μενού περιβάλλοντος που ανοίγει, αναζητήστε το όνομα της κινητής συσκευής σας.
- Τοποθετήστε το δείκτη του ποντικιού πάνω από την κινητή συσκευή για να δείτε όλους τους ανοιχτούς ιστότοπους.
- Τώρα, επιλέξτε οποιονδήποτε ιστότοπο για να προβάλετε τον πηγαίο κώδικα HTML και CSS στο πρόγραμμα περιήγησης Safari του Mac.
συμπέρασμα
Εξερευνήσατε όλους τους πιθανούς τρόπους χρήσης του εργαλείου Inspect Element για προσωρινή επεξεργασία ιστοσελίδας. Έχετε μάθει επίσης πώς να επιθεωρείτε στοιχεία για διάφορες συσκευές όπως Mac, Windows, Chromebook, iPad και iPhone.
Την επόμενη φορά που θα χρειαστεί να τροποποιήσετε μια ιστοσελίδα για διασκέδαση ή για επαγγελματικές ανάγκες, δοκιμάστε αυτές τις μεθόδους. Σίγουρα θα λατρέψετε αυτά τα αβίαστα βήματα σε σχέση με άλλες περίπλοκες μεθόδους που εξηγούνται αλλού.
Μην ξεχάσετε να αφήσετε σχόλια παρακάτω, εάν σας βοήθησαν τα παραπάνω βήματα, οποιαδήποτε μέθοδος θεωρείτε δύσκολη ή τυχόν μυστικές συμβουλές σχετικά με το εργαλείο Inspect Element.
Χρειάζεστε μια ιστοσελίδα ως έντυπη αναφορά; Μάθε πως να αποθηκεύστε γρήγορα μια ιστοσελίδα ως PDF τώρα!