Metodoloji

1. Düzenleyici mimarisi

Çalışma alanı HTML, CSS ve JavaScript için satır numarası kenar boşlukları, sekme girintisi işleme, yazı tipi boyutu denetimleri ve isteğe bağlı kelime kaydırma ile üç metin düzenleyici kullanır.

2. HTML işleme

HTML panelindeki HTML, oluşturulan bir belgenin body'sine yerleştirilir. Araç HTML'i üst sayfa arayüzü olarak çalıştırmaz.

3. CSS enjeksiyonu

CSS, kuralların yalnızca önizleme belgesine uygulanması için oluşturulan belgenin head bölümündeki bir style öğesine eklenir.

4. JavaScript yürütme

JavaScript, önizleme belgesi içindeki bir script öğesine yerleştirilir. Run sonrasında iframe tarama bağlamında çalışır.

5. iframe oluşturma

Birleştirilmiş belge iframe.srcdoc'a atanır; bu, üst sayfayı gezinmeden yeni bir önizleme belgesi oluşturur.

6. sandbox izolasyonu

iframe bir sandbox özniteliği kullanır (önizleme için betiklere izin verilir). Üst DOM API'leri kullanıcı kodu yürütmesi için açığa çıkarılmaz.

7. Konsol işleme

Önizleme içindeki küçük bir köprü, console.log/info/warn/error ve çalışma zamanı hatalarını postMessage ile üst öğeye ileterek görüntüler.

8. Tarayıcı API'leri

Betiklerin neler yapabileceği tarayıcı ilkesine ve sandbox izinlerine bağlıdır. Bazı API'ler iframe'lerde üst düzey sayfalardan farklı davranır.

9. Yerel depolama

Düzenleyici durumu, yenileme devam eden çalışmayı silmemesi için bu kaynağa kapsamlı localStorage anahtarlarına yazılabilir.

10. Sınırlamalar

Standart HTML/CSS/JS için sunucu tarafı derleme yoktur. Karmaşık derleme hatları, özel paketler ve ayrıcalıklı cihaz API'leri kapsam dışındadır.

11. Gizlilik hususları

Önizleme birleştirmesi istemci tarafındadır. İçeriği dışa aktarmadığınız veya başka yere kopyalamadığınız sürece yerel kalıcılık tarayıcıda kalır.