Ο κώδικας είναι επιρρεπής σε σφάλματα. Πολύ πιθανόν θα κάνετε σφάλματα ... Ω, μα τι λέω; Θα κάνετε οπωσδήποτε λάθη, τουλάχιστον αν είστε άνθρωπος, όχι ρομπότ.
Αλλά στο πρόγραμμα περιήγησης, οι χρήστες δεν βλέπουν τα λάθη από προεπιλογή. Έτσι, αν κάτι πάει στραβά στο script, δεν θα δούμε τι είναι σπασμένο και δεν μπορούμε να το διορθώσουμε.
Για να δούμε τα σφάλματα και να λάβουμε πολλές άλλες χρήσιμες πληροφορίες σχετικά με τα script, τα "developer tools" έχουν ενσωματωθεί στα προγράμματα περιήγησης.
Οι περισσότεροι προγραμματιστές κλίνουν προς το Chrome ή τον Firefox για ανάπτυξη, επειδή αυτά τα προγράμματα περιήγησης έχουν τα καλύτερα developer tools. Άλλα προγράμματα περιήγησης παρέχουν επίσης developer tools, μερικές φορές με ειδικές λειτουργίες, αλλά συνήθως προσπαθούν να "προφτάσουν" στο Chrome ή τον Firefox. Έτσι, οι περισσότεροι προγραμματιστές έχουν ένα "αγαπημένο" πρόγραμμα περιήγησης και μεταβαίνουν σε άλλους, εάν ένα πρόβλημα είναι συγκεκριμένο για τον browser.
Τα developer tools είναι ισχυρά, έχουν πολλά χαρακτηριστικά. Για να ξεκινήσετε, θα μάθουμε πώς να τα ανοίγουμε, να εξετάζουμε τα σφάλματα και να εκτελούμε τις εντολές της JavaScript.
Ανοίξτε τη σελίδα bug.html.
Υπάρχει ένα σφάλμα μέσα στον κώδικα της JavaScript. Είναι κρυμμένο από τα μάτια ενός τακτικού επισκέπτη, οπότε ας ανοίξουμε developer tools για να το δούμε.
Πάτησε key:F12 ή, εάν είσαι στο Mac, τότε key:Cmd+Opt+J.
Τα developer tools θα ανοίξουν στην καρτέλα Console από προεπιλογή.
Φαίνεται κάπως έτσι:
Η ακριβής εμφάνιση των develοper tools εξαρτάται από την έκδοση του Chrome. Αλλάζει από καιρό σε καιρό, αλλά πρέπει να είναι παρόμοια.
- Εδώ μπορούμε να δούμε το κόκκινο μήνυμα σφάλματος. Σε αυτήν την περίπτωση, στο script περιέχει μια άγνωστη εντολή "lalala".
- Στα δεξιά, υπάρχει ένας σύνδεσμος με δυνατότητα κλικ στην πηγή
bug.html: 12με τον αριθμό γραμμής όπου παρουσιάστηκε το σφάλμα.
Κάτω από το μήνυμα σφάλματος υπάρχει ένα μπλε σύμβολο >. Σηματοδοτεί μια "γραμμή εντολών" όπου μπορούμε να πληκτρολογήσουμε εντολές JavaScript. Πατήστε το πλήκτρο Enter για να τα εκτελέσετε (πλήκτρο: Shift + Enter για εισαγωγή εντολών πολλαπλών γραμμών).
Τώρα μπορούμε να δούμε λάθη, και αυτό είναι αρκετό για μια αρχή. Θα επιστρέψουμε αργότερα στα developer tools και θα καλύψουμε λεπτομερέστερα το σφάλμα στο κεφάλαιο info:debugging-chrome.
Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.
To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.
Τα περισσότερα προγράμματα περιήγησης χρησιμοποιούν το key:F12 για να ανοίξουν τα developer tools.
Η εμφάνιση και η αίσθηση είναι αρκετά όμοια. Μόλις μάθετε πώς να χρησιμοποιήσετε ένα από αυτά τα εργαλεία (μπορείτε να ξεκινήσετε με το Chrome), μπορείτε εύκολα να μεταβείτε σε άλλο.
Το Safari (πρόγραμμα περιήγησης του Mac, που δεν υποστηρίζεται από τα Windows / Linux) είναι λίγο ιδιαίτερο εδώ. Πρέπει πρώτα να ενεργοποιήσουμε το μενού "Develop menu".
<<<<<<< HEAD Ανοίξτε τις Προτιμήσεις και μεταβείτε στο παράθυρο "Για προχωρημένους". Υπάρχει ένα πλαίσιο ελέγχου στο κάτω μέρος:
Open Settings and go to the "Advanced" pane. There's a checkbox at the bottom:
52c1e61915bc8970a950a3f59bd845827e49b4bf
Τώρα, το πλήκτρο: Cmd + Opt + C μπορεί να αλλάξει την κονσόλα. Επίσης, σημειώστε ότι εμφανίστηκε το νέο στοιχείο μενού με τίτλο "Develop". Έχει πολλές εντολές και επιλογές.
Συνήθως, όταν βάζουμε μια γραμμή κώδικα στην κονσόλα, και στη συνέχεια πατάμε το πλήκτρο 'Enter', εκτελείται.
Για να εισαγάγετε πολλές γραμμές, πατήστε το πλήκτρο 'Shift + Enter'. Με αυτό τον τρόπο μπορείτε να εισάγετε μεγάλα κομμάτια κώδικα JavaScript.
- Τα Developer tools μας επιτρέπουν να βλέπουμε σφάλματα, να τρέχουμε εντολές, να εξετάζουμε μεταβλητές και πολλά άλλα.
- Μπορούν να ανοίξουν με
key: F12για τα περισσότερα προγράμματα περιήγησης στα Windows. Το Chrome για Mac χρειάζεταιkey:Cmd + Opt + J, Safari:key: Cmd + Opt + C(πρέπει πρώτα να ενεργοποιηθεί).
Τώρα έχουμε έτοιμο το περιβάλλον. Στην επόμενη ενότητα, θα διεισδύσουμε στην JavaScript.