Softonic

İşlenmiş HTML Görüntüleyici

Adım 1 / 2
Sonraki

Herhangi bir HTML’i (bir e-posta şablonu, kazınmış bir sayfa parçası, belgelerden bir örnek) yapıştırın ve yalıtılmış bir iframe içinde çizilmiş halini görmek için İşle’ye tıklayın. Çerçeve, tarayıcının en katı korumalı alanıyla çalışır: betikler yürütülmez, formlar hiçbir şey gönderemez ve işaretleme ne gezinebilir ne de çevresindeki sayfaya dokunabilir. Bir hazırlık sunucusu kurmadan “bu işaretleme gerçekte nasıl görünüyor” sorusuna yanıt vermenin en hızlı yoludur.

HTML nasıl önizlenir

  1. 1

    HTML'inizi yapıştırın

    Tam bir belgeyi ya da gevşek bir parçayı kaynak kutusuna koyun. Ne yapıştırırsanız tam olarak o, yazıldığı gibi işlenir.

  2. 2

    İşle'ye tıklayın

    Görüntüleyici HTML'inizi yalıtılmış bir iframe içine yazar ve sonucu doğrudan sayfada gösterir.

  3. 3

    Önizlemeyi okuyun

    Çerçeve, işaretlemenizi bir tarayıcının çizeceği gibi çizer: başlıklar, tablolar, listeler, satır içi stiller ve SVG hepsi görünür.

  4. 4

    Ayarlayın ve yeniden işleyin

    Kaynağı düzeltin ve her sürümün nasıl göründüğünü karşılaştırmak için istediğiniz kadar yeniden işleyin.

Çerçeve neden yalıtılır

Yapıştırılan HTML her şeyi içerebilir: <script> etiketleri, bir <img onerror="..."> hilesi, veriyi bir yere gönderen bir form ya da başka bir siteyi yükleyen bir <iframe>. Bunların hiçbirinin sayfaya dokunmaması için önizleme, sandbox özniteliği boş bırakılmış bir <iframe sandbox> içine yazılır; bu, var olan en kısıtlayıcı ayardır. Bu modda tarayıcı; betik yürütmeyi, form göndermeyi, açılır pencereleri, üst düzey gezinmeyi ve aynı kaynağa erişimi aynı anda engeller. İşaretlemeye hiçbir yetki vermeden görsel sonucu görürsünüz.

Betikler asla çalışmadığından, JavaScript’e bağlı olan her şey (yüklenirken hidratlanan bir web bileşeni, kendini çizen bir grafik, boş bir <div> içine bağlanan bir çatı) yalnızca statik işaretlemesini gösterir, betikle üretilen sonucunu değil. Bu bilinçli bir denge: etkileşimli yerine güvenli ve öngörülebilir bir önizleme.

Görüntüleyicinin iyi işlediği şeyler

İçerik türü Notlar
E-posta HTML’i Tablo tabanlı düzenler ve satır içi stiller, çoğu istemcinin çizdiği gibi görünür
Blog gönderisi gövdesi Başlıklar, listeler, alıntılar ve görseller hiçbir betik olmadan görünür
Kazınmış parça Aldığınız işaretlemenin tek başına durabilecek kadar eksiksiz olup olmadığını gösterir
Satır içi SVG Her boyutta çizilir, bir simgeyi denetlemek için elverişlidir
Statik bileşen işaretlemesi İşaretleme işlenir; JavaScript’teki davranışı işlenmez

Bu aracın iyi kullanımları

  • E-posta şablonu QA. E-posta düzenleyicinizden aldığınız dışa aktarımı yapıştırın ve kendinize deneme iletisi göndermeden düzeni görün.
  • Kazınmış veride hızlı denetim. Bir sayfadan biraz innerHTML aldınız: anlamlı bir şeye geri işleniyor mu? İşlenmiyorsa parça büyük olasılıkla eksiktir.
  • Markdown’dan HTML’e inceleme. Metni bir dönüştürücüden geçirin (HTML’den Markdown’a aracı gidiş-dönüş yapar) ve ortaya çıkan HTML’i burada önizleyin.
  • Öğrenme ve öğretme. Belgelerden bir örnek yapıştırın ve bir tarayıcının onu tam olarak nasıl yerleştirdiğini izleyin.

Dikkat edilecek şeyler

  • Göreli URL’ler. /assets/logo.png gibi göreli bir yolla belirtilen görseller ve stil sayfalarının çözümlenecekleri bir sunucusu yoktur, bu yüzden yüklenmezler. Bir görselin görünmesini istiyorsanız mutlak bir https:// URL’si ya da bir data: URI kullanın.
  • Dış kaynaklar. Başka sitelerden yüklenen yazı tipleri, stil sayfaları ve görseller, o sitelerin buna izin vermesine bağlıdır; bazıları çerçeve içinde yüklenmeyi engelleyen başlıklar gönderir.
  • Betik yok. İşaretlemeniz yalnızca JavaScript ile canlanıyorsa, önizleme onun betiklerden önceki halini gösterir. Bu beklenen bir durumdur, hata değildir.

Sık Sorulan Sorular

Evet. Önizleme, hiçbir izni olmayan tümüyle yalıtılmış bir iframe içinde çalışır, bu yüzden betikler yürütülemez ve işaretleme çevresindeki sayfaya erişemez. Kötü niyetli HTML bile yalnızca çerçeve içinde kendini çizebilir.

Hayır. Korumalı alan betik yürütmeyi tümüyle engeller, bu yüzden <script> etiketleri ve satır içi olay işleyicileri yok sayılır. Statik işaretlemeyi görürsünüz ve önizlemeyi güvenli kılan tam da budur.

Göreli bir yolun çözümlenecek bir dayanağı yoktur ve bazı ana bilgisayarlar, görsellerinin bir çerçeve içinde yüklenmesini engelleyen başlıklar gönderir. Mutlak bir https:// URL’si kullanın ya da görseli bir data: URI olarak gömün.

Evet. Tüm belgeyi (doctype, <head>, <body> ve hepsi) yapıştırın, yazıldığı gibi işlenir. Gevşek bir parça da çalışır; gerisini tarayıcı tamamlar.

Bu araç, yapıştırdığınız HTML’i metin olarak işler; asla bir URL getirmez. Neyin işleneceğini tam olarak siz denetlersiniz; bu da e-posta şablonları, kazınmış parçalar ve hızlı hata ayıklama için elverişlidir.

İlgili Araçlar

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Webpack Yapılandırma Oluşturucu

Saf JavaScript, React veya Vue için webpack 5 uyumlu bir webpack.config.js oluşturun: TypeScript, Babel, CSS veya Sass, görseller, HtmlWebpackPlugin, geliştirme sunucusu ve npm install satırı.

Tamamlayıcı Renk Bulucusu

Her girdi için tamamlayıcı renk belirleyin. HSL açısından tersi renk, bölünmüş tamamlayıcı çifti ve erişilebilir kombinasyonlar için öneriler geri verir.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Araç diğer dillerde mevcuttur