Όμορφο όνομα εταιρείας στην κονσόλα χρωμίου. Εύχρηστες λειτουργίες της Κονσόλας προγραμματιστή του Chrome για τις οποίες ενδέχεται να μην γνωρίζετε

26.05.2019

Τα σύγχρονα προγράμματα περιήγησης παρέχουν ενσωματωμένα εργαλεία ανάπτυξης για JavaScript και άλλες τεχνολογίες. Αυτά τα εργαλεία περιλαμβάνουν μια κονσόλα, η οποία είναι παρόμοια με μια διεπαφή φλοιού, καθώς και εργαλεία για επιθεώρηση DOM, εντοπισμό σφαλμάτων και ανάλυση δραστηριότητας δικτύου.

Η κονσόλα μπορεί να χρησιμοποιηθεί για την καταγραφή πληροφοριών ως μέρος της διαδικασίας ανάπτυξης JavaScript. Η κονσόλα σάς επιτρέπει επίσης να αλληλεπιδράτε με μια ιστοσελίδα εκτελώντας εκφράσεις JavaScript στο περιβάλλον της σελίδας. Ουσιαστικά, η κονσόλα παρέχει τη δυνατότητα να γράφει κώδικα JavaScript και, εάν είναι απαραίτητο, να τον χειρίζεται.

Αυτό το σεμινάριο θα σας διδάξει πώς να χρησιμοποιείτε την κονσόλα JavaScript στο πρόγραμμα περιήγησης και θα σας παρουσιάσει άλλα ενσωματωμένα εργαλεία ανάπτυξης που μπορεί να σας φανούν χρήσιμα.

Εργασία με την κονσόλα JavaScript στο πρόγραμμα περιήγησης

Τα περισσότερα σύγχρονα προγράμματα περιήγησης ιστού που υποστηρίζουν HTML και XHTML παρέχουν από προεπιλογή πρόσβαση σε μια κονσόλα προγραμματιστή, όπου μπορείτε να εργαστείτε με JavaScript σε μια διεπαφή που μοιάζει με κέλυφος τερματικού. Σε αυτήν την ενότητα, θα μάθετε πώς να έχετε πρόσβαση στην κονσόλα σε Firefox και Chrome.

Πρόγραμμα περιήγησης Firefox

Αυτά τα εργαλεία σάς επιτρέπουν να επιθεωρείτε και να επεξεργάζεστε στοιχεία DOM, καθώς και να αναζητάτε αντικείμενα HTML που σχετίζονται με μια συγκεκριμένη σελίδα. Το DOM μπορεί να υποδείξει εάν ένα κομμάτι κειμένου ή μια εικόνα έχει ένα χαρακτηριστικό ID και μπορεί να καθορίσει την τιμή αυτού του χαρακτηριστικού.

Επιπλέον, στην πλαϊνή γραμμή ή κάτω από τον πίνακα DOM, μπορείτε να βρείτε τα στυλ CSS που χρησιμοποιούνται στο έγγραφο HTML ή στο φύλλο στυλ.

Για να επεξεργαστείτε το DOM σε πραγματικό χρόνο, κάντε διπλό κλικ στο επιλεγμένο στοιχείο. Για παράδειγμα, μπορείτε να δοκιμάσετε να γυρίσετε την ετικέτα

V

.

Και πάλι, μετά την ενημέρωση η σελίδα θα πάρει την προηγούμενη εμφάνισή της.

Καρτέλα Δίκτυο

Η καρτέλα Δίκτυο σάς επιτρέπει να παρακολουθείτε και να καταγράφετε αιτήματα δικτύου. Αυτή η καρτέλα εμφανίζει τα αιτήματα δικτύου του προγράμματος περιήγησης, συμπεριλαμβανομένων των αιτημάτων για φόρτωση της σελίδας, τον χρόνο που χρειάστηκε για την εξυπηρέτηση των αιτημάτων και πληροφορίες για κάθε αίτημα. Αυτά τα δεδομένα μπορούν να χρησιμοποιηθούν για τη βελτιστοποίηση της απόδοσης φόρτωσης σελίδας και τον εντοπισμό σφαλμάτων.

Μπορείτε να χρησιμοποιήσετε την καρτέλα Δίκτυο σε συνδυασμό με την κονσόλα JavaScript. Για παράδειγμα, μπορείτε να ξεκινήσετε τον εντοπισμό σφαλμάτων μιας σελίδας χρησιμοποιώντας την κονσόλα και, στη συνέχεια, να ανοίξετε την καρτέλα Δίκτυο και να προβάλετε τη δραστηριότητα δικτύου χωρίς να φορτώσετε ξανά τη σελίδα.

Ανταποκρίσιμος σχεδιασμός

Οι ιστότοποι με αποκριτικό σχεδιασμό προσαρμόζουν γρήγορα την εμφάνιση και τη λειτουργικότητά τους σε διαφορετικές συσκευές: κινητά τηλέφωνα, tablet, επιτραπέζιους υπολογιστές και φορητούς υπολογιστές. Το μέγεθος της οθόνης, η πυκνότητα των εικονοστοιχείων και η απόκριση αφής είναι παράγοντες που πρέπει να λαμβάνονται υπόψη κατά το σχεδιασμό ιστοσελίδων με απόκριση. Είναι επίσης σημαντικό να ληφθούν υπόψη οι αρχές του responsive design για να διασφαλιστεί ότι ο ιστότοπος είναι προσβάσιμος και λειτουργικός ανεξάρτητα από τη συσκευή στην οποία ανοίγει.

Τα σύγχρονα προγράμματα περιήγησης (συμπεριλαμβανομένων των Firefox και Chrome) παρέχουν μοντέλα για την τήρηση αρχών σχεδιασμού απόκρισης κατά την ανάπτυξη ιστότοπων και εφαρμογών. Αυτά τα μοντέλα μιμούνται τη συμπεριφορά μιας συγκεκριμένης συσκευής, η οποία σας επιτρέπει να δοκιμάσετε και να αναλύσετε όλες τις λειτουργίες του ιστότοπου.

Μπορείτε να μάθετε περισσότερα σχετικά με αυτό στα εγχειρίδια του προγράμματος περιήγησης:

Responsive Design Mode στον Firefox

συμπέρασμα

Αυτό το σεμινάριο παρέχει μια γρήγορη επισκόπηση της εργασίας με την κονσόλα JavaScript σε σύγχρονα προγράμματα περιήγησης ιστού. Μπορείτε επίσης να βρείτε πληροφορίες σχετικά με άλλα χρήσιμα εργαλεία ανάπτυξης εδώ.

Μετάφραση

Πώς να χρησιμοποιήσετε την κονσόλα προγραμματιστή για να μετατρέψετε το Google Chrome σε ένα είδος επεξεργασίας κειμένου; Τι νόημα έχει το εικονίδιο, γνωστό σε πολλούς από το jQuery,; $ ? Πώς μπορώ να εμφανίσω ένα σύνολο τιμών στην κονσόλα, διαμορφωμένο ως αρκετά αξιοπρεπές τραπέζι; Εάν οι απαντήσεις σε αυτές τις ερωτήσεις δεν σας έρχονται αμέσως στο μυαλό, τότε η καρτέλα Κονσόλατων εργαλείων προγραμματιστή του Chrome δεν έχει αποκαλυφθεί ακόμη σε όλο του το μεγαλείο.

Με την πρώτη ματιά, έχουμε μπροστά μας μια εντελώς συνηθισμένη κονσόλα JavaScript, η οποία είναι κατάλληλη μόνο για την εμφάνιση αρχείων καταγραφής απόκρισης διακομιστή ή τιμών μεταβλητών. Παρεμπιπτόντως, έτσι το χρησιμοποίησα όταν ξεκίνησα για πρώτη φορά τον προγραμματισμό. Ωστόσο, με τον καιρό, απέκτησα εμπειρία, έμαθα λίγο περισσότερα και ανακάλυψα απροσδόκητα ότι η κονσόλα Chrome μπορεί να κάνει πολλά πράγματα για τα οποία δεν είχα ιδέα. Θέλω να μιλήσω για αυτό σήμερα. Ναι, αν δεν διαβάζετε τώρα στο κινητό, μπορείτε να τα δοκιμάσετε όλα αμέσως.

1. Επιλογή στοιχείων DOM

Εάν είστε εξοικειωμένοι με το jQuery, δεν εναπόκειται σε εμένα να σας πω για τη σημασία δομών όπως $('.class')Και $('id'). Για όσους δεν γνωρίζουν, σας επιτρέπουν να επιλέξετε στοιχεία DOM προσδιορίζοντας τις κλάσεις και τα αναγνωριστικά που τους έχουν εκχωρηθεί. Η κονσόλα προγραμματιστή έχει παρόμοια λειτουργικότητα. Εδώ το "$", ωστόσο, δεν έχει καμία σχέση με το jQuery, αν και ουσιαστικά κάνει το ίδιο πράγμα. Αυτό είναι ένα ψευδώνυμο για τη συνάρτηση document.querySelector().

Εντολές της φόρμας $('tagName'), $('.class'), $('#id')Και $('.class #id')επιστρέψτε το πρώτο στοιχείο DOM που ταιριάζει με τον επιλογέα. Επιπλέον, εάν το jQuery είναι διαθέσιμο στο έγγραφο, το "$" του θα παρακαμφθεί από αυτήν τη λειτουργία της κονσόλας.

Υπάρχει ένα άλλο σχέδιο εδώ: $$ . Η χρήση του μοιάζει $$('Όνομα ετικέτας')ή $$('.class'). Σας επιτρέπει να επιλέξετε όλα τα στοιχεία DOM που ταιριάζουν με έναν επιλογέα και να τα τοποθετήσετε σε έναν πίνακα. Η εργασία με αυτό δεν διαφέρει από άλλες συστοιχίες. Για να επιλέξετε ένα συγκεκριμένο στοιχείο, μπορείτε να αποκτήσετε πρόσβαση σε αυτό κατά ευρετήριο.

Για παράδειγμα, η εντολή $$('.className')θα μας παρέχει έναν πίνακα με όλα τα στοιχεία της σελίδας με το όνομα της κλάσης που καθορίζεται κατά την κλήση της. Της ομάδας $$('.className')Και $$('.className') θα δώσει πρόσβαση, αντίστοιχα, στο πρώτο και το δεύτερο στοιχείο του πίνακα που προκύπτει.

Πειραματισμός με εντολές $ Και $$

2. Μετατρέψτε το πρόγραμμα περιήγησης σε πρόγραμμα επεξεργασίας κειμένου

Έχετε πιάσει ποτέ τον εαυτό σας να σκέφτεται ότι θα ήταν ωραίο να επεξεργαστείτε το κείμενο της ιστοσελίδας που διορθώνετε απευθείας στο πρόγραμμα περιήγησης; Εάν ναι, τότε θα σας αρέσει η εντολή που φαίνεται παρακάτω.

Document.body.contentEditable=true
Μετά την εκτέλεσή του στην κονσόλα, το έγγραφο που ανοίγει στο πρόγραμμα περιήγησης μπορεί να επεξεργαστεί χωρίς να χρειάζεται να αναζητήσετε το επιθυμητό τμήμα στον κώδικα HTML.

3. Εύρεση χειριστών συμβάντων συνδεδεμένων σε ένα στοιχείο

Κατά τη διάρκεια του εντοπισμού σφαλμάτων, μπορεί να χρειαστεί να βρείτε προγράμματα χειρισμού συμβάντων που είναι συνδεδεμένα με στοιχεία. Αυτό είναι πολύ εύκολο να γίνει χρησιμοποιώντας την κονσόλα. Το μόνο που χρειάζεται να κάνετε είναι να χρησιμοποιήσετε αυτήν την εντολή:

GetEventListeners($('επιλογέας'))
Ως αποτέλεσμα της εκτέλεσής του, θα δημιουργηθεί ένας πίνακας αντικειμένων που θα περιέχει μια λίστα γεγονότων στα οποία μπορεί να ανταποκριθεί το στοιχείο.

Χειριστές συμβάντων

Για να βρείτε έναν χειριστή για ένα συγκεκριμένο συμβάν, μπορείτε να χρησιμοποιήσετε την ακόλουθη κατασκευή:

GetEventListeners($('selector')).eventName.listener
Αυτή η εντολή θα εκτυπώσει τον κωδικό λειτουργίας του προγράμματος χειρισμού συμβάντων. Εδώ Όνομα συμβάντοςείναι ένας πίνακας που περιέχει όλα τα συμβάντα ενός συγκεκριμένου τύπου. Για παράδειγμα, στην πράξη μπορεί να μοιάζει με αυτό:

GetEventListeners($('#firstName')).click.listener
Ως αποτέλεσμα, θα λάβουμε τον κωδικό της συνάρτησης που σχετίζεται με το συμβάν Κάντε κλικστοιχείο με αναγνωριστικό όνομα.

4. Παρακολούθηση γεγονότων

Εάν θέλετε να παρατηρήσετε την εμφάνιση συμβάντων που συνδέονται με ένα συγκεκριμένο στοιχείο DOM, η κονσόλα μπορεί να σας βοηθήσει σε αυτό. Ακολουθούν ορισμένες εντολές που μπορείτε να χρησιμοποιήσετε για την παρακολούθηση συμβάντων.

Ομάδα monitorEvents($('επιλογέας'))σας επιτρέπει να οργανώσετε την παρακολούθηση όλων των συμβάντων που σχετίζονται με το στοιχείο στο οποίο αντιστοιχεί ο επιλογέας. Όταν συμβαίνει ένα συμβάν, γίνεται μια καταχώρηση στην κονσόλα. Για παράδειγμα, η εντολή monitorEvents($('#firstName'))θα σας επιτρέψει να καταγράψετε όλα τα συμβάντα που σχετίζονται με ένα στοιχείο του οποίου το αναγνωριστικό είναι όνομα.
Ομάδα monitorEvents($('selector'),'eventName')παρόμοιο με το προηγούμενο, αλλά απευθύνεται σε μια συγκεκριμένη εκδήλωση. Εδώ, εκτός από τον επιλογέα στοιχείων, το όνομα συμβάντος μεταβιβάζεται επίσης στη συνάρτηση. Αυτή η εντολή θα σας επιτρέψει να εμφανίσετε δεδομένα σχετικά με την εμφάνιση ενός συμβάντος στην κονσόλα. Για παράδειγμα, η εντολή monitorEvents($('#firstName'),'click')θα εμφανίζει πληροφορίες μόνο για το συμβάν Κάντε κλικστοιχείο με αναγνωριστικό όνομα.
Ομάδα monitorEvents($('selector'),['eventName1','eventName3",….])σας επιτρέπει να παρακολουθείτε πολλαπλά επιλεγμένα συμβάντα. Εδώ μεταβιβάζεται ένας πίνακας συμβολοσειρών στη συνάρτηση, η οποία περιέχει τα ονόματα των συμβάντων. Για παράδειγμα, αυτή η εντολή: monitorEvents($('#firstName'),['click','focus'])θα εξάγει πληροφορίες συμβάντων στην κονσόλα Κάντε κλικΚαι Συγκεντρώνωγια στοιχείο με αναγνωριστικό όνομα.
Ομάδα unmonitorEvents($('επιλογέας'))σας επιτρέπει να διακόψετε την παρακολούθηση και την καταγραφή συμβάντων στην κονσόλα.

5. Μέτρηση του χρόνου εκτέλεσης ενός τμήματος κώδικα

Η λειτουργία προβολής είναι διαθέσιμη στην κονσόλα Chrome console.time('labelName'), το οποίο παίρνει μια ετικέτα ως όρισμα και ξεκινά ένα χρονόμετρο. Μια ακόμη λειτουργία console.timeEnd('labelName'), σταματά το χρονόμετρο στο οποίο έχει εκχωρηθεί η ετικέτα που της έχει μεταβιβαστεί. Ακολουθεί ένα παράδειγμα χρήσης αυτών των συναρτήσεων:

Console.time("myTime"); //Εκκινεί ένα χρονόμετρο με την ένδειξη myTime console.timeEnd("myTime"); //Διακόπτει το χρονόμετρο με την ένδειξη myTime //Έξοδος: myTime:123,00 ms
Το παραπάνω παράδειγμα σάς επιτρέπει να μάθετε το χρόνο μεταξύ της έναρξης και της διακοπής ενός χρονοδιακόπτη. Μπορείτε να κάνετε το ίδιο πράγμα μέσα σε ένα πρόγραμμα JavaScript και να βρείτε το χρόνο εκτέλεσης ενός κομματιού κώδικα.

Ας υποθέσουμε ότι πρέπει να μάθω τη διάρκεια ενός βρόχου. Μπορείτε να το κάνετε ως εξής:

Console.time("myTime"); // Ξεκινά ένα χρονόμετρο με την ένδειξη myTime for(var i=0; i< 100000; i++){ 2+4+5; } console.timeEnd("mytime"); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms

6. Εμφάνιση των τιμών των μεταβλητών με τη μορφή πινάκων

Ας υποθέσουμε ότι έχουμε μια σειρά από αντικείμενα όπως αυτό:

Var myArray=[(a:1,b:2,c:3),(a:1,b:2,c:3,d:4),(k:11,f:22),(a:1 ,β:2,γ:3)]
Εάν το εμφανίσετε στην κονσόλα, θα έχετε μια ιεραρχική δομή με τη μορφή, στην πραγματικότητα, μιας σειράς αντικειμένων. Αυτό είναι ένα χρήσιμο χαρακτηριστικό, οι κλάδοι της δομής μπορούν να επεκταθούν με την προβολή των περιεχομένων των αντικειμένων. Ωστόσο, με αυτήν την προσέγγιση είναι δύσκολο να κατανοήσουμε, για παράδειγμα, πώς σχετίζονται οι ιδιότητες παρόμοιων στοιχείων. Για να είναι πιο βολική η εργασία με τέτοια δεδομένα, μπορούν να μετατραπούν σε μορφή πίνακα. Για να το κάνετε αυτό, χρησιμοποιήστε την ακόλουθη εντολή:

Console.table(variableName)
Σας επιτρέπει να εμφανίσετε μια μεταβλητή και όλες τις ιδιότητες της σε μορφή πίνακα. Εδώ είναι πώς φαίνεται.

Εμφάνιση μιας σειράς αντικειμένων ως πίνακα

7. Δείτε τον κωδικό στοιχείου

Μπορείτε να μεταβείτε γρήγορα στον κωδικό στοιχείου από την κονσόλα χρησιμοποιώντας τις ακόλουθες εντολές:

Ομάδα επιθεώρηση($('επιλογέας'))σας επιτρέπει να ανοίξετε τον κωδικό του στοιχείου που αντιστοιχεί στον επιλογέα στον πίνακα ΣτοιχείαΕργαλεία προγραμματιστών Google Chrome. Για παράδειγμα, η εντολή inspect($('#firstName'))θα σας επιτρέψει να δείτε τον κωδικό ενός στοιχείου με ένα αναγνωριστικό όνομα. Ομάδα επιθεώρηση ($$('a'))θα ανοίξει τον κωδικό για τον τέταρτο σύνδεσμο που υπάρχει στο DOM.
Εντολές της φόρμας $0 , $1 , $2 Σας επιτρέπει να πλοηγηθείτε γρήγορα σε στοιχεία που προβάλατε πρόσφατα. Για παράδειγμα, $0 θα ανοίξει τον κωδικό του στοιχείου που προβλήθηκε πιο πρόσφατα και ούτω καθεξής.

8. Εμφάνιση λίστας ιδιοτήτων στοιχείων

Εάν πρέπει να δείτε τη λίστα των ιδιοτήτων ενός στοιχείου, η κονσόλα θα σας βοηθήσει και σε αυτό. Εδώ χρησιμοποιείται η ακόλουθη εντολή:

Διεύθυνση($('επιλογέας'))
Επιστρέφει ένα αντικείμενο που περιέχει ιδιότητες που σχετίζονται με το δεδομένο στοιχείο DOM. Όπως και σε άλλες παρόμοιες περιπτώσεις, τα περιεχόμενα αυτού του αντικειμένου μπορούν να εξεταστούν με την προβολή της δενδρικής δομής του.

9. Κλήση του τελευταίου ληφθέντος αποτελέσματος

Η κονσόλα μπορεί να χρησιμοποιηθεί ως αριθμομηχανή, όπως πιθανότατα γνωρίζουν όλοι. Αλλά λίγοι άνθρωποι γνωρίζουν ότι διαθέτει ενσωματωμένα εργαλεία που σας επιτρέπουν να χρησιμοποιείτε τα αποτελέσματα προηγούμενων υπολογισμών σε εντολές. Από το σχεδιασμό $_ μπορείτε να ανακτήσετε το αποτέλεσμα της προηγούμενης έκφρασης από τη μνήμη. Έτσι φαίνεται:

2+3+4 9 //- Το αποτέλεσμα της άθροισης είναι 9 $_ 9 // Εμφανίζεται το τελευταίο αποτέλεσμα που λήφθηκε $_ * $_ 81 // Εφόσον το τελευταίο αποτέλεσμα είναι 9, έχουμε 81 Math.sqrt($ _) 9 // Τετραγωνική ρίζα από το τελευταίο αποτέλεσμα, που ήταν 81 $_ 9 // Παίρνουμε ξανά 9 - το αποτέλεσμα του προηγούμενου υπολογισμού

10. Καθαρισμός κονσόλας και μνήμης

Εάν πρέπει να καθαρίσετε την κονσόλα και τη μνήμη, χρησιμοποιήστε αυτήν την απλή εντολή:

Σαφή()
Αφού πατήσετε το Enter, η καθαρή κονσόλα θα είναι έτοιμη για νέα πειράματα.
Αυτό είναι όλο.

11, 12, 13, 14…

Ειλικρινά μιλώντας, δεν είναι μόνο αυτό. Έδειξα μόνο μερικές από τις μη προφανείς δυνατότητες της κονσόλας Google Chrome. Στην πραγματικότητα, αυτοί

Google Chrome,

HTML,

JavaScript,

Ανάπτυξη ιστοσελίδας

Μετάφραση

1. Επιλογή στοιχείων DOM

Πειραματισμός με εντολές $ Και $$

2. Μετατρέψτε το πρόγραμμα περιήγησης σε πρόγραμμα επεξεργασίας κειμένου

3. Εύρεση χειριστών συμβάντων συνδεδεμένων σε ένα στοιχείο

Χειριστές συμβάντων

4. Παρακολούθηση γεγονότων

Ομάδα monitorEvents($('επιλογέας'))σας επιτρέπει να οργανώσετε την παρακολούθηση όλων των συμβάντων που σχετίζονται με το στοιχείο στο οποίο αντιστοιχεί ο επιλογέας. Όταν συμβαίνει ένα συμβάν, γίνεται μια καταχώρηση στην κονσόλα. Για παράδειγμα, η εντολή monitorEvents($('#firstName'))θα σας επιτρέψει να καταγράψετε όλα τα συμβάντα που σχετίζονται με ένα στοιχείο του οποίου το αναγνωριστικό είναι όνομα.
Ομάδα monitorEvents($('selector'),'eventName')παρόμοιο με το προηγούμενο, αλλά απευθύνεται σε μια συγκεκριμένη εκδήλωση. Εδώ, εκτός από τον επιλογέα στοιχείων, το όνομα συμβάντος μεταβιβάζεται επίσης στη συνάρτηση. Αυτή η εντολή θα σας επιτρέψει να εμφανίσετε δεδομένα σχετικά με την εμφάνιση ενός συμβάντος στην κονσόλα. Για παράδειγμα, η εντολή monitorEvents($('#firstName'),'click')θα εμφανίζει πληροφορίες μόνο για το συμβάν Κάντε κλικστοιχείο με αναγνωριστικό όνομα.
Ομάδα monitorEvents($('selector'),['eventName1','eventName3",….])σας επιτρέπει να παρακολουθείτε πολλαπλά επιλεγμένα συμβάντα. Εδώ μεταβιβάζεται ένας πίνακας συμβολοσειρών στη συνάρτηση, η οποία περιέχει τα ονόματα των συμβάντων. Για παράδειγμα, αυτή η εντολή: monitorEvents($('#firstName'),['click','focus'])θα εξάγει πληροφορίες συμβάντων στην κονσόλα Κάντε κλικΚαι Συγκεντρώνωγια στοιχείο με αναγνωριστικό όνομα.
Ομάδα unmonitorEvents($('επιλογέας'))σας επιτρέπει να διακόψετε την παρακολούθηση και την καταγραφή συμβάντων στην κονσόλα.

5. Μέτρηση του χρόνου εκτέλεσης ενός τμήματος κώδικα

Ας υποθέσουμε ότι πρέπει να μάθω τη διάρκεια ενός βρόχου. Μπορείτε να το κάνετε ως εξής:

6. Εμφάνιση των τιμών των μεταβλητών με τη μορφή πινάκων

Ας υποθέσουμε ότι έχουμε μια σειρά από αντικείμενα όπως αυτό:

Εμφάνιση μιας σειράς αντικειμένων ως πίνακα

7. Δείτε τον κωδικό στοιχείου

Μπορείτε να μεταβείτε γρήγορα στον κωδικό στοιχείου από την κονσόλα χρησιμοποιώντας τις ακόλουθες εντολές:

Ομάδα επιθεώρηση($('επιλογέας'))σας επιτρέπει να ανοίξετε τον κωδικό του στοιχείου που αντιστοιχεί στον επιλογέα στον πίνακα ΣτοιχείαΕργαλεία προγραμματιστών Google Chrome. Για παράδειγμα, η εντολή inspect($('#firstName'))θα σας επιτρέψει να δείτε τον κωδικό ενός στοιχείου με ένα αναγνωριστικό όνομα. Ομάδα επιθεώρηση ($$('a'))θα ανοίξει τον κωδικό για τον τέταρτο σύνδεσμο που υπάρχει στο DOM.
Εντολές της φόρμας $0 , $1 , $2 Σας επιτρέπει να πλοηγηθείτε γρήγορα σε στοιχεία που προβάλατε πρόσφατα. Για παράδειγμα, $0 θα ανοίξει τον κωδικό του στοιχείου που προβλήθηκε πιο πρόσφατα και ούτω καθεξής.

8. Εμφάνιση λίστας ιδιοτήτων στοιχείων

9. Κλήση του τελευταίου ληφθέντος αποτελέσματος

10. Καθαρισμός κονσόλας και μνήμης

Εάν πρέπει να καθαρίσετε την κονσόλα και τη μνήμη, χρησιμοποιήστε αυτήν την απλή εντολή:

Σαφή()
Αφού πατήσετε το Enter, η καθαρή κονσόλα θα είναι έτοιμη για νέα πειράματα.
Αυτό είναι όλο.

11, 12, 13, 14…

Πολλοί άνθρωποι χρησιμοποιούν προγράμματα περιήγησης που μας κάνουν ένα με το παγκόσμιο Διαδίκτυο. Ωστόσο, πώς είναι δομημένες οι σελίδες του Διαδικτύου, πώς να τις γράψετε μόνοι σας - αυτές είναι πληροφορίες μόνο για όσους θέλουν να δημιουργήσουν κάτι νέο. Όλες αυτές οι δυνατότητες είναι κρυμμένες για απλούς χρήστες, όλα για λόγους απλότητας και διαισθητικότητας, αλλά σε αυτό το άρθρο θα εξετάσουμε το θέμα του πώς να ανοίξετε την κονσόλα στο πρόγραμμα περιήγησης Yandex, γιατί δημιουργήθηκε, ποια γλώσσα υποστηρίζει και πολλά άλλα . Το άρθρο συνιστάται για χρήστες όχι μόνο του προγράμματος περιήγησης Yandex

Γιατί χρειάζεστε μια κονσόλα σε ένα πρόγραμμα περιήγησης;

Υπάρχουν τρεις λόγοι για να δημιουργήσετε μια κονσόλα στο πρόγραμμα περιήγησης:

Για τον εντοπισμό σφαλμάτων του ίδιου του προγράμματος περιήγησης στο στάδιο του σχεδιασμού.
Να εκπαιδεύσει νέους επαγγελματίες στις λειτουργίες ενός συγκεκριμένου προγράμματος περιήγησης.
Για επαγγελματίες να διορθώσουν τις σελίδες τους στο Διαδίκτυο σε πραγματικό χρόνο.

Λίγοι γνωρίζουν, αλλά μπορείτε να γράψετε τον δικό σας ιστότοπο χρησιμοποιώντας μόνο 2 πράγματα: γνώση και ένα σημειωματάριο. Ωστόσο, αυτή η μέθοδος είναι εξαιρετικά σπατάλη του χρόνου σας, επειδή θα πρέπει να αποθηκεύετε ξανά το έγγραφο μετά από κάθε αλλαγή οποιωνδήποτε παραμέτρων. Μια ειδική κονσόλα εντοπισμού σφαλμάτων έρχεται στη διάσωση - αυτό είναι ένα συγκεκριμένο πεδίο προγράμματος περιήγησης που περιέχει απολύτως όλες τις πληροφορίες σχετικά με τη σελίδα και τον πηγαίο κώδικα της. Εξερευνώντας το, μπορείτε να βρείτε πολλά ενδιαφέροντα πράγματα, συμπεριλαμβανομένων σφαλμάτων προγραμματιστή. Για να αποφύγετε λάθη, χρησιμοποιήστε την κονσόλα του προγράμματος περιήγησης.

Ας πούμε ότι έχετε δημιουργήσει μια σελίδα στο Διαδίκτυο, αλλά πρέπει να προσαρμόσετε την εικόνα στις απαιτούμενες διαστάσεις, η έξοδος έρχεται στην κονσόλα, η οποία έχει τη δυνατότητα εντοπισμού σφαλμάτων της σελίδας σε πραγματικό χρόνο, γεγονός που εξοικονομεί πολύ χρόνο και προσπάθεια. Στο επόμενο μέρος του άρθρου θα σας πούμε πώς να ανοίξετε την κονσόλα στο πρόγραμμα περιήγησης Yandex. Αυτή η γνώση σίγουρα θα σας βοηθήσει αν είστε αρχάριος webmaster.

Πώς να ανοίξετε την κονσόλα προγραμματιστή στο Yandex

Για να ανοίξετε την κονσόλα θα χρειαστείτε μια ειδική συντόμευση πληκτρολογίου. Εάν διαβάσετε την τεκμηρίωση για απολύτως οποιοδήποτε πρόγραμμα περιήγησης, θα διαπιστώσετε ότι η χρήση ποντικιού δεν είναι καν απαραίτητη. Υπάρχει ένας απίστευτος αριθμός συντομεύσεων πληκτρολογίου που μπορούν να εκπληρώσουν κάθε επιθυμία σας.

Οδηγίες για το πώς να ανοίξετε την κονσόλα στο πρόγραμμα περιήγησης Yandex:

Εκκινήστε το πρόγραμμα περιήγησης Yandex και, στη συνέχεια, περιμένετε μέχρι να φορτωθεί πλήρως στη μνήμη RAM, θα χρειαστούν μόνο λίγα δευτερόλεπτα.
Τώρα ανοίξτε οποιαδήποτε σελίδα στο Διαδίκτυο, για παράδειγμα, το Google, αλλά δεν έχει καμία σημασία, οποιαδήποτε θα κάνει.
Για να ανοίξετε τα εργαλεία Yandex, πατήστε τα ακόλουθα πλήκτρα: "Ctrl + Shift + I"
Εάν θέλετε να εργαστείτε ειδικά με JavaScript - αυτή είναι μια γλώσσα προγραμματισμού, τότε θα χρειαστεί να κρατήσετε πατημένα τα ακόλουθα πλήκτρα: "Ctrl + Shift + J"

Ωστόσο, διαφορετικά προγράμματα περιήγησης έχουν διαφορετικούς τρόπους ανοίγματος της κονσόλας, επομένως στην επόμενη παράγραφο θα δούμε τα πιο δημοφιλή προγράμματα περιήγησης.

Άνοιγμα της κονσόλας σε άλλα προγράμματα περιήγησης

Πρώτα απ 'όλα, αξίζει να ενημερώσετε: μην προσπαθήσετε να χρησιμοποιήσετε τους ίδιους συνδυασμούς πλήκτρων σε διαφορετικά προγράμματα περιήγησης. Υπήρξαν πολλές περιπτώσεις όπου οι χρήστες διέγραψαν κατά λάθος όλους τους σελιδοδείκτες τους και η επιστροφή τους μπορεί να είναι αρκετά προβληματική και μερικές φορές αδύνατη. Επομένως, παρακάτω θα δοθούν παραδείγματα για το πώς να ανοίξετε σωστά τις κονσόλες.

Google Chrome. Υπάρχουν δύο επιλογές: μεταβείτε στις ρυθμίσεις, όπου θα υπάρχει ένα κουμπί για να ανοίξετε την κονσόλα ή πατήστε το συνδυασμό πλήκτρων "Ctrl + Shift + I".
ΛΥΡΙΚΗ ΣΚΗΝΗ. Στο μενού "Εργαλεία ανάπτυξης" θα υπάρχει ένα κουμπί "Πηγαίος κώδικας" ή ο συνδυασμός πλήκτρων "Ctrl + U".
Firefox. Στις ρυθμίσεις του προγράμματος περιήγησης, είτε "Ctrl + Shift + J".
Σαφάρι. F12 ή μεταβείτε στα "Πρόσθετα", όπου θα υπάρχει "Εμφάνιση μενού για προγραμματιστή"

Τελικά

Ελπίζουμε ότι αυτό το άρθρο σας βοήθησε να κατανοήσετε πώς να ανοίξετε την κονσόλα στο πρόγραμμα περιήγησης Yandex. Αυτή η γνώση θα βοηθήσει ιδιαίτερα τους μαθητές, τους νέους προγραμματιστές, καθώς και τους απλούς χρήστες που θέλουν να μάθουν λίγο περισσότερα για την τεχνολογία των υπολογιστών, γιατί είναι το μέλλον του κόσμου μας.

Το API της γραμμής εντολών του Chrome DevTools περιέχει έναν μεγάλο αριθμό εύχρηστων λειτουργιών για την εκτέλεση απλών εργασιών: επιλογή και επιθεώρηση στοιχείων DOM, εμφάνιση δεδομένων σε αναγνώσιμη μορφή, εκτέλεση και επιθεώρηση ενός προγράμματος προφίλ και παρακολούθηση συμβάντων DOM.

Σημείωση:αυτό το API είναι διαθέσιμο μόνο μέσα στην κονσόλα. Δεν μπορείτε να αποκτήσετε πρόσβαση στη γραμμή εντολών API από σενάρια στη σελίδα.

$_

Το $_ επιστρέφει την τιμή της τελευταίας παράστασης που εκτελέστηκε.

Το παρακάτω παράδειγμα αποτιμάται στην απλή έκφραση (2 + 2). Στη συνέχεια εκτελείται το $_ και εκχωρείται η ίδια τιμή:

Σε αυτό το παράδειγμα, η έκφραση που εκτελέστηκε περιείχε έναν πίνακα ονομάτων. Η εκτέλεση του $_.length θα δώσει το μήκος του πίνακα και η ίδια η έκφραση $_ θα λάβει την τιμή της τελευταίας παράστασης που εκτελέστηκε, η οποία είναι 4:

$0 – $4

Οι εντολές $0 , $1 , $2 , $3 και $4 λειτουργούν ως αναφορές στα τελευταία 5 στοιχεία DOM που προβλήθηκαν στον πίνακα Στοιχεία ή στα τελευταία 5 αντικείμενα JS από το σωρό που επιλέχθηκαν στον πίνακα Προφίλ. Το $0 επιστρέφει το στοιχείο ή το αντικείμενο που επιλέχθηκε τελευταίο, το $1 επιστρέφει το προηγούμενο και ούτω καθεξής.

Στο παρακάτω παράδειγμα, ένα στοιχείο μέσου κατηγορίας επιλέγεται στον πίνακα Στοιχεία. Στην κονσόλα, το $0 πήρε την ίδια τιμή:

Στην παρακάτω εικόνα, επιλέγεται ένα άλλο στοιχείο στην ίδια σελίδα. Το $0 τώρα αναφέρεται σε αυτό το στοιχείο και το $1 στο προηγούμενο:

$(επιλογέας)

Ο $(επιλογέας) επιστρέφει μια αναφορά στο πρώτο στοιχείο DOM με τον καθορισμένο επιλογέα CSS. Αυτή η συνάρτηση είναι συντομογραφία για τη συνάρτηση document.querySelector().

Κάντε δεξί κλικ στο αποτέλεσμα και επιλέξτε "Reveal in Elements Panel" για να αναζητήσετε το στοιχείο στο DOM ή "Scroll in to View" για να το δείτε στη σελίδα.

Σημείωση:Εάν χρησιμοποιείτε βιβλιοθήκες όπως το jQuery που χρησιμοποιούν το σύμβολο $, τότε θα χρησιμοποιηθεί η λειτουργικότητα αυτής της βιβλιοθήκης.

$$(επιλογέας)

Το $$(επιλογέας) επιστρέφει έναν πίνακα στοιχείων που περιέχει τον καθορισμένο επιλογέα. Αυτή η εντολή είναι ισοδύναμη με την κλήση του document.querySelectorAll() .

Το παρακάτω παράδειγμα χρησιμοποιεί $$() για να δημιουργήσει έναν πίνακα με όλα τα στοιχεία στο έγγραφο και επιστρέφει την ιδιότητα src κάθε στοιχείου:

Var εικόνες = $$("img"); για (κάθε σε εικόνες) ( console.log(images.src); )