Softonic

Visare för renderad HTML

Steg 1 / 2
Nästa

Klistra in valfri HTML (en e-postmall, ett skrapat sidfragment, ett exempel ur dokumentationen) och klicka på Rendera för att se den uppritad i en isolerad iframe. Ramen körs med webbläsarens strängaste sandlåda: skript körs inte, formulär kan inte skicka något och markeringen kan varken navigera bort eller röra sidan runt omkring. Det är det snabbaste sättet att svara på frågan “hur ser den här markeringen faktiskt ut” utan att sätta upp en testserver.

Så förhandsgranskar du HTML

  1. 1

    Klistra in din HTML

    Lägg ett fullständigt dokument eller ett löst fragment i källfältet. Det du klistrar in är exakt det som renderas, precis som det är skrivet.

  2. 2

    Klicka på Rendera

    Visaren skriver din HTML i en isolerad iframe och visar resultatet direkt på sidan.

  3. 3

    Läs förhandsgranskningen

    Ramen ritar din markering som en webbläsare skulle göra: rubriker, tabeller, listor, inline-stilar och SVG dyker alla upp.

  4. 4

    Justera och rendera igen

    Putsa källan och rendera hur många gånger du vill för att jämföra hur varje version ser ut.

Varför ramen är isolerad

Inklistrad HTML kan innehålla vad som helst: <script>-taggar, ett <img onerror="...">-trick, ett formulär som skickar data någonstans eller en <iframe> som laddar en annan webbplats. För att inget av det ska röra sidan skrivs förhandsgranskningen i en <iframe sandbox> med ett tomt sandbox-attribut, den strängaste inställning som finns. I det läget blockerar webbläsaren samtidigt skriptkörning, formulärinlämning, popup-fönster, navigering på toppnivå och åtkomst till samma ursprung. Du ser det visuella resultatet utan att ge markeringen någon makt.

Eftersom skript aldrig körs visar allt som beror på JavaScript (en webbkomponent som hydreras vid laddning, ett diagram som ritar sig självt, ett ramverk som monteras i en tom <div>) enbart sin statiska markering, inte sitt skriptade resultat. Det är en medveten avvägning: en trygg och förutsägbar förhandsgranskning framför en interaktiv.

Vad visaren renderar bra

Innehållstyp Anmärkningar
E-post-HTML Tabellbaserade layouter och inline-stilar visas som de flesta klienter ritar dem
Brödtext i blogginlägg Rubriker, listor, citat och bilder visas helt utan skript
Skrapat fragment Visar om markeringen du fångade är fullständig nog att stå på egen hand
Inline-SVG Ritas i valfri storlek, praktiskt för att kolla en ikon
Statisk komponentmarkering Markeringen renderas; beteendet i JavaScript gör det inte

Bra användningar för det här verktyget

  • QA av e-postmallar. Klistra in exporten från din e-postredigerare och se layouten utan att skicka ett testmeddelande till dig själv.
  • Snabbkoll av skrapad data. Du fångade lite innerHTML från en sida: renderas den tillbaka till något vettigt? Om inte är fragmentet troligen ofullständigt.
  • Granskning av Markdown till HTML. Kör text genom en konverterare (verktyget HTML till Markdown gör resan fram och tillbaka) och förhandsgranska den resulterande HTML:en här.
  • Lära och lära ut. Klistra in ett exempel ur dokumentationen och se exakt hur en webbläsare placerar ut det.

Att tänka på

  • Relativa URL:er. Bilder och stilmallar som refereras via en relativ sökväg som /assets/logo.png har ingen server att lösas mot och laddas därför inte. Använd en absolut https://-URL eller en data:-URI om du behöver att en bild dyker upp.
  • Externa resurser. Typsnitt, stilmallar och bilder som laddas från andra webbplatser beror på att de webbplatserna tillåter det; vissa skickar rubriker som blockerar laddning inuti en ram.
  • Inga skript. Om din markering bara får liv med JavaScript visar förhandsgranskningen dess tillstånd före skripten. Det är väntat, inte ett fel.

Vanliga frågor

Ja. Förhandsgranskningen körs i en helt isolerad iframe utan några tillstånd, så skript kan inte köras och markeringen kan inte nå sidan runt omkring. Även skadlig HTML kan bara rita sig själv inuti ramen.

Nej. Sandlådan blockerar skriptkörning helt, så <script>-taggar och inline-händelsehanterare ignoreras. Du ser den statiska markeringen, och det är just det som gör förhandsgranskningen trygg.

En relativ sökväg har inget att lösas mot, och vissa värdar skickar rubriker som hindrar deras bilder från att laddas inuti en ram. Använd en absolut https://-URL eller bädda in bilden som en data:-URI.

Ja. Klistra in hela dokumentet (doctype, <head>, <body> och allt) så renderas det som det är skrivet. Ett löst fragment fungerar också; webbläsaren fyller i resten.

Det här verktyget renderar HTML som du klistrar in som text; det hämtar aldrig en URL. Du styr exakt vad som renderas, vilket är praktiskt för e-postmallar, skrapade fragment och snabb felsökning.

Relaterade verktyg

Webpack-konfigurationsgenerator

Skapa en webpack.config.js för webpack 5 med vanlig JavaScript, React eller Vue: TypeScript, Babel, CSS eller Sass, bilder, HtmlWebpackPlugin, en utvecklingsserver och raden för npm install.

Protocol Buffers-avkodare

Avkoda Protobuf-byte lokalt från hex, Base64, Base64URL, text eller fil, granska fälttolkningar och exportera en privat rapport.

XSD-validerare

Validera ett XML-dokument mot ett XSD-schema och rapportera element- och typavvikelser med exakta radnummer.

YAML till JSON

Omvandla YAML-konfiguration till JSON för verktyg och API:er som bara accepterar JSON. Hanterar ankare, merge-nycklar och nästlade strukturer.

XML-formaterare

Snygga till XML-dokument med konsekvent indrag och fånga formfel med exakta radnummer.

XML till JSON

Omvandla XML-dokument till ren JSON, med bevarade attribut, textnoder och arrayer där det behövs. Tre stilar: kompakt, Badgerfish eller literal.

Verktyget finns på andra språk