Τι είναι ένας εκτελεστής JavaScript;

Η JavaScript είναι η γλώσσα που εκτελείται σε κάθε web browser και οι περισσότεροι developers δοκιμάζουν μικρά τμήματά της επικολλώντας τα στην κονσόλα του browser. Ένας εκτελεστής JavaScript κάνει την ίδια δουλειά σε μια δική του σελίδα. Γράφετε μερικές γραμμές κώδικα, τις εκτελείτε και διαβάζετε όσα εμφανίζει ο κώδικας με το console.log. Είναι ένας γρήγορος τρόπος να ελέγξετε τη συμπεριφορά μιας συνάρτησης, να δοκιμάσετε μια ιδέα ή να δείτε τι επιστρέφει μια μέθοδος, χωρίς να χρειάζεται να δημιουργήσετε project.

Περιγραφή εργαλείου

Αυτό το εργαλείο εκτελεί τη JavaScript στον browser σας και εμφανίζει όλα όσα γράφει ο κώδικας στην κονσόλα. Πληκτρολογήστε ή επικολλήστε κώδικα στα αριστερά και πατήστε «Εκτέλεση» ή πατήστε Ctrl+Enter (Cmd+Enter σε Mac). Η έξοδος εμφανίζεται στα δεξιά, μία γραμμή για κάθε κλήση console, με τις προειδοποιήσεις και τα σφάλματα να επισημαίνονται με χρώμα. Τίποτα δεν εκτελείται μέχρι να το ζητήσετε, επομένως μπορείτε να επεξεργάζεστε τον κώδικα ελεύθερα.

Ο κώδικας εκτελείται σε ένα Web Worker, δηλαδή σε ένα thread παρασκηνίου του browser σας. Επομένως, ένα script που δεν τερματίζεται δεν θα παγώσει τη σελίδα: πατήστε «Διακοπή» και το script τερματίζεται. Ο κώδικάς σας δεν αποστέλλεται σε server.

Παραδείγματα

Εκτύπωση ενός υπολογισμού και ενός αντικειμένου:

const prices = [4.5, 12, 7.25];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log("Σύνολο:", total);
console.log({ count: prices.length, average: total / prices.length });
JavaScript

Η έξοδος είναι:

Σύνολο: 23.75
{ count: 3, average: 7.916666666666667 }

Αναμονή για ασύγχρονες εργασίες με await στο ανώτατο επίπεδο:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
console.log("Έναρξη");
await sleep(1000);
console.log("Ένα δευτερόλεπτο αργότερα");
JavaScript

Δυνατότητες

  • Εμφανίζει την έξοδο των console.log, info, debug, warn και error, με χρώματα για τις προειδοποιήσεις και τα σφάλματα
  • Μορφοποιεί αντικείμενα, arrays, maps, sets, classes, ημερομηνίες και σφάλματα και διαχειρίζεται κυκλικές αναφορές
  • Υποστηρίζει placeholders όπως %s, %d, %i, %f, %j και %o στο πρώτο όρισμα
  • Υποστηρίζει τα console.group, count, time, assert, dir και clear
  • Εκτελεί ασύγχρονο κώδικα, συμπεριλαμβανομένων των await στο ανώτατο επίπεδο, των timers και των promises
  • Αναφέρει σφάλματα σύνταξης, σφάλματα που δεν捕捕πτονται και απορρίψεις promises που δεν έχουν υποστεί διαχείριση στην έξοδο
  • Κουμπί «Διακοπή» που τερματίζει αμέσως ένα script, ακόμη και όταν έχει κολλήσει σε ατέρμονα βρόχο
  • Η επιλογή «Διατήρηση αρχείων καταγραφής», ενεργοποιημένη από προεπιλογή, διατηρεί την έξοδο προηγούμενων εκτελέσεων ώστε να μπορείτε να συγκρίνετε τα αποτελέσματα
  • Τοποθετήστε τον δείκτη πάνω από μια γραμμή στην έξοδο για να δείτε την ημερομηνία και την ώρα καταγραφής της
  • Αντιγράψτε ολόκληρη την έξοδο, διαγράψτε την με το κουμπί «Εκκαθάριση» ή κατεβάστε τον κώδικά σας ως αρχείο

Πώς λειτουργεί

Όταν πατάτε «Εκτέλεση», το εργαλείο ξεκινά ένα νέο Web Worker και του στέλνει τον κώδικά σας. Μέσα στον worker, οι μέθοδοι console αντικαθίστανται, επομένως κάθε κλήση μετατρέπεται σε κείμενο και στέλνεται πίσω στη σελίδα. Ο κώδικάς σας περιβάλλεται από μια ασύγχρονη συνάρτηση, κάτι που επιτρέπει τη χρήση του await στο ανώτατο επίπεδο.

Η γραμμή κατάστασης κάτω από την έξοδο εμφανίζει την ένδειξη «Εκτελείται» όσο εκτελείται ο κώδικάς σας ή όσο ένας timer που ξεκινήσατε εξακολουθεί να περιμένει. Ένα setInterval διατηρεί την εκτέλεση ενεργή μέχρι να το διαγράψετε ή να πατήσετε «Διακοπή». Κάθε εκτέλεση ξεκινά με έναν νέο worker, επομένως οι μεταβλητές από προηγούμενη εκτέλεση δεν παραμένουν ποτέ. Η έξοδος διατηρείται μεταξύ των εκτελέσεων όσο είναι επιλεγμένη η «Διατήρηση αρχείων καταγραφής». Αποεπιλέξτε την για να ξεκινά κάθε εκτέλεση με κενή έξοδο ή πατήστε «Εκκαθάριση» για να την αδειάσετε οποιαδήποτε στιγμή.

Συμβουλές

  • Χρησιμοποιήστε το console.log και όχι μια τελική έκφραση: η τιμή της τελευταίας γραμμής δεν εκτυπώνεται, επομένως το 1 + 2 από μόνο του δεν εμφανίζει τίποτα
  • Ένας worker δεν διαθέτει σελίδα, επομένως τα document, window και άλλα αντικείμενα του DOM δεν είναι διαθέσιμα. Χρησιμοποιήστε το self για το global scope
  • Οι static δηλώσεις import δεν λειτουργούν σε αυτόν τον τύπο κώδικα
  • Η έξοδος διατηρεί τις 1.000 νεότερες γραμμές και μία μεμονωμένη γραμμή περικόπτεται μετά τους 10.000 χαρακτήρες
  • Τα requests που γίνονται με fetch αποστέλλονται από τον browser σας όπως οποιαδήποτε άλλα και υπόκεινται στους συνήθεις κανόνες cross-origin
  • Εκτελείτε μόνο κώδικα που εμπιστεύεστε, όπως θα κάνατε και στην κονσόλα του browser