Τα εργαλεία επιθεώρησης του Google Chrome δεν απευθύνονται μόνο σε προγραμματιστές ή προγραμματιστές ιστοσελίδων. Μπορείτε εύκολα να τα χρησιμοποιήσετε για να ανακαλύψετε περιεχόμενο σελίδας, να τροποποιήσετε προσωρινά στοιχεία, να αναλύσετε το σχεδιασμό οποιουδήποτε ιστότοπου, ακόμη και να ανεβάσετε εικόνες ή να τροποποιήσετε ορατό κείμενο χωρίς να αγγίξετε τον πραγματικό κώδικα. Αν πιστεύετε ότι αυτά τα εργαλεία είναι περίπλοκα ή μόνο για επαγγελματίες, ξανασκεφτείτε το. Σε αυτό το άρθρο, θα μάθετε απλούς και χρήσιμους τρόπους για να αξιοποιήσετε τα εργαλεία επιθεώρησης, ακόμα κι αν δεν έχετε τεχνικό υπόβαθρο.
Αν κοιτάξετε το εργαλείο επιθεώρησης Chrome χωρίς να κατανοήσετε καθόλου πώς λειτουργεί, το μόνο που θα δείτε είναι ένα σωρό μπερδεμένους κώδικες και πίνακες. Μπορεί να πιστεύετε ότι έχει περισσότερο νόημα για έναν προγραμματιστή, και θα έχετε δίκιο σε κάποιο βαθμό. Αλλά είμαι εδώ για να σας πω πώς αυτό το εργαλείο μπορεί να σας ωφελήσει, ακόμα κι αν δεν έχετε γράψει ποτέ ούτε μια γραμμή κώδικα στη ζωή σας.
Βρείτε συνδέσμους, μέσα ενημέρωσης και άλλους πόρους
Θέλετε να βρείτε κρυφούς συνδέσμους, εικόνες και αρχεία ήχου σε ιστότοπους; Το εργαλείο επιθεώρησης του Chrome μπορεί να σας βοηθήσει. Είναι χρήσιμο όταν θέλετε να κατεβάσετε εικόνες ή βίντεο στα οποία δεν μπορείτε να κάνετε δεξί κλικ ή να βρείτε την πηγή του ενσωματωμένου περιεχομένου. Οι σύνδεσμοι συνήθως τοποθετούνται μέσα σε ετικέτες που περιέχουν το γράμμα "a", οι εικόνες μέσα σε ετικέτες "img" και τα βίντεο μέσα σε ετικέτες "video", τα οποία μπορείτε να δείτε όλα στον πίνακα "Στοιχεία".
Ειδοποίηση
Δεν χρειάζεται να είστε προγραμματιστής για να χρησιμοποιήσετε το Chrome Inspector, αλλά η γνώση βασικών γνώσεων HTML είναι χρήσιμη. Η HTML είναι μια απλή γλώσσα που δημιουργεί ιστοσελίδες χρησιμοποιώντας ετικέτες. Η εκμάθηση των βασικών γνώσεων διαρκεί μόνο λίγα λεπτά.
Για να χρησιμοποιήσετε το εργαλείο, κάντε δεξί κλικ σε οποιοδήποτε στοιχείο σε μια ιστοσελίδα, όπως κείμενο, εικόνες ή συνδέσμους, και στη συνέχεια επιλέξτε "Επιθεώρηση" από το μενού.
Μπορείτε επίσης να πατήσετε Ctrl+Shift+C (σε Windows) ή Cmd+Shift+C (σε Mac) για να ανοίξετε το εργαλείο. Στη συνέχεια, πατήστε Ctrl+F (σε Windows) ή Cmd+F (σε Mac) για να αναζητήσετε συγκεκριμένα στοιχεία.
Προσαρμόστε την εμφάνιση του ιστότοπου
Μπορείτε επίσης να προσαρμόσετε προσωρινά την εμφάνιση ενός ιστότοπου χρησιμοποιώντας τον επιθεωρητή Chrome. Οι αλλαγές που κάνετε θα είναι προσωρινές, επειδή ο επιθεωρητής είναι ένα απομονωμένο περιβάλλον (κοινώς γνωστό ως sandbox). Αυτό που κάνετε δεν θα επηρεάσει τον κύριο ιστότοπο, πράγμα που σημαίνει ότι δεν χρειάζεται να ανησυχείτε για τυχόν σφάλματα.
Υπάρχουν πολλές χρήσεις εδώ όπου απλές προσαρμογές μπορούν να βελτιώσουν την εμπειρία χρήστη. Για παράδειγμα, εάν η γραμματοσειρά είναι πολύ μικρή, μπορείτε να την αλλάξετε. Μπορείτε ακόμη και να αλλάξετε το χρώμα φόντου σε πιο σκούρο χρώμα σε συνθήκες χαμηλού φωτισμού. Εάν ένα banner αποσπά την προσοχή, μπορείτε να το απενεργοποιήσετε.
Ειδοποίηση
Σε αυτήν την ενότητα, θα χρειαστεί να μάθετε τα βασικά του CSS (Cascading Style Sheets), μιας άλλης απλής γλώσσας που περιγράφει πώς πρέπει να εμφανίζονται τα στοιχεία μιας ιστοσελίδας. Και πάλι, δεν χρειάζεται να είστε προγραμματιστής. Αυτή η εισαγωγή Χρήσιμα μαθήματα CSS από το Mozilla Θα σας επιτρέψει να κατανοήσετε τις βασικές του έννοιες σε 15 λεπτά.
Ας ρίξουμε μια ματιά στο πρόβλημα του αποσπάσματος της προσοχής. Αν θέλετε να το ξεφορτωθείτε, μπορείτε να ελέγξετε το στοιχείο στην ιστοσελίδα και να τοποθετήσετε την ακόλουθη γραμμή κώδικα στον πίνακα Στυλ:
display: none;
Δεδομένου ότι ο επιθεωρητής εμφανίζεται στη δεξιά πλευρά του παραθύρου του προγράμματος περιήγησης από προεπιλογή, ο πίνακας "Στυλ" θα βρίσκεται συνήθως από κάτω του.
Είναι εξαιρετικά εύχρηστο, δεν απαιτεί εμπειρία προγραμματισμού και μπορείτε εύκολα να χρησιμοποιήσετε ένα CSS cheat sheet ή τεχνητή νοημοσύνη για να κάνετε τις απαραίτητες αλλαγές. Επιπλέον, προσφέρει επισήμανση γραμματικής και αυτόματη συμπλήρωση για να διασφαλίσετε ότι γράφετε καθαρό κώδικα.
Ανακαλύψτε κρυφό περιεχόμενο
Όπως ακριβώς μπορείτε να αποκρύψετε περιεχόμενο σε έναν ιστότοπο, μπορείτε επίσης να το κάνετε ορατό όταν είναι κρυφό. Αυτό θα μπορούσε να είναι σύνδεσμοι, πολυμέσα ή άλλο περιεχόμενο. Αυτό είναι χρήσιμο, για παράδειγμα, εάν θέλετε να δείτε ένα απόσπασμα άρθρου κρυμμένο πίσω από ένα paywall ή να ενεργοποιήσετε κρυφές λειτουργίες όπως κουμπιά και πεδία φόρμας για να δείτε τι κάνουν.
Ακολουθούν παραδείγματα κώδικα που μπορείτε να αναζητήσετε και να καταργήσετε στον πίνακα Στυλ για να δείτε κρυφό περιεχόμενο:
display: none;
visibility: hidden;
opacity: 0;Κάποιο περιεχόμενο ενδέχεται να είναι κρυφό χρησιμοποιώντας JavaScript, γεγονός που καθιστά λίγο δύσκολη την τροποποίησή του αν δεν είστε προγραμματιστής. Αλλά αυτό είναι μια συζήτηση για αργότερα.
Διάγνωση προβλημάτων ιστότοπου
Εάν ένας ιστότοπος είναι αργός, μερικές φορές μπορεί να είναι δύσκολο να διαγνωστεί το πρόβλημα. Μπορείτε να χρησιμοποιήσετε το εργαλείο δοκιμών του Chrome για να δείτε εάν το πρόβλημα οφείλεται στον ιστότοπο ή στο δίκτυό σας.
Για να το κάνετε αυτό, ανοίξτε το εργαλείο Chrome Inspector και επιλέξτε την καρτέλα "Δίκτυο". Ίσως θελήσετε να αναπτύξετε τον πίνακα, εάν δεν είναι ορατός για να δείτε τις άλλες καρτέλες. Εδώ, θα δείτε όλα όσα φορτώνει η σελίδα, συμπεριλαμβανομένων HTML, CSS, σεναρίων και πολυμέσων.
Αναζητήστε τυχόν στοιχεία που επισημαίνονται με κόκκινο χρώμα και ελέγξτε τη στήλη "Κατάσταση" για έναν κωδικό σφάλματος (όπως 404 ή 500). Στη συνέχεια, μπορείτε να επικοινωνήσετε με τον διαχειριστή του ιστότοπου και να αναφέρετε το σφάλμα και τα στοιχεία που επηρεάζονται.
Εναλλακτικά, μπορείτε να εξαγάγετε το αρχείο καταγραφής δικτύου κάνοντας κλικ στο εικονίδιο Λήψη στο μενού κάτω από τις καρτέλες. Στη συνέχεια, μπορείτε να το στείλετε σε έναν διαχειριστή, ώστε να αντιμετωπίσει το πρόβλημα και να διασφαλίσει ότι ο ιστότοπος λειτουργεί σωστά.
Εάν το δίκτυό σας φαίνεται να είναι το πρόβλημα, θα πρέπει να το αντιμετωπίσετε. Εάν είναι αργό, μπορείτε να λάβετε μέτρα για να επιταχύνετε τη σύνδεσή σας στο διαδίκτυο.
Μάθετε ανάπτυξη ιστοσελίδων
Αν βρίσκεστε στο δρόμο για να γίνετε προγραμματιστής ιστοσελίδων, το Chrome Inspector είναι ένα εξαιρετικό εργαλείο εκμάθησης. Το πιο σημαντικό, σας διδάσκει πώς να δομήσετε ιστότοπους.
Για παράδειγμα, η καρτέλα Στοιχεία δείχνει τη δομή HTML ενός ιστότοπου. Μπορεί επίσης να δείξει πώς να χρησιμοποιείτε κοινές ετικέτες όπως "div", "p" και "a", καθώς και CSS, για να δημιουργήσετε όμορφες διατάξεις.
Όπως αναφέρθηκε προηγουμένως, το εργαλείο επιθεώρησης σάς επιτρέπει να κάνετε προσωρινές αλλαγές στην HTML, την CSS και τη διάταξη του ιστότοπού σας. Αυτό παρέχει ένα καλό περιβάλλον εκπαίδευσης, ειδικά για μεγάλους ιστότοπους με σύνθετο κώδικα. Ο πειραματισμός σε αυτό το περιβάλλον είναι ένας καλός τρόπος για να δείτε πώς λειτουργούν οι τροποποιήσεις σας σε πραγματικό χρόνο και να ενισχύσετε όσα έχετε μάθει.
Το εργαλείο επιθεώρησης του Chrome μπορεί να είναι τρομακτικό, ειδικά για όσους δεν είναι έμπειροι στον προγραμματισμό. Ωστόσο, δεν χρειάζεται να είστε έμπειρος προγραμματιστής για να το χρησιμοποιήσετε. Εάν είστε διατεθειμένοι να καταβάλετε λίγη προσπάθεια για να κατανοήσετε τα βασικά της HTML και της CSS, μπορεί να αποτελέσει ένα πολύτιμο εργαλείο για τη βελτίωση της εμπειρίας περιήγησής σας.
Δεν χρειάζεται να είστε προγραμματιστής για να αξιοποιήσετε τα εργαλεία επιθεώρησης του Chrome. Με λίγα μόνο κλικ, μπορείτε να επεξεργαστείτε κείμενο, να αναλύσετε σχέδια, ακόμη και να δοκιμάσετε αλλαγές σε ιστότοπους πριν τις εφαρμόσετε στην πραγματικότητα. Αυτά τα εργαλεία σάς δίνουν μια βαθύτερη κατανόηση οποιασδήποτε σελίδας επισκέπτεστε, βελτιώνοντας σημαντικά την εμπειρία σας στο διαδίκτυο. Δοκιμάστε τις συμβουλές που έχουμε περιγράψει και θα διαπιστώσετε ότι χρησιμοποιείτε εργαλεία επιθεώρησης σε καταστάσεις που δεν περιμένατε ποτέ.
