JavaScript çalıştırıcı nedir?

JavaScript, her web tarayıcısında çalışan dildir ve çoğu geliştirici küçük kod parçalarını tarayıcı konsoluna yapıştırarak test eder. JavaScript çalıştırıcı da aynı işi kendi sayfasında yapar. Birkaç satır kod yazıp çalıştırır ve kodun console.log ile yazdırdığı sonuçları okursunuz. Bir işlevin nasıl davrandığını kontrol etmek, bir fikri denemek veya bir yöntemin ne döndürdüğünü öğrenmek için proje kurmadan kullanılabilecek hızlı bir yöntemdir.

Araç açıklaması

Bu araç, JavaScript kodunuzu tarayıcınızda çalıştırır ve kodun konsola yazdığı her şeyi gösterir. Sol tarafa kod yazın veya yapıştırın ve Çalıştır düğmesine basın ya da Ctrl+Enter (Mac'te Cmd+Enter) tuşlarına basın. Çıktı sağ tarafta görünür; her console çağrısı bir satırda gösterilir, uyarılar ve hatalar renkle işaretlenir. Siz çalıştırmasını istemediğiniz sürece hiçbir şey çalışmaz; bu nedenle kodu özgürce düzenleyebilirsiniz.

Kod, tarayıcınızın arka planda çalışan bir iş parçacığı olan Web Worker içinde çalışır. Bu nedenle hiç sona ermeyen bir script sayfayı dondurmaz: Durdur düğmesine basın, script sonlandırılır. Kodunuz bir sunucuya gönderilmez.

Örnekler

Bir hesaplamayı ve nesneyi yazdırma:

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

Çıktı:

Toplam: 23.75
{ count: 3, average: 7.916666666666667 }

Üst düzey await ile asenkron işlemleri bekleme:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
console.log("Başlangıç");
await sleep(1000);
console.log("Bir saniye sonra");
JavaScript

Özellikler

  • Uyarılar ve hatalar için renkler kullanarak console.log, info, debug, warn ve error çıktısını gösterir
  • Nesneleri, dizileri, map'leri, set'leri, sınıfları, tarihleri ve hataları biçimlendirir; döngüsel başvuruları işler
  • İlk bağımsız değişkende %s, %d, %i, %f, %j ve %o gibi yer tutucuları destekler
  • console.group, count, time, assert, dir ve clear yöntemlerini destekler
  • Üst düzey await, zamanlayıcılar ve promise'ler dâhil olmak üzere asenkron kodu çalıştırır
  • Sözdizimi hatalarını, yakalanmamış hataları ve işlenmemiş promise reddetmelerini çıktıda bildirir
  • Sonsuz döngüde takılmış olsa bile scripti anında sonlandıran Durdur düğmesi sunar
  • Varsayılan olarak etkin olan Günlükleri koru seçeneği, sonuçları karşılaştırabilmeniz için önceki çalıştırmaların çıktısını saklar
  • Günlük çıktısına eklendiği tarih ve saati görmek için çıktıdaki bir satırın üzerine gelin
  • Tüm çıktıyı kopyalayın, Temizle düğmesiyle temizleyin veya kodunuzu dosya olarak indirin

Nasıl çalışır?

Çalıştır düğmesine bastığınızda araç yeni bir Web Worker başlatır ve kodunuzu ona gönderir. Worker içinde console yöntemleri değiştirilir; böylece her çağrı metne dönüştürülerek sayfaya geri gönderilir. Kodunuz, üst düzeyde await kullanımını mümkün kılan bir async işlevin içine sarılır.

Çıktının altındaki durum çubuğu, kodunuz çalışırken veya başlattığınız bir zamanlayıcı hâlâ beklerken Çalışıyor durumunu gösterir. Bir setInterval, siz bunu temizleyene veya Durdur düğmesine basana kadar çalıştırmayı sürdürür. Her çalıştırma yeni bir worker ile başlar; bu nedenle önceki çalıştırmadaki değişkenler geride kalmaz. Günlükleri koru seçeneği işaretliyken çıktı çalıştırmalar arasında saklanır. Her çalıştırmayı boş bir çıktıyla başlatmak için bu seçeneğin işaretini kaldırın veya istediğiniz zaman çıktıyı boşaltmak için Temizle düğmesine basın.

İpuçları

  • Son ifade yerine console.log kullanın: son satırın değeri yazdırılmaz; bu nedenle tek başına yazılan 1 + 2 hiçbir şey göstermez
  • Bir worker'da sayfa bulunmaz; bu nedenle document, window ve diğer DOM nesneleri kullanılamaz. Global kapsam için self kullanın
  • Bu tür kodlarda static import ifadeleri çalışmaz
  • Çıktı en yeni 1000 satırı saklar ve tek bir satır 10000 karakterden sonra kesilir
  • fetch ile yapılan istekler, diğer isteklerde olduğu gibi tarayıcınızdan gönderilir ve olağan cross-origin kurallarına tabidir
  • Tarayıcı konsolunda yaptığınız gibi yalnızca güvendiğiniz kodları çalıştırın