HTML megjelenítő és élő előnézet
Nyers HTML és kód azonnali renderelése egy biztonságos, izolált homokozóban (sandbox), teljesen a böngésződben.
Kapcsolódó eszközök
Az eszközről
Ez az eszköz azonnal renderel bármilyen HTML-t, amit beírsz vagy beillesztesz, egy élő előnézeti panelen, szerkesztés közben, anélkül hogy bármit is elküldene egy szerverre. Hasznos, ha gyorsan meg akarod nézni, hogyan néz ki egy kód-részlet, ha egy e-mail HTML-t szeretnél tesztelni, ha egy beágyazási kódot akarsz megnézni egy CMS-be helyezés előtt, vagy egyszerűen csak egy elrendezési ötlettel szeretnél kísérletezni projekt indítása nélkül.
Az előnézeti panel egy sandboxolt iframe: a megadott HTML-t egy izolált böngészési kontextusban futtatja, amelynek nincs hozzáférése ehhez az oldalhoz, a sütijeihez vagy tárolójához, és nem tudja navigálni a szülő ablakot. A kódrészletedben lévő szkriptek futnak, így az interaktív demók és a beágyazott script tagek a várt módon működnek, de a sandbox ezt a kódot a saját, izolált eredetéhez korlátozza.
Mivel a renderelés teljes egészében a böngésződben történik, amit beillesztesz, az soha nem kerül feltöltésre vagy naplózásra sehol — az oldal betöltése után teljesen offline is működik, így biztonságosan előnézetezhetsz olyan kódot, amely érzékeny szöveget, belső URL-eket vagy még készülő tartalmat tartalmaz.
Ez akkor is hasznos, amikor gyorsan meg akarod győződni egy kódrészlet helyességéről: ellenőrizni, hogy a tagek megfelelően vannak-e párosítva és beágyazva, megnézni, hogyan renderelődik az inline CSS, meggyőződni arról, hogy egy HTML e-mail sablon a kívánt módon jelenik meg elküldés előtt, vagy átnézni egy harmadik féltől származó beágyazási kódot, mielőtt megbíznál benne egy valódi oldalon.
Ne feledd, hogy ez egy előnézeti eszköz, nem egy teljes böngészőkörnyezet — a kódrészletedben URL-lel hivatkozott külső erőforrások (stíluslapok, képek, betűtípusok) továbbra is a hálózaton keresztül töltődnek be, ha a kódod rájuk hivatkozik, és a szkriptek egy korlátozott, süti nélküli kontextusban futnak, nem az oldalad valódi eredetén, így minden, ami az oldalad tényleges sütijeitől, helyi tárolójától vagy azonos eredetű kéréseitől függ, itt másképp fog viselkedni.
A tipikus munkafolyamat egyszerű: írd be a kódot közvetlenül a szerkesztőbe, vagy illeszd be a Beillesztés gombbal, figyeld, ahogy az előnézet minden leütésnél frissül, és finomítsd addig, amíg az eredmény megfelelő nem lesz. A Törlés gomb egy kattintással kiüríti a szerkesztőt, ha elölről kezdenéd. Az eszköztár más eszközeiből is érkezhet ide kód — például egy Base64-ben kódolt HTML-részletet a Base64 eszközben dekódolhatsz, majd a „Küldés” menüvel egyenesen ebben a megjelenítőben nyithatod meg, kézi másolás és beillesztés nélkül.
Gyakran ismételt kérdések
Biztonságos itt megbízhatatlan forrásból származó HTML-t előnézetezni? expand_more
Az előnézet egy sandboxolt iframe-ben fut, saját izolált, süti nélküli eredettel, így nem tudja elérni ennek az oldalnak az adatait vagy a saját oldalad sütijeit. A kódrészletben lévő szkriptek azonban futnak, ezért úgy kezeld, mintha egy ismeretlen oldalt nyitnál meg — ne illessz be olyat, amit egyáltalán nem szeretnél lefuttatni.
Feltöltődik valahova a HTML-em? expand_more
Nem. A renderelés teljes egészében a böngésződben történik, és az eszköz offline állapotban is tovább működik az oldal betöltése után.
Betöltődnek az előnézetben a külső képek, betűtípusok vagy stíluslapok? expand_more
Igen, ha a HTML-ed URL-lel hivatkozik rájuk, a sandboxolt iframe továbbra is le fogja tölteni őket a hálózaton keresztül, ahogy egy normál oldal is tenné.
Valóban futnak a script tagek a kódrészletemben? expand_more
Igen, a szkriptek a sandboxolt iframe-ben futnak, így interaktív demókat is előnézetezhetsz — de ez a futás izolált ettől az oldaltól és az oldalad valódi eredetétől.
Miért nem működik ugyanúgy egy sütiket vagy localStorage-ot olvasó szkript, mint a valódi oldalamon? expand_more
A sandboxolt iframe-nek saját, egyedi, izolált eredete van a valódi oldaladé helyett, így nem fér hozzá az oldalad valódi sütijeihez vagy tárolójához — minden, ami ezekre támaszkodik, itt másképp fog viselkedni.