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