Οι περισσότεροι άνθρωποι δεν γνωρίζουν ότι υπάρχει ένας θησαυρός εργαλείων προγραμματιστών στη διάθεσή τους και ότι είναι κρυμμένος στο αγαπημένο τους πρόγραμμα περιήγησης.
Κάθε πρόγραμμα περιήγησης ιστού προσφέρει εργαλεία προγραμματιστή για να ελέγξει την κωδικοποίηση ενός ιστότοπου, ωστόσο, είναι ξένη οντότητα για τον μέσο χρήστη του διαδικτύου. Σε τελική ανάλυση, ποιος θέλει να δει την κωδικοποίηση ενός ιστότοπου, σωστά;
Όπως αποδεικνύεται, υπάρχουν πολλά πράγματα που μπορείτε να μάθετε κοιτάζοντας την κωδικοποίηση ενός ιστότοπου. Διαβάστε παρακάτω για να μάθετε τι έχει να προσφέρει το χαρακτηριστικό στοιχείο επιθεώρησης και πώς να το χρησιμοποιήσετε.
Τρόπος χρήσης του στοιχείου Inspect
Τα περισσότερα προγράμματα περιήγησης διαθέτουν εργαλεία για την επιθεώρηση στοιχείων ενός ιστότοπου, αλλά όλα λειτουργούν γενικά με τον ίδιο τρόπο.
Χρήση του Inspect Element στο Google Chrome
- Ανοίξτε τον ιστότοπο που θέλετε να ελέγξετε.
- Κάντε δεξί κλικ οπουδήποτε στη σελίδα και επιλέξτε Επιθεωρώ .
Ή - Κάντε κλικ στις τρεις κάθετες κουκκίδες στη δεξιά γωνία της γραμμής εργαλείων σας.
- Παω σε Περισσότερα εργαλεία .
- Επιλέγω Εργαλεία προγραμματιστή .
Ή - Πάτα το F12 πλήκτρο συντόμευσης πληκτρολογίου σε υπολογιστή ή Επιλογές CMD + I σε Mac.
Χρήση του στοιχείου Inspect Element στο Microsoft Edge
- Ανοίξτε έναν ιστότοπο.
- Κάντε κλικ στις τρεις κάθετες κουκκίδες στην επάνω δεξιά γωνία της γραμμής εργαλείων του προγράμματος περιήγησης.
- Κάντε κύλιση προς τα κάτω και κάντε κλικ στο Περισσότερα εργαλεία .
- Κάντε κλικ στο Εργαλεία προγραμματιστή .
Ή - Κάντε δεξί κλικ οπουδήποτε στον ιστότοπο.
- Κάντε κλικ στο Επιθεωρώ .
Ή - Τύπος Ctrl + Shift + I .
Οποιαδήποτε από αυτές τις τρεις μεθόδους θα σας δώσει το ίδιο αποτέλεσμα.
Εάν το κάνατε σωστά, θα δείτε ένα νέο παράθυρο να ανοίγει στο κάτω μέρος του προγράμματος περιήγησής σας. Αυτά είναι τα Εργαλεία προγραμματιστών και περιλαμβάνουν την καρτέλα Στοιχεία. Αυτό είναι το εργαλείο που χρειάζεστε για να επιθεωρήσετε το στοιχείο.
μπορείτε να προσθέσετε γραμματοσειρές στα έγγραφα Google
Το πλαίσιο θα ανοίξει στο κάτω μέρος της οθόνης σας ως προεπιλογή, αλλά μπορείτε πάντα να αλλάξετε τον τρόπο εμφάνισής του. Ακολουθήστε αυτά τα απλά βήματα για να επανατοποθετήσετε τον πίνακα Εργαλεία προγραμματιστή:
- Κάντε κλικ στις τρεις κάθετες κουκκίδες στην επάνω γωνία του πίνακα εργαλείων προγραμματιστών.
- Επιλέξτε μια πλευρά αποβάθρας (αριστερά, κάτω ή δεξιά) ή αποσυνδέστε σε ένα ξεχωριστό παράθυρο.
Τοποθετώντας τον κέρσορα δίπλα στην άκρη του πλαισίου πλαισίου των Εργαλείων προγραμματιστή και το σύρσιμο θα περιορίσει ή θα διευρύνει το χώρο εργασίας. Για παράδειγμα, εάν επιλέξετε να αγκυροβολήσετε τον πίνακα στη δεξιά πλευρά του παραθύρου του προγράμματος περιήγησης, δοκιμάστε να αιωρηθείτε στο αριστερό περίγραμμα. Μπορείτε να σύρετε τον πίνακα για να αλλάξετε το μέγεθός του όταν δείτε τον κέρσορα βέλους.
Πώς να χρησιμοποιήσετε το στοιχείο επιθεώρησης για να βρείτε απαντήσεις
Μπορείτε να χρησιμοποιήσετε το Inspect Element για να βρείτε απαντήσεις σε διάφορα πράγματα όπως:
- Προεπισκόπηση σχεδιασμού ιστότοπου σε κινητές συσκευές.
- Μάθετε λέξεις-κλειδιά που χρησιμοποιούν οι ανταγωνιστές.
- Δοκιμές ταχύτητας.
- Αλλαγή κειμένου σε μια ιστοσελίδα.
- Βρείτε γρήγορα παραδείγματα για να δείξετε στους προγραμματιστές αυτό που χρειάζεστε.
Κατά την εκκίνηση του πλαισίου Inspect Element, θα δείτε όλη την κωδικοποίηση για τον ιστότοπο. Αυτό περιλαμβάνει όλα τα ενσωματωμένα κώδικα JavaScript, CSS και HTML. Είναι σαν να βλέπετε την κωδικοποίηση πηγής μιας ιστοσελίδας, εκτός εάν μπορείτε να κάνετε αλλαγές στον κώδικα. Επιπλέον, μπορείτε να δείτε τυχόν αλλαγές που εφαρμόζονται σε πραγματικό χρόνο.
Αυτό το εργαλείο το καθιστά ανεκτίμητο για τους επαγγελματίες του μάρκετινγκ, τους σχεδιαστές και τους προγραμματιστές να βλέπουν οποιεσδήποτε αλλαγές στο σχεδιασμό πριν τις ολοκληρώσουν. Ωστόσο, η πραγματοποίηση αλλαγών στην κωδικοποίηση με το Inspect Element δεν διαρκεί για πάντα. Όταν φορτώσετε ξανά τη σελίδα, θα επιστρέψει στην προεπιλεγμένη της κατάσταση.
Τρόπος χρήσης του στοιχείου Inspect στο Chromebook
Το προεπιλεγμένο πρόγραμμα περιήγησης στα Chromebook είναι το Google, επομένως ακολουθήστε τις οδηγίες του προγράμματος περιήγησης Chrome για πρόσβαση Επιθεωρήστε το στοιχείο . Ακολουθεί μια μικρή σειρά μαθημάτων για εσάς:
- Ανοίξτε έναν ιστότοπο.
- Κάντε κλικ στις τρεις κάθετες γραμμές στην επάνω δεξιά γωνία της γραμμής εργαλείων.
- Επιλέγω Περισσότερα εργαλεία .
- Κάντε κλικ στο Εργαλεία προγραμματιστή .
Μπορείτε επίσης να χρησιμοποιήσετε τη μέθοδο δεξιού κλικ ή F12 πλήκτρο λειτουργίας για να φτάσετε πιο γρήγορα στα Εργαλεία προγραμματιστών.
Τρόπος χρήσης του στοιχείου Inspect στο Android
Η εκτέλεση του Inspect Element σε μια συσκευή Android είναι ελαφρώς διαφορετική. Δείτε πώς μπορείτε να μεταβείτε στον πίνακα Inspect Element στο Android:
- Πάτα το F12 πλήκτρο λειτουργίας.
- Επιλέγω Εναλλαγή γραμμής συσκευής .
- Επιλέξτε τη συσκευή Android από το αναπτυσσόμενο μενού.
Όταν επιλέγετε μια συγκεκριμένη συσκευή Android, θα παρατηρήσετε ότι φορτώνεται μια έκδοση για κινητά του ιστότοπου. Από εδώ, μπορείτε να χρησιμοποιήσετε τη λειτουργία Inspect Element στη συσκευή σας Android από την άνεση της επιφάνειας εργασίας σας.
Αυτή η μέθοδος λειτουργεί τόσο για τα προγράμματα περιήγησης Chrome όσο και για τα προγράμματα περιήγησης Firefox επειδή διαθέτουν μια λειτουργία στα Εργαλεία προγραμματιστών τους που ονομάζεται Device Simulation.
Λειτουργεί επίσης με τον ίδιο τρόπο για συσκευές iPhone. Απλά πρέπει να επιλέξετε το σωστό στο αναπτυσσόμενο μενού.
Πώς να χρησιμοποιήσετε το στοιχείο Inspect Element στα Windows
Το εργαλείο Inspect Element δεν είναι απαραίτητα συγκεκριμένο για λειτουργικό σύστημα, αλλά είναι συγκεκριμένο για πρόγραμμα περιήγησης. Αυτό σημαίνει ότι τα Εργαλεία προγραμματιστών είναι μια δυνατότητα του προγράμματος περιήγησης που χρησιμοποιείτε και όχι απαραίτητα Windows. Ωστόσο, μπορείτε να μεταβείτε στον πίνακα Inspect Element ανεξάρτητα από το πρόγραμμα περιήγησης που προτιμάτε.
Εάν χρησιμοποιείτε λειτουργικό σύστημα Windows, είναι επίσης πιθανό να χρησιμοποιήσετε το πρόγραμμα περιήγησης Microsoft Edge. Δείτε πώς μπορείτε να αποκτήσετε πρόσβαση στο Inspect Element στο MS Edge:
- Ανοίξτε τον ιστότοπο που θέλετε να ελέγξετε.
- Πατήστε στις τρεις κάθετες κουκκίδες στη γωνία του παραθύρου του προγράμματος περιήγησης.
- Κάντε κύλιση προς τα κάτω και επιλέξτε Περισσότερα εργαλεία .
- Κάντε κλικ στο Εργαλεία προγραμματιστή .
Μπορείτε επίσης να χρησιμοποιήσετε το πλήκτρο λειτουργίας F12 εάν θέλετε να αποκτήσετε πρόσβαση στο Inspect Element πιο γρήγορα. Επίσης, κάνοντας δεξί κλικ στην ιστοσελίδα και επιλέγοντας Επιθεώρηση λειτουργεί επίσης.
Τρόπος χρήσης του στοιχείου Inspect στο Chrome
Υπάρχουν τρεις τρόποι πρόσβασης στο στοιχείο Inspect Element στο Chrome. Μπορείς:
το κουμπί έναρξης και η γραμμή εργασιών δεν λειτουργούν
- Κάντε κλικ στο μενού ρυθμίσεων ή σε τρεις κάθετες κουκκίδες στο πρόγραμμα περιήγησης και μεταβείτε στο Περισσότερα εργαλεία> Εργαλεία προγραμματιστών .
- Κάντε δεξί κλικ στην ιστοσελίδα και επιλέξτε Επιθεωρώ .
- Χρήση Ctrl + Shift + I (Επιθεωρώ).
Ο πρώτος τρόπος είναι πιο διαισθητικός για να θυμούνται οι νέοι χρήστες του Inspect Element. Ωστόσο, εάν σκοπεύετε να χρησιμοποιείτε αυτήν τη δυνατότητα συχνά, τα γρήγορα πλήκτρα μπορεί να είναι χρήσιμα.
Πώς να χρησιμοποιήσετε το στοιχείο Inspect Element σε Mac
Εάν χρησιμοποιείτε Mac, το πρόγραμμα περιήγησής σας είναι πιθανότατα το Safari. Το άνοιγμα στοιχείων επιθεώρησης στο Safari είναι ελαφρώς διαφορετικό από το Chrome και τον Firefox. Αλλά είναι εξίσου απλό με αυτά τα βήματα:
- Ανοίξτε το πρόγραμμα περιήγησης Safari.
- Κάντε κλικ στο Σαφάρι στην καρτέλα κεφαλίδας.
- Επιλέγω Προτιμήσεις από το αναπτυσσόμενο μενού.
- Κάνε κλικ στο Προχωρημένος εικονίδιο με το γρανάζι που βρίσκεται στο πάνω μέρος της οθόνης
- Επιλέξτε το πλαίσιο που λέει Εμφάνιση μενού Ανάπτυξης στη γραμμή μενού .
Ακολουθώντας αυτά τα βήματα ενεργοποιείται η δυνατότητα Inspect Element στο πρόγραμμα περιήγησής σας. Εάν δεν ενεργοποιήσετε πρώτα το Inspect Element, δεν θα δείτε την επιλογή όταν ανοίγετε έναν ιστότοπο.
Αφού ολοκληρώσετε αυτό το βήμα, απλώς κάντε δεξί κλικ σε οποιαδήποτε ανοιχτή ιστοσελίδα και επιλέξτε Επιθεώρηση. Μπορείτε επίσης να χρησιμοποιήσετε την εντολή γρήγορων κλειδιών: CMD + Επιλογή + I (επιθεωρώ).
Τρόπος χρήσης του στοιχείου Inspect στις φόρμες Google
Μπορείτε επίσης να χρησιμοποιήσετε το στοιχείο επιθεώρησης στις φόρμες Google. Ωστόσο, εάν ψάχνετε απαντήσεις σε ένα κουίζ, δεν έχετε τύχη. Δεν θα βρείτε τις απαντήσεις ενσωματωμένες στην κωδικοποίηση.
Μπορείτε να δείτε απαντήσεις μόνο εάν είστε ο δημιουργός ή ο συντάκτης της φόρμας. Ωστόσο, εάν είστε μαθητής που απαντά σε κουίζ στις Φόρμες Google, θα δείτε μόνο τις δικές σας απαντήσεις.
Σε κάθε περίπτωση, μπορείτε να κάνετε δεξί κλικ στη φόρμα και να επιλέξετε Επιθεωρώ για να δείτε όλο τον κωδικό για τη φόρμα.
Πώς να χρησιμοποιήσετε το στοιχείο Inspect Element στο iPhone
Θέλετε να χρησιμοποιήσετε τη δυνατότητα Επιθεώρηση στοιχείων για να δείτε πώς εμφανίζεται μια έκδοση για κινητά μιας ιστοσελίδας σε iPhone; Μπορείτε να το κάνετε αυτό και πολλά άλλα με λίγα απλά βήματα. Αλλά προτού δείτε ένα στοιχείο, πρέπει να ενεργοποιήσετε το Web Inspector για τη συσκευή σας iOS:
- Παω σε Ρυθμίσεις .
- Επιλέγω Σαφάρι .
- Μεταβείτε στο κάτω μέρος και πατήστε Προηγμένο μενού .
- Πατήστε για ενεργοποίηση Επιθεωρητής Ιστού .
Επίσης, πρέπει να βεβαιωθείτε ότι το μενού Ανάπτυξη είναι ενεργοποιημένο στο Mac σας:
- Ανοίξτε το Safari.
- Επιλέγω Σαφάρι από τις κορυφαίες κεφαλίδες.
- Κάντε κλικ στο Προτιμήσεις .
- Κάντε κλικ στο Προχωρημένος .
- Επιλέξτε το πλαίσιο που λέει Εμφάνιση μενού Ανάπτυξης στη γραμμή μενού .
Αφού ενεργοποιήσετε τόσο την κινητή συσκευή iOS όσο και τον Mac, θα δείτε το μενού Ανάπτυξη στην επάνω γραμμή του Mac σας. Κάντε κλικ σε αυτό για να δείτε το συνδεδεμένο iPhone και την ιστοσελίδα ενεργή στη συσκευή. Επιλέγοντας την ιστοσελίδα ανοίγει επίσης ένα παράθυρο Web Inspector για την ίδια σελίδα στην οθόνη Mac σας.
Λάβετε υπόψη, ωστόσο, ότι αυτές οι οδηγίες λειτουργούν μόνο για το Safari που εκτελεί Mac, όχι το Safari σε Windows.
Πώς να χρησιμοποιήσετε το στοιχείο επιθεώρησης όταν είναι αποκλεισμένο
Περιστασιακά, θα διαπιστώσετε ότι δεν μπορείτε να επιθεωρήσετε μια ιστοσελίδα και η επιλογή Επιθεώρηση είναι γκρίζα αν προσπαθήσετε να κάνετε δεξί κλικ σε αυτήν. Μπορεί να πιστεύετε ότι έχει αποκλειστεί, αλλά υπάρχουν πολλοί τρόποι για αυτό:
Μέθοδος 1 - Απενεργοποιήστε τη Javascript
- Μπαίνω Ρυθμίσεις .
- ΑναζήτησηJavaScript.
- Σβήνω JavaScript .
Μέθοδος 2 - Πρόσβαση στα Εργαλεία για προγραμματιστές το Long Way
Αντί να κάνετε δεξί κλικ στο ποντίκι για Επιθεώρηση, κάντε αυτό:
- Παω σε Ρυθμίσεις στο πρόγραμμα περιήγησής σας.
- Επιλέγω Περισσότερα εργαλεία .
- Κάντε κύλιση προς τα κάτω και κάντε κλικ στο Ρυθμίσεις προγραμματιστή .
Μέθοδος 3 - Χρήση του πλήκτρου λειτουργίας
πώς να διαγράψετε εικόνες από το iPhone
Μπορείτε επίσης να δοκιμάσετε να χρησιμοποιήσετε το F12 πλήκτρο λειτουργίας σε ιστοσελίδες που αποκλείουν το δεξί κλικ για Επιθεώρηση.
Ίσως χρειαστεί να δοκιμάσετε όλες αυτές τις μεθόδους προτού συναντήσετε μια που να σας ταιριάζει. Ως έσχατη λύση, μπορείτε επίσης να δείτε τον πηγαίο κώδικα πληκτρολογώντας προβολή-πηγή: [εισαγάγετε την πλήρη διεύθυνση url] .
Τρόπος χρήσης του στοιχείου Inspect στο Discord
Ο έλεγχος της κωδικοποίησής σας στο Discord είναι μια εύκολη διαδικασία. Απλώς χρησιμοποιήστε το Ctrl + Shift + I εντολή ή F12 κλειδί σε μια σελίδα Discord.
Πώς να χρησιμοποιήσετε το στοιχείο Inspect Element σε σχολικό Chromebook
Εάν το Chromebook σας εκδόθηκε από σχολείο, η χρήση της λειτουργίας Inspect Element περιλαμβάνει μερικά απλά βήματα:
- Κάντε δεξί κλικ ή πατήστε με δύο δάχτυλα στην ιστοσελίδα και επιλέξτε Επιθεωρώ .
Ή - Τύπος Ctrl + Shift + I
Ωστόσο, ορισμένα σχολεία και οργανισμοί αποκλείουν αυτήν τη δυνατότητα. Επομένως, εάν δεν λειτουργεί για εσάς, ίσως χρειαστεί να επικοινωνήσετε με τον οργανισμό ή τον διαχειριστή του σχολείου σας.
Πρόσθετες ερωτήσεις
Πώς μπορώ να χρησιμοποιήσω την εντολή Inspect Element για να βρω απαντήσεις;
Ο μόνος τρόπος για να βρείτε απαντήσεις χρησιμοποιώντας τη δυνατότητα Inspect Element είναι εάν ο ιστότοπος την αποκαλύψει αμέσως μετά την υποβολή. Σε αυτήν την περίπτωση, απαντήσεις υπάρχουν στην κωδικοποίηση.
Διαφορετικά, βλέπετε απλώς την κωδικοποίηση για το κουίζ ή τη δοκιμή όταν χρησιμοποιείτε τη λειτουργία Inspect Element, καθώς και τυχόν απαντήσεις που υποβάλλετε.
Είναι παράνομο το στοιχείο Επιθεώρηση;
Όχι, το στοιχείο Επιθεώρηση δεν είναι παράνομο. Η προβολή του πηγαίου κώδικα για έναν ιστότοπο δεν είναι παράνομη, καθίσταται πρόβλημα μόνο εάν χρησιμοποιείτε τις πληροφορίες που συλλέγονται για κακόβουλους σκοπούς, όπως απόπειρα εκμετάλλευσης κ.λπ.
Είναι δυνατόν να απενεργοποιήσετε το στοιχείο επιθεώρησης στο πρόγραμμα περιήγησης;
Η σύντομη απάντηση είναι όχι.
Δεν μπορείτε να απενεργοποιήσετε το στοιχείο Επιθεώρηση σε πρόγραμμα περιήγησης. Αλλά μπορείτε να ορίσετε παραμέτρους που εμποδίζουν τους χρήστες να κάνουν συγκεκριμένες ενέργειες όπως το δεξί κλικ σε μια ιστοσελίδα. Υπάρχουν πολλά διαδικτυακά σεμινάρια για να ρυθμίσετε τα σωστά σενάρια για να απενεργοποιήσετε συγκεκριμένα συμβάντα. Ωστόσο, δεν μπορείτε πραγματικά να απενεργοποιήσετε τη λειτουργία Inspect Element στο σύνολό της.
Γνωρίστε τα πρότυπα μιας ιστοσελίδας
Ο έλεγχος της δυνατότητας Inspect Element μιας ιστοσελίδας είναι πιθανώς ένα εργαλείο προγραμματιστή που δεν ξέρατε ποτέ ότι χρειάζεστε - ακόμα κι αν δεν είστε ο ίδιος προγραμματιστής. Διαθέτει τόνους σχεδιασμού και μάρκετινγκ εφαρμογών που μπορούν να κάνουν τον ιστότοπό σας πιο ομαλό. Και ίσως να σας δώσει πλεονέκτημα σε έναν ανταγωνιστή.
Για ποιο λόγο χρησιμοποιείτε το Inspect Element; Πείτε μας για αυτό στην ενότητα σχολίων παρακάτω.
