JavaScript-suoritin
Suorita JavaScript-koodia selaimessa ja näe konsolin tulosteet heti. Asynkroninen koodi ja ylimmän tason await ovat tuettuja, virheet näytetään ja päättymättömän skriptin suoritus voidaan pysäyttää.
Syöte
Tuloste
Lue lisää
Mikä on JavaScript-suoritin?
JavaScript on kieli, jota suoritetaan jokaisessa verkkoselaimessa, ja useimmat kehittäjät testaavat sen pieniä osia liittämällä ne selaimen konsoliin. JavaScript-suoritin tekee saman omalla sivullaan. Kirjoitat muutaman rivin koodia, suoritat sen ja luet, mitä koodi tulostaa komennolla console.log. Se on nopea tapa tarkistaa funktion toiminta, kokeilla ideaa tai selvittää, mitä metodi palauttaa ilman projektin määrittämistä.
Työkalun kuvaus
Tämä työkalu suorittaa JavaScript-koodisi selaimessa ja näyttää kaiken, minkä koodi kirjoittaa konsoliin. Kirjoita tai liitä koodi vasemmalle ja paina Suorita tai paina Ctrl+Enter (Macissa Cmd+Enter). Tuloste näkyy oikealla, yksi rivi kutakin console-kutsua kohden, ja varoitukset sekä virheet merkitään värillä. Mitään ei suoriteta, ennen kuin pyydät sitä, joten voit muokata koodia vapaasti.
Koodi suoritetaan Web Workerissa, joka on selaimesi taustasäie. Siksi päättymättömästi suorittuva komentosarja ei jäädyttä sivua: paina Lopeta, niin se poistetaan. Koodiasi ei lähetetä palvelimelle.
Esimerkit
Tulosta laskutoimitus ja objekti:
const prices = [4.5, 12, 7.25];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log("Yhteensä:", total);
console.log({ count: prices.length, average: total / prices.length });Tuloste on:
Yhteensä: 23.75
{ count: 3, average: 7.916666666666667 }Odota asynkronista toimintoa ylätason await-komennolla:
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
console.log("Aloitus");
await sleep(1000);
console.log("Sekunnin kuluttua");Ominaisuudet
- Näyttää komentojen console.log, info, debug, warn ja error tulosteen sekä käyttää värejä varoituksille ja virheille
- Muotoilee objektit, taulukot, mapit, setit, luokat, päivämäärät ja virheet sekä käsittelee kehäviittauksia
- Tukee paikanhaltijoita, kuten %s, %d, %i, %f, %j ja %o, ensimmäisessä argumentissa
- Tukee komentoja console.group, count, time, assert, dir ja clear
- Suorittaa asynkronista koodia, mukaan lukien ylätason await-komennot, ajastimet ja promiset
- Ilmoittaa tulosteessa syntaksivirheistä, käsittelemättömistä virheistä ja käsittelemättömistä promise-hylkäyksistä
- Lopeta-painike päättää komentosarjan heti, vaikka se olisi juuttunut päättymättömään silmukkaan
- Säilytä lokit -asetus, joka on oletusarvoisesti käytössä, säilyttää aiempien suoritusten tulosteen, jotta voit verrata tuloksia
- Vie hiiren osoitin tulosterivin päälle nähdäksesi sen kirjauspäivämäärän ja -ajan
- Kopioi koko tuloste, tyhjennä se Tyhjennä-painikkeella tai lataa koodisi tiedostona
Näin se toimii
Kun painat Suorita, työkalu käynnistää uuden Web Workerin ja lähettää sille koodisi. Workerissa console-metodit korvataan, joten jokainen kutsu muunnetaan tekstiksi ja lähetetään takaisin sivulle. Koodisi kääritään asynkroniseen funktioon, mikä mahdollistaa await-komennon käytön ylätasolla.
Tulosteen alla oleva tilapalkki näyttää tilan Suoritetaan, kun koodiasi suoritetaan tai käynnistämäsi ajastin odottaa edelleen. setInterval pitää suorituksen käynnissä, kunnes tyhjennät sen tai painat Lopeta. Jokainen suoritus käynnistyy uudessa Workerissa, joten aiemman suorituksen muuttujia ei jää jäljelle. Tuloste säilytetään suoritusten välillä, kun Säilytä lokit on valittuna. Poista valinta, jos haluat aloittaa jokaisen suorituksen tyhjällä tulosteella, tai paina Tyhjennä tyhjentääksesi sen milloin tahansa.
Vinkkejä
- Käytä komentoa console.log, älä viimeistä lauseketta: viimeisen rivin arvoa ei tulosteta, joten pelkkä
1 + 2ei näytä mitään - Workerilla ei ole sivua, joten document-, window- ja muut DOM-objektit eivät ole käytettävissä. Käytä yleiseen nimiavaruuteen viittaamiseen
self-objektia - Staattiset import-lauseet eivät toimi tämänkaltaisessa koodissa
- Tulosteessa säilytetään uusimmat 1000 riviä, ja yksittäinen rivi katkaistaan 10000 merkin jälkeen
- fetch-komennolla tehdyt pyynnöt lähetetään selaimestasi muiden pyyntöjen tapaan, ja niihin sovelletaan tavanomaisia cross-origin-sääntöjä
- Suorita vain koodia, johon luotat, aivan kuten selaimen konsolissa