HTML, CSS ve JS Playground

Ne işe yarar

Bu playground, front-end denemeleri için küçük bir online kod editörüdür. Söz dizimi vurgulamalı üç sekmede HTML, CSS ve JavaScript yazın; önizleme siz yazarken güncellenir, tıpkı CodePen veya JSFiddle gibi ama hesap gerektirmeden. Yerleşik konsol, console.log() çıktısını ve hataları JavaScript kodunuzdaki satır numarasıyla birlikte gösterir; böylece geliştirici araçlarını açmadan hata ayıklayabilirsiniz. Bu da onu bir telefonda veya ödünç alınmış bir bilgisayarda kullanışlı kılar.

Bir CSS yerleşimini denemek, bir iş arkadaşınız için bir hatayı yeniden üretmek, Stack Overflow’daki bir kod parçasını test etmek, yeni başlayan birine ders vermek veya hızlı bir prototip çizmek için kullanın.

Nasıl kullanılır

1. HTML, CSS ve JS sekmelerine yazın veya küçük bir sayaç demosuyla başlamak için Örnek düğmesine basın. Bir sekmedeki nokta, o sekmenin kod içerdiğini gösterir.
2. Önizleme, yazmayı bıraktıktan 0.6 saniye sonra otomatik olarak çalışır. Ağır betikler için Otomatik çalıştır seçeneğini kapatın ve hazır olduğunuzda Çalıştır düğmesine veya Ctrl+Enter tuşlarına basın.
3. Günlükler, uyarılar ve hatalar için Konsol’u izleyin; en yeni satır her zaman en üsttedir. Nesneler, diziler, Map’ler, Set’ler ve DOM öğeleri kompakt ve okunabilir bir biçimde gösterilir.
4. Kodu birine göndermek için Paylaş’ı kullanın. ZIP indir, index.html, style.css ve script.js dosyalarını gerçek bir projede kullanıma hazır ayrı dosyalar olarak kaydeder; HTML indir ise her şeyi herhangi bir tarayıcıda açılan tek bir index.html dosyası olarak kaydeder.

Kodunuz bu tarayıcıda saklanır; bu yüzden geri döndüğünüzde hâlâ oradadır. Tab tuşu iki boşlukla girintiler.

Örnek

HTML:

<button id="go">Click me</button>

JavaScript:

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

Her tıklama konsola bir satır ekler. Bir adı yanlış yazarsanız konsol, JS sekmesinde hatanın oluştuğu satırla birlikte kırmızı bir ReferenceError gösterir.

Nasıl çalışır

Üç bölme tek bir HTML belgesinde birleştirilir ve sandbox özniteliğine sahip bir iframe’e yüklenir; böylece kod bu sitenin çerezlerini veya depolamasını okuyamaz. Çerçeveye eklenen küçük bir betik, console çağrılarını ve yakalanmamış hataları sayfaya iletir; hiçbir şey cihazınızdan çıkmaz.