Έχετε κάποια ερώτηση σχετικά με τον τρόπο προβολής του πηγαίου κώδικα του οπτικού στοιχείου στο Chromebook σας; Για να το κάνετε αυτό μπορείτε να χρησιμοποιήσετε τα ειδικά DevTools στην εφαρμογή Google Chrome ή σε οποιαδήποτε σελίδα του προγράμματος περιήγησης. Τα DevTools είναι ένας κατάλογος ειδικών εργαλείων ανάπτυξης που είναι ενσωματωμένα στο πρόγραμμα περιήγησης Google Chrome. Επιτρέπει στους χρήστες να επεξεργάζονται σελίδες εν κινήσει και να παρακολουθούν πιθανά προβλήματα.
Πώς να χρησιμοποιήσετε το Inspect Element στο Chromebook
Για τα Chromebooks το προεπιλεγμένο πρόγραμμα περιήγησης είναι το Google, για να ανοίξετε τα εργαλεία ανάπτυξης σε αυτή τη συσκευή χρειάζεστε.
- Ανοίξτε τη σελίδα που θέλετε
- Κάντε κλικ στις 3 τελείες στην επάνω δεξιά γωνία της εφαρμογής.
- Επιλέξτε “Περισσότερα εργαλεία“
- Κάντε κλικ στο “Εργαλεία προγραμματιστή“
Εναλλακτικοί τρόποι πρόσβασης σε αυτή τη λειτουργία είναι να πατήσετε το κουμπί F12 ή να κάνετε δεξί κλικ στο επιθυμητό στοιχείο.
Αυτή είναι μια καθολική οδηγία που ισχύει για τα περισσότερα προγράμματα περιήγησης στα Windows ή σε οποιοδήποτε άλλο σύστημα.
Πώς να χρησιμοποιήσετε το Inspect Element σε Mac ή Iphone
Είναι δυνατόν να γίνει το ίδιο με τη χρήση ενός Mac ή ακόμη και ενός iPhone; Θα πρέπει απλώς να ακολουθήσετε μερικά απλά βήματα παρακάτω:
Πώς να το χρησιμοποιήσετε σε Mac
Αν έχετε Mac, η καλύτερη επιλογή προγράμματος περιήγησης είναι το Safari. Το άνοιγμα των Εργαλείων ανάπτυξης σε αυτό το πρόγραμμα περιήγησης διαφέρει ελαφρώς από την ίδια διαδικασία στο Chrome ή το Firefox. Θα χρειαστεί να:
- Ανοίξτε το πρόγραμμα περιήγησης
- Κάντε κλικ στο Safari στο όνομα της καρτέλας
- Επιλέξτε “Προτιμήσεις“
- Στη συνέχεια, κάντε κλικ στο εικονίδιο του εργαλείου Advanced, το οποίο θα βρίσκεται στο επάνω μέρος της οθόνης.
- Τσεκάρετε το πλαίσιο δίπλα στην επιλογή Show Develop menu in menu bar (Εμφάνιση μενού ανάπτυξης στη γραμμή μενού).
Μόλις το κάνετε αυτό, το Inspect Element θα είναι διαθέσιμο στις ιστοσελίδες σας. Μπορείτε επίσης να το καλέσετε με CMD + Option + I.
Πώς να το χρησιμοποιήσετε στο iPhone
Αν θέλετε να ελέγξετε πώς φαίνεται η έκδοση της ιστοσελίδας για κινητά στο iPhone σας χρησιμοποιώντας τη λειτουργία Inspect Elements (Επιθεώρηση στοιχείων), θα πρέπει πρώτα να ενεργοποιήσετε τον Web Inspector για τη συσκευή σας iOS:
- Μεταβείτε στις Ρυθμίσεις
- Επιλέξτε την εφαρμογή Safari
- Μετακινηθείτε προς τα κάτω και κάντε κλικ στο “Advanced Menu“.
- Τώρα ενεργοποιήστε το πλαίσιο ελέγχου δίπλα στο “Web Inspector“.
Πρέπει επίσης να ενεργοποιήσετε το μενού Developer στον Mac σας, όπως καθοδηγήθηκε παραπάνω. Μόλις ενεργοποιήσετε αυτές τις λειτουργίες στη συσκευή iOS και στον Mac σας, θα πρέπει να μπορείτε να δείτε το μενού Developer στο επάνω μέρος του Mac σας. Πρέπει να κάνετε κλικ σε αυτό για να δείτε το συνημμένο iPhone και την ιστοσελίδα που ανοίγει σε αυτό. Όταν μεταβαίνετε σε μια διαφορετική σελίδα, αλλάζετε επίσης το παράθυρο Web Inspector για τη συγκεκριμένη σελίδα στον Mac σας
Τι είναι το Elemental Panel
Το πρώτο πράγμα που πρέπει να γνωρίζετε είναι τι είναι το Element Panel. Αν θέλετε να αλλάξετε το σχεδιασμό ή οποιαδήποτε εξωτερικά στοιχεία της σελίδας, πρέπει να επεξεργαστείτε το CSS ή την HTML. Μπορείτε να το κάνετε αυτό χρησιμοποιώντας ένα εργαλείο ανάπτυξης που ονομάζεται Element panel. Θα σας επιτρέψει να ελέγξετε και να αλλάξετε τη σελίδα σας από το front-end. Μερικά από τα στοιχεία που μπορείτε να δείτε εκεί είναι :
- Πληροφορίες σχετικά με την εικόνα, όπως το μέγεθός της και η πηγή της
- Πίνακας CSS – αυτή η επιλογή χρησιμοποιείται για την αλλαγή του εξωτερικού στυλ της σελίδας. Μπορείτε να αλλάξετε τις παραμέτρους όπως γραμματοσειρές, μεγέθη, χρώματα εδώ
- Πληροφορίες DOM ή πίνακας DOM με αυτή την επιλογή μπορείτε να ελέγξετε την εμφάνιση της σελίδας. Μπορείτε να αλλάξετε τη θέση των στοιχείων και να πλοηγηθείτε πλήρως στα αρχεία HTML
- Ο πίνακας κονσόλας παρουσιάζει τις νέες δυνατότητες στο πλαίσιο των εργαλείων ανάπτυξης
- Ακροατές συμβάντων στοιχείου
- Σχόλια HTML
- Ανατροφοδότηση
Επιθεώρηση των αποδιδόμενων και φυσικών μεγεθών μιας εικόνας
Πολύ συχνά χρειάζεται να γνωρίζετε πληροφορίες σχετικά με μια εικόνα σε μια ιστοσελίδα, μπορείτε να την “επιθεωρήσετε”. Αυτό σας δίνει τη δυνατότητα να γνωρίζετε, για παράδειγμα, το μέγεθος της εικόνας. Για να το κάνετε αυτό πρέπει να τοποθετήσετε το δείκτη του ποντικιού σας πάνω από το συγκεκριμένο IMG ενώ βρίσκεστε στο δέντρο DOM
Επιθεώρηση συγκεκριμένης χρησιμοποιούμενης εικόνας από ένα σύνολο πηγών (srcset)
Στη συνέχεια, μπορείτε να ελέγξετε ποια έκδοση της εικόνας φορτώθηκε και ποια είναι η ακριβής πηγή srcset. Το srcset θα βοηθήσει το πρόγραμμα περιήγησης να ζητήσει την έκδοση της εικόνας με το μικρότερο μέγεθος, η οποία είναι ελαφρώς μεγαλύτερη από την πραγματική εικόνα. Αυτό χρησιμοποιείται για την προβολή ενός συνόλου εικόνων με διαφορετικές αναλύσεις για να επιλέξει ο περιηγητής. Αρχικά, επιλέξτε το στοιχείο IMG και, στη συνέχεια, ελέγξτε τις πληροφορίες $0.currentSrc στην κονσόλα. Σημειώστε ότι μπορείτε να αυξήσετε τα χαρακτηριστικά των εικόνων με το srcset, αν χρειάζεται να χρησιμοποιήσετε συσκευές με υψηλότερο DPI.
