Home-theater-designers
Το Chrome DevTools είναι ένα βασικό πλεονέκτημα για προγραμματιστές. Ενώ άλλα προγράμματα περιήγησης προσφέρουν αρκετά εύχρηστα εργαλεία αντιμετώπισης προβλημάτων, το Chrome DevTools αξίζει την προσοχή σας λόγω της πολυλειτουργικής διεπαφής και της δημοτικότητάς του.
Το Chrome είναι το πιο δημοφιλές πρόγραμμα περιήγησης για προγραμματιστές λόγω της ισχυρής σειράς εργαλείων εντοπισμού σφαλμάτων. Η χρήση του Chrome DevTools είναι εύκολη, αλλά πρέπει να καταλάβετε πώς λειτουργεί για να αξιοποιήσετε στο έπακρο.
Πώς λειτουργούν τα Εργαλεία προγραμματιστών Chrome
Το Chrome DevTools σάς επιτρέπει να επιλύετε προβλήματα σε έναν ιστότοπο μέσω της κονσόλας σφάλματος και άλλων εργαλείων εντοπισμού σφαλμάτων και παρακολούθησης. Η χρήση του DevTools εκθέτει τα παραθυράκια προσώπου και σας επιτρέπει να παρακολουθείτε πώς εμφανίζεται ο ιστότοπός σας σε κινητές συσκευές και συσκευές tablet.
Με το DevTools, μπορείτε να πραγματοποιείτε αλλαγές σε πραγματικό χρόνο σε κώδικα ενός ιστότοπου, όπως JavaScript, HTML και CSS και να λαμβάνετε άμεσα αποτελέσματα των αλλαγών σας.
Οι αλλαγές που κάνετε μέσω του DevTools δεν επηρεάζουν μόνιμα τον ιστότοπο. Εμφανίζουν μόνο προσωρινά το αναμενόμενο αποτέλεσμα σαν να τα είχατε εφαρμόσει στον πραγματικό πηγαίο κώδικα. Αυτό σας επιτρέπει να επεξεργαστείτε τρόπους για να φορτώσετε τον ιστότοπό σας πολύ πιο γρήγορα και διευκολύνει το σιδέρωμα σφαλμάτων.
Πώς να αποκτήσετε πρόσβαση στο Chrome DevTools
Μπορείτε να αποκτήσετε πρόσβαση στο Chrome DevTools με διάφορους τρόπους. Για να ανοίξετε τα εργαλεία προγραμματιστή με τη μέθοδο συντόμευσης στο Mac OS, πατήστε Cmd + Opt + I Το Εάν χρησιμοποιείτε το λειτουργικό σύστημα Windows, πατήστε το Ctrl + Shift + I πλήκτρα στο πληκτρολόγιό σας.
Εναλλακτικά, μπορείτε να αποκτήσετε πρόσβαση στα εργαλεία προγραμματιστή του Chrome κάνοντας κλικ στις τρεις τελείες στην επάνω δεξιά γωνία της οθόνης. Κατευθύνομαι προς Περισσότερα εργαλεία και επιλέξτε Εργαλεία προγραμματιστή Το Μια άλλη επιλογή είναι να κάνετε δεξί κλικ στην ιστοσελίδα και να κάνετε κλικ στο Επιθεωρώ επιλογή.
Χρήση των Εργαλείων προγραμματιστών Chrome για διάγνωση ιστότοπου
Το Chrome DevTools προσφέρει διάφορους τρόπους για να τροποποιήσετε και να αντιμετωπίσετε προβλήματα σε μια ιστοσελίδα. Ας ρίξουμε μια ματιά σε μερικούς από τους τρόπους με τους οποίους μπορεί να σας βοηθήσει το DevTools.
Δείτε πώς φαίνεται ο ιστότοπός σας σε ένα smartphone
Μόλις αλλάξετε το πρόγραμμα περιήγησής σας Chrome σε λειτουργία προγραμματιστή, αποδίδει μια έκδοση μισού μεγέθους της ιστοσελίδας σας. Ωστόσο, αυτό δεν θα σας δώσει μια πραγματική εικόνα για το πώς θα ήταν σε ένα smartphone ή tablet.
Ευτυχώς, εκτός από τη ρύθμιση του μεγέθους οθόνης μιας ιστοσελίδας, το Chrome DevTools σάς επιτρέπει επίσης να κάνετε εναλλαγή μεταξύ διαφορετικών τύπων και εκδόσεων οθόνης για κινητά.
Για να αποκτήσετε πρόσβαση σε αυτήν την επιλογή, κάντε εναλλαγή στο Επιθεωρώ τρόπος. Στη συνέχεια, κάντε κλικ στο Ευαίσθητος αναπτυσσόμενο μενού στην επάνω αριστερή γωνία του DevTools και επιλέξτε την κινητή συσκευή που προτιμάτε. Στη συνέχεια, η ιστοσελίδα αποδίδει και προσαρμόζεται ώστε να ταιριάζει στο μέγεθος της κινητής συσκευής που επιλέξατε.
πώς μπορώ να αποκτήσω το δικό μου φίλτρο snapchat
Πρόσβαση στα αρχεία προέλευσης μιας ιστοσελίδας
Μπορείτε να αποκτήσετε πρόσβαση στα αρχεία που αποτελούν μια ιστοσελίδα μέσω του Chrome DevTools. Για πρόσβαση σε αυτά τα αρχεία, κάντε κλικ στο Πηγές επιλογή στο επάνω μέρος του μενού DevTools. Αυτό εκθέτει το σύστημα αρχείων της ιστοσελίδας και σας δίνει επίσης δυνατότητα επεξεργασίας.
Μπορείτε επίσης να αναζητήσετε αρχεία προέλευσης, τα οποία μπορεί να είναι χρήσιμα όταν αντιμετωπίζετε μια ιστοσελίδα που διαθέτει πολλούς πόρους. Για να αναζητήσετε ένα αρχείο προέλευσης μέσω του DevTools, κάντε κλικ στο Αναζήτηση επιλογή ακριβώς πάνω από την κονσόλα.
Ωστόσο, αν δεν μπορείτε να βρείτε το Αναζήτηση επιλογή, μια καλύτερη εναλλακτική λύση είναι η χρήση συντομεύσεων πληκτρολογίου. Στο Mac OS, πατήστε το Cmd + Opt + F κλειδιά για αναζήτηση αρχείου προέλευσης. Εάν χρησιμοποιείτε λειτουργικό σύστημα Windows, πατήστε το Ctrl + Shift + F κλειδί για πρόσβαση στη γραμμή αναζήτησης του αρχείου προέλευσης.
Πραγματοποιήστε ζωντανές επεξεργασίες σε μια ιστοσελίδα
Ένας από τους κύριους σκοπούς της χρήσης του DevTools είναι η εκτέλεση ενός άμεση ψεύτικη επεξεργασία των στοιχείων σε μια ιστοσελίδα Το Μόλις μεταβείτε στα εργαλεία προγραμματιστή, μπορείτε να επεξεργαστείτε το περιεχόμενο HTML ενός ιστότοπου κάνοντας κλικ στο Στοιχεία επιλογή. Στη συνέχεια, κάντε δεξί κλικ σε οποιοδήποτε σημείο θέλετε να εφαρμόσετε αλλαγές εντός του προγράμματος επεξεργασίας κώδικα και επιλέξτε Επεξεργασία ως HTML Το
Για να επεξεργαστείτε ιδιότητες CSS που δεν είναι ενσωματωμένες, επιλέξτε Πηγές Το Στη συνέχεια, επιλέξτε το αρχείο CSS που θέλετε να επεξεργαστείτε. Τοποθετήστε τον κέρσορα στη γραμμή επιλογής σας στην κονσόλα κώδικα για να πραγματοποιήσετε μια ζωντανή επεξεργασία. Με αυτόν τον τρόπο, έχετε άμεσα σχόλια για τυχόν αλλαγές στυλ που εφαρμόζετε στην ιστοσελίδα.
Λάβετε υπόψη ότι όταν επεξεργάζεστε μια σελίδα μέσω του DevTools, η επαναφόρτωση της σελίδας στο πρόγραμμα περιήγησής σας την επαναφέρει στην αρχική της μορφή και η επεξεργασία είναι ορατή μόνο σε εσάς. Η επεξεργασία μέσω του DevTools δεν επηρεάζει την ομαλή λειτουργία ή τη χρήση αυτού του ιστότοπου για άλλους χρήστες.
Αποσφαλμάτωση κώδικα JavaScript με την Κονσόλα DevTools
Ένας από τους καλύτερους τρόπους εντοπισμού σφαλμάτων JavaScript είναι η χρήση εργαλείων προγραμματιστή του Chrome. Σας δίνει μια άμεση αναφορά μη έγκυρων σεναρίων καθώς και την ακριβή τοποθεσία του σφάλματος.
Είναι καλή πρακτική να κρατάτε πάντα ανοιχτό το DevTools ενώ σχεδιάζετε έναν ιστότοπο με JavaScript. Για παράδειγμα, η εκτέλεση του console.log () η εντολή JavaScript σε ένα σύνολο οδηγιών εμφανίζει το αποτέλεσμα αυτού του αρχείου καταγραφής στην κονσόλα DevTools εάν το πρόγραμμα εκτελείται με επιτυχία.
Από προεπιλογή, η κονσόλα αναφέρει τυχόν προβλήματα JavaScript στον ιστότοπό σας. Μπορείτε να βρείτε την κονσόλα στο κάτω μέρος του DevTools ή να αποκτήσετε πρόσβαση σε αυτήν κάνοντας κλικ στο Κονσόλα επιλογή στο επάνω μέρος του παραθύρου Chrome DevTools.
Παρακολούθηση φόρτωσης πόρων από βάση δεδομένων
Εκτός από τον εντοπισμό σφαλμάτων JavaScript, η κονσόλα μπορεί επίσης να σας δώσει μια λεπτομέρεια των πόρων που δεν φορτώνουν σωστά από τη βάση δεδομένων του ιστότοπου.
Παρόλο που αυτός δεν είναι πάντα ο καλύτερος τρόπος για τον εντοπισμό σφαλμάτων σε θέματα backend, εξακολουθεί να σας λέει ποιοι πόροι επιστρέφουν ένα 404 σφάλμα μετά την εκτέλεση ενός ερωτήματος βάσης δεδομένων αυτών των στοιχείων.
Σχετικά: Συνήθη σφάλματα ιστοτόπου και τι σημαίνουν
Αλλάξτε τον προσανατολισμό των Εργαλείων προγραμματιστών Chrome
Για να αλλάξετε τη θέση των εργαλείων προγραμματιστή του Chrome, κάντε κλικ στις τρεις τελείες μενού στο DevTools (όχι στην κύρια στο πρόγραμμα περιήγησης). Στη συνέχεια, επιλέξτε τη θέση που προτιμάτε από το Πλευρά αποβάθρας επιλογή.
Εγκαταστήστε τις επεκτάσεις Chrome DevTools
Μπορείτε επίσης να εγκαταστήσετε επεκτάσεις για συγκεκριμένες γλώσσες ή πλαίσια που λειτουργούν με το Chrome DevTools. Η εγκατάσταση αυτών των επεκτάσεων σάς επιτρέπει να εντοπίζετε σφάλματα στην ιστοσελίδα σας πιο αποτελεσματικά.
Μπορείτε να αποκτήσετε πρόσβαση σε μια λίστα με τις διαθέσιμες επεκτάσεις για το Chrome DevTools στο Chrome Επιλεγμένες επεκτάσεις DevTools εκθεσιακός χώρος.
Ελέγξτε για ζητήματα ασφαλείας σε έναν ιστότοπο
Το Chrome DevTools σάς επιτρέπει να εκτιμάτε πόσο ασφαλής είναι ο ιστότοπός σας, με βάση παραμέτρους όπως η διαθεσιμότητα πιστοποιητικά ασφάλειας ιστού και πόσο ασφαλής είναι η σύνδεση, μεταξύ άλλων. Για να ελέγξετε αν ο ιστότοπός σας είναι ασφαλής, κάντε κλικ στο Ασφάλεια επιλογή στο επάνω μέρος του DevTools.
ο Ασφάλεια η καρτέλα σας δίνει μια επισκόπηση των στοιχείων ασφαλείας του ιστότοπού σας και σας ενημερώνει για τυχόν απειλές.
Ελέγξτε τον ιστότοπό σας
Το Chrome DevTools διαθέτει μια δυνατότητα που σας επιτρέπει να ελέγχετε τη συνολική απόδοση του ιστότοπού σας με βάση συγκεκριμένες παραμέτρους.
Για πρόσβαση σε αυτήν τη δυνατότητα, επιλέξτε το Φάρος επιλογή στο επάνω μέρος του παραθύρου DevTools. Στη συνέχεια, επιλέξτε τις παραμέτρους που θέλετε να ελέγξετε και, στη συνέχεια, σημειώστε είτε το Κινητό ή Επιφάνεια εργασίας επιλογές για να δείτε την απόδοση της ιστοσελίδας σας σε διαφορετικές πλατφόρμες.
Στη συνέχεια, κάντε κλικ στο Δημιουργία αναφοράς για να εκτελέσετε μια ανάλυση της ιστοσελίδας σας με βάση τις παραμέτρους που επιλέξατε νωρίτερα.
Μπορείτε επίσης να αξιολογήσετε τον χρόνο εκτέλεσης ή την απόδοση φόρτωσης ενός ιστότοπου κάνοντας κλικ στο Εκτέλεση επιλογή. Για να εκτελέσετε μια δοκιμή, κάντε κλικ στο εικονίδιο δίπλα στο Κάντε κλικ στο κουμπί εγγραφής επιλογή για εκτέλεση ανάλυσης χρόνου εκτέλεσης. Εναλλακτικά, κάντε κλικ στο κουμπί επαναφόρτωσης κάτω από αυτό για να αξιολογήσετε την απόδοση του χρόνου φόρτωσης. Κάντε κλικ στο Να σταματήσει για να σταματήσει ο αναλυτής και να εμφανιστούν τα αποτελέσματα.
Εκμεταλλευτείτε το Chrome DevTools
Ανάλογα με το για τι το χρειάζεστε, το Chrome DevTools σάς επιτρέπει να κάνετε κάτι περισσότερο από απλό εντοπισμό σφαλμάτων ιστότοπου. Ευτυχώς, το DevTools είναι εύκολο στη χρήση για προγραμματιστές όλων των επιπέδων δεξιοτήτων. Μπορείτε ακόμη και να μάθετε μερικά βασικά για την ανάπτυξη προσώπου ιστοτόπου αναζητώντας τον πηγαίο κώδικα των ιστότοπων που επισκέπτεστε.
δροσερά πράγματα να κάνετε με ένα βατόμουρο πι
Μπορεί επίσης να ανακαλύψετε κάποιες άλλες επιλογές που δεν συζητήσαμε σε αυτό το άρθρο. Έτσι, μη διστάσετε να παίξετε με τις διαθέσιμες δυνατότητες. Εκτός αυτού, η τροποποίηση αυτών των δυνατοτήτων δεν βλάπτει λίγο έναν ιστότοπο.
Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Πώς να χρησιμοποιήσετε το Chrome OS σε ένα Raspberry PiΔεν αντέχετε οικονομικά ένα Chromebook; Αναζητάτε μια εναλλακτική λύση για το Raspbian; Δείτε πώς μπορείτε να εγκαταστήσετε μια έκδοση του Chrome OS στο Raspberry Pi.
Διαβάστε Επόμενο Σχετικά θέματα- Διαδίκτυο
- Προγραμματισμός
- HTML
- Ανάπτυξη διαδικτύου
- JavaScript
- Google Chrome
Η Idowu είναι παθιασμένη με οτιδήποτε έξυπνη τεχνολογία και παραγωγικότητα. Στον ελεύθερο χρόνο του, παίζει με κωδικοποίηση και μεταβαίνει στη σκακιέρα όταν βαριέται, αλλά του αρέσει επίσης να ξεφεύγει από τη ρουτίνα κάθε τόσο. Το πάθος του για να δείξει στους ανθρώπους τον δρόμο γύρω από τη σύγχρονη τεχνολογία τον παρακινεί να γράψει περισσότερα.
Περισσότερα από το Idowu OmisolaΕγγραφείτε στο newsletter μας
Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για εγγραφή