Το "Inspect Element" είναι ένα εργαλείο προγραμματιστή στο πρόγραμμα περιήγησης Firefox που μπορείτε να χρησιμοποιήσετε για την παρακολούθηση κώδικα HTML σε οποιαδήποτε ιστοσελίδα. Τα φύλλα στυλ HTML και CSS μιας ιστοσελίδας μπορούν να επεξεργαστούν με "Επιθεώρηση στοιχείου". Μπορείτε να προσπαθήσετε να επεξεργαστείτε μια σελίδα όπως σας αρέσει και να την επαναφέρετε όπως ήταν απλά φορτώνοντας ξανά την επεξεργασμένη ιστοσελίδα.
Βήμα
Μέρος 1 από 2: Έλεγχος στοιχείων
Βήμα 1. Ενημερώστε τον Firefox (προαιρετικό)
Είναι πιθανό ότι δεν θα μπορείτε να έχετε πρόσβαση στις δυνατότητες που αναφέρονται σε αυτό το άρθρο εάν χρησιμοποιείτε παλαιότερη έκδοση του Firefox. Η ενημέρωση θα εγκατασταθεί αυτόματα όταν ελέγξετε ποια έκδοση του Firefox χρησιμοποιείτε.
Ο Firefox 9 και οι προηγούμενες εκδόσεις δεν διαθέτουν καθόλου το εργαλείο "Inspect Element"
Βήμα 2. Κάντε δεξί κλικ σε οποιοδήποτε στοιχείο ιστοσελίδας
Μπορείτε να κάνετε δεξί κλικ σε οποιαδήποτε εικόνα, κείμενο, φόντο ή στοιχείο. Εάν το ποντίκι σας έχει μόνο ένα κουμπί, ένας συνδυασμός αριστερού κλικ και του πλήκτρου ελέγχου θα οδηγήσει σε δεξί κλικ.
Βήμα 3. Κάντε κλικ στην επιλογή "Επιθεώρηση στοιχείου" από το αναπτυσσόμενο μενού
Μια γραμμή εργαλείων θα εμφανιστεί στο κάτω μέρος του παραθύρου. Ένας πίνακας κάτω από τη γραμμή εργαλείων θα εμφανιστεί επίσης και θα εμφανίσει τον κώδικα HTML στην ενεργή σελίδα.
Βήμα 4. Γνωρίστε τις υπάρχουσες γραμμές εργαλείων και πίνακες
Όταν χρησιμοποιείτε το "Επιθεώρηση στοιχείου", πολλά πλαίσια θα ανοίξουν κάτω από το παράθυρο του προγράμματος περιήγησης. Τα παρακάτω περιγράφουν τα ονόματα και τις λειτουργίες των γραμμών εργαλείων και των πινάκων στο "Inspect Element":
- Στην επάνω σειρά βρίσκεται η γραμμή εργαλείων Toolbox. Υπάρχουν πολλά εργαλεία που μπορείτε να βρείτε εδώ, αλλά θα εστιάσουμε στο κουμπί Inspector στα αριστερά. Βεβαιωθείτε ότι αυτό το κουμπί είναι ενεργό (υποδεικνύεται από το χρώμα του κουμπιού που γίνεται μπλε όταν είναι ενεργό) σε αυτόν τον οδηγό.
- Κάτω από αυτό, υπάρχει μια γραμμή φρυγανιάς στοιχείων HTML που υποδεικνύουν τη θέση του τρέχοντος επιλεγμένου στοιχείου.
- Το παράθυρο κάτω από τα μηνύματα πλοήγησης εμφανίζει το δέντρο HTML ή την "Προβολή σήμανσης" της ιστοσελίδας. Το HTML του επιλεγμένου στοιχείου θα επισημανθεί και θα κεντραριστεί σε αυτό το παράθυρο.
- Το παράθυρο στα δεξιά εμφανίζει το φύλλο στυλ CSS της τρέχουσας ιστοσελίδας.
Βήμα 5. Επιλέξτε ένα άλλο στοιχείο
Όταν η γραμμή εργαλείων είναι ανοιχτή, μπορείτε εύκολα να επιλέξετε άλλα στοιχεία. Υπάρχουν τρεις τρόποι για να το κάνετε αυτό:
- Τοποθετήστε το δείκτη του ποντικιού πάνω από μια γραμμή HTML για να επισημάνετε το επιλεγμένο στοιχείο (αυτή η λειτουργία απαιτεί Firefox 34+). Κάντε κλικ στο HTML για να επιλέξετε αυτό το στοιχείο.
- Κάντε κλικ στο εργαλείο "Επιλογή στοιχείου" στην αριστερή γωνία της γραμμής εργαλείων: έχει ένα εικονίδιο σε σχήμα δρομέα πάνω από ένα πλαίσιο. Μετακινήστε τον κέρσορα στην ιστοσελίδα για να επισημάνετε ένα στοιχείο και κάντε κλικ για να το επιλέξετε.
Βήμα 6. Ανιχνεύστε τον κώδικα HTML
Κάντε κλικ οπουδήποτε στο παράθυρο HTML. Χρησιμοποιήστε τα αριστερά και δεξιά πλήκτρα κατεύθυνσης στο πληκτρολόγιο για να μετακινηθείτε από κώδικα σε κώδικα (αυτή η λειτουργία απαιτεί Firefox 39+). Αυτή η μέθοδος είναι χρήσιμη για την επιλογή στοιχείων που είναι πολύ μικρά για να επιλεγούν με τον δρομέα.
- Το γκριζωπό HTML υποδεικνύει στοιχεία που δεν εμφανίζονται στη σελίδα. Τα στοιχεία που περιλαμβάνονται σε αυτό είναι σχόλια, όπως κόμβοι και άλλα στοιχεία που κρύβονται από την ιδιότητα εμφάνισης CSS.
- Κάντε κλικ στο βέλος στα αριστερά του πλαισίου για να εμφανίσετε ή να αποκρύψετε το περιεχόμενο. Για να εμφανίσετε ολόκληρο το περιεχόμενο, κρατήστε πατημένο το πλήκτρο alt="Image" ή επιλογή ενώ κάνετε κλικ στο βέλος.
Βήμα 7. Εντοπίστε το στοιχείο
Αναζητήστε το πεδίο αναζήτησης (εικονίδιο σε σχήμα βρόχου) στην άκρη δεξιά γωνία της σειράς ψίχουλων. Κάντε κλικ για να επεκτείνετε το πεδίο αναζήτησης και πληκτρολογήστε τον κώδικα HTML που θέλετε να αναζητήσετε. Καθώς πληκτρολογείτε, θα εμφανιστεί ένα αναδυόμενο παράθυρο με τα αντίστοιχα αποτελέσματα αναζήτησης. Κάντε κλικ σε ένα στοιχείο από τα αποτελέσματα αναζήτησης και μετακινηθείτε στο παράθυρο HTML στον κώδικα που αναζητάτε.
Μέρος 2 από 2: Επεξεργασία HTML
Βήμα 1. Φορτώστε ξανά τη σελίδα για να ξεκινήσετε από την αρχή
Εάν είστε νέοι στα εργαλεία ανάπτυξης ιστότοπου, λάβετε υπόψη ότι δεν κάνετε μόνιμες αλλαγές στις σελίδες που επεξεργάζεστε. Οι αλλαγές σας εμφανίζονται μόνο στην οθόνη σας μέχρι να φορτώσετε ξανά ή να κλείσετε τη σελίδα. Μη διστάσετε να πειραματιστείτε ακόμα κι αν δεν ξέρετε τι θα συμβεί.
Βήμα 2. Κάντε διπλό κλικ στο HTML για επεξεργασία
Διπλό κλικ στην ενσωματωμένη HTML. Πληκτρολογήστε το νέο κείμενο και πατήστε enter για να αποθηκεύσετε τις αλλαγές.
Βήμα 3. Κάντε κλικ και κρατήστε πατημένο το εργαλείο στη φρυγανιά για να εμφανίσετε περισσότερες επιλογές
Σημειώστε ότι η γραμμή εργαλείων του breadcrumb βρίσκεται μεταξύ του δέντρου HTML και της γραμμής εργαλείων πάνω από αυτό. Κάντε κλικ και κρατήστε πατημένο ένα εργαλείο σε αυτήν τη σειρά για να ανοίξετε περισσότερα μενού. Παρακάτω είναι μια υπόδειξη των διαθέσιμων επιλογών (όχι εξαντλητική):
- Το "Επεξεργασία ως HTML" σας επιτρέπει να επεξεργαστείτε όλο το περιεχόμενο HTML από το δέντρο HTML απευθείας αντί να επεξεργαστείτε κάθε γραμμή.
- Το "Copy Inner HTML" αντιγράφει ολόκληρο το περιεχόμενο μέσα στον κόμβο, ενώ το "Copy Outer HTML" αντιγράφει το περιεχόμενο και τους κόμβους (όπως ή
- Το "Επικόλληση" εμφανίζει πολλές επιλογές για το πού να επικολλήσετε το αντίγραφο, όπως πριν από τον κόμβο ή μετά το πρώτο παιδί του κόμβου.
- : hover,: active και: focus αλλάζουν την εμφάνιση του στοιχείου όταν ο χρήστης αλληλεπιδρά. Τα αλλαγμένα εφέ καθορίζονται από το φύλλο στυλ CSS (Επεξεργάσιμο από τον πίνακα στα δεξιά).
Βήμα 4. Σύρετε και αποθέστε
Για να αναδιατάξετε στοιχεία στον κώδικα, κάντε κλικ και κρατήστε πατημένο το HTML μέχρι να εμφανιστεί μια διακεκομμένη γραμμή. Μετακινήστε τη γραμμή πάνω και κάτω από το δέντρο και αφήστε το κουμπί του ποντικιού όταν η γραμμή είναι εκεί που θέλετε.
Αυτή η δυνατότητα απαιτεί Firefox 39 και νεότερες εκδόσεις
Βήμα 5. Κλείστε τη γραμμή εργαλείων προγραμματιστή
Για να κλείσετε ολόκληρο το παράθυρο Inspect Element, κάντε κλικ στο κουμπί X στην επάνω δεξιά γωνία της γραμμής εργαλείων που βρίσκεται πάνω από τον πίνακα CSS.
Συμβουλές
- Μπορείτε επίσης να ανοίξετε τη γραμμή εργαλείων από τις επιλογές μενού στο επάνω μέρος του παραθύρου:
- Windows: Firefox → Web Developer → Εναλλαγή εργαλείων
- Mac ή Linux: Εργαλεία → Προγραμματιστής Ιστού → Εναλλαγή εργαλείων
- Ο Firefox 40 έχει την επιλογή να αποκρύψει τον πίνακα CSS, ώστε να έχετε περισσότερο χώρο για επεξεργασία HTML. Αναζητήστε το εικονίδιο με το βέλος στη δεξιά γωνία της σειράς φρυγανιών και στα δεξιά του πεδίου αναζήτησης. Κάντε κλικ σε αυτό το εικονίδιο για να αποκρύψετε το πλαίσιο CSS και κάντε ξανά κλικ για να το εμφανίσετε.
- Μπορείτε επίσης να επεξεργαστείτε πίνακες CSS, αλλά δεν παρατίθενται σε αυτό το άρθρο. Μπορείτε να βρείτε οδηγίες για την επεξεργασία κώδικα CSS στο διαδίκτυο.
