HTML-Code-Betrachter
Fugen Sie Ihren HTML-Code in das Feld links ein, klicken Sie auf 'Vorschau aktualisieren' und sehen Sie das Ergebnis sofort rechts. Die Vorschau lauft in einem isolierten (Sandbox-)Rahmen, sodass Ihr Code niemals auf den Rest Ihrer Website oder Ihre Cookies zugreifen kann.
Wie soll ich das Vorschauergebnis bewerten?
Die Vorschau im rechten Bereich ist eine nahe Darstellung, wie Ihr Code in einem Browser aussehen wurde. Wenn etwas unerwartet aussieht, uberprufen Sie, ob Ihre HTML-Tags korrekt geschlossen sind.
Wie funktioniert die Vorschau?
Der von Ihnen eingefugte HTML-Code wird in einem iframe platziert, der durch das Attribut 'sandbox' isoliert ist. Diese Isolation erlaubt die Ausfuhrung des Codes, blockiert aber den Zugriff auf den Rest der Website, Cookies oder andere Tabs — das bedeutet, dass sogar nicht vertrauenswurdiger Code sicher getestet werden kann.
Formel
- Sie fugen Ihr HTML (das auch CSS/JavaScript enthalten kann) in das Codefeld ein.
- Wenn Sie auf 'Vorschau aktualisieren' klicken, wird der Code an einen isolierten iframe ubergeben.
- Der iframe rendert den Code dank des Attributs 'sandbox' in einer von der Hauptseite isolierten Umgebung.
- Das Ergebnis wird visuell im Vorschaubereich rechts angezeigt.
- Bearbeiten Sie den Code und klicken Sie erneut auf die Schaltflache, um die Vorschau zu aktualisieren.
Beispielhafte Nutzung
Wenn Sie ein Einbettungs-iframe-Snippet oder ein einfaches HTML/CSS-Experiment einfugen, erscheint das Ergebnis sofort im rechten Bereich, sodass Sie sehen konnen, wie es aussehen wird, bevor Sie es zu Ihrer Live-Website hinzufugen.
Tipps zur HTML-Vorschau
- Testen Sie, wie ein Einbettungscode (wie ein iframe-Widget) auf Ihrer Website aussehen wird, bevor Sie ihn hier veroffentlichen.
- Die Vorschau wird nicht bei jeder Anderung automatisch aktualisiert — denken Sie daran, nach der Bearbeitung Ihres Codes auf 'Vorschau aktualisieren' zu klicken.
- Da der Vorschaubereich isoliert ist, konnen Skripte in Ihrem Code den Rest Ihrer Seite nicht beeinflussen oder auslesen.
Vergleiche
Wird sofort korrekt gerendert
Grundlegende Elemente wie Uberschriften, Absatze und Schaltflachen funktionieren problemlos.
Kann vor der Veroffentlichung getestet werden
Ideal, um die Grosse und das Aussehen eines Widgets zu uberprufen.
Wird ausgefuhrt, aber isoliert
Skripte konnen den Vorschaubereich oder die Hauptseite nicht erreichen.
Leitfaden fur das HTML-Vorschau-Tool
Bei der Webentwicklung erfordert das Betrachten, wie ein HTML-Ausschnitt oder ein Einbettungscode auf der echten Website aussehen wird, ublicherweise, den Code zunachst in eine Live-Umgebung einzufugen — das kann Zeit kosten und im Fall fehlerhaften Codes das Erscheinungsbild der Website beeintrachtigen. Dieses Tool beseitigt dieses Risiko, indem es Ihnen ermoglicht, den Code in einer isolierten Umgebung zu testen.
Im Kern dieses Tools steht die von Browsern angebotene 'sandbox'-iframe-Funktion. Diese Funktion isoliert den Inhalt innerhalb eines iframes vollstandig ausserhalb eines bestimmten Berechtigungssatzes; standardmassig wird keine Fahigkeit uber das Ausfuhren von Skripten hinaus gewahrt — kein Zugriff auf die ubergeordnete Seite, kein Formularversand, kein Offnen neuer Fenster.
Diese Designentscheidung ist bewusst getroffen: einen Raum zu bieten, in dem Benutzer sogar Code testen konnen, dem sie nicht vertrauen, wahrend gleichzeitig die eigentliche Website (und die Cookies und Sitzungsdaten des Benutzers) geschutzt werden. Viele professionelle Code-Sharing-Plattformen (wie CodePen-artige Tools) folgen demselben Isolationsprinzip.
Die Vorschau wird nicht bei jeder Codeanderung automatisch aktualisiert; stattdessen wird sie manuell mit der Schaltflache 'Vorschau aktualisieren' ausgelost. Dies erhalt die Leistung und gibt dem Benutzer die Kontrolle daruber, wann Code tatsachlich ausgefuhrt wird, anstatt ihn versehentlich vor der Fertigstellung auszufuhren.
Dieses Tool ist nutzlich zum Testen von Einbettungs-Widgets, zum schnellen Ausprobieren einer HTML/CSS-Idee, zum sicheren Untersuchen von in einem Fehlerbericht geteiltem Code oder einfach zum Betrachten, wie HTML im Rahmen eines Lernprozesses gerendert wird.
FAQ
Wird der von mir eingefugte Code an einen Server gesendet?
Nein. Der Code wird nur in Ihrem Browser fur die Vorschau verarbeitet; er wird niemals an einen Server gesendet oder dort gespeichert.
Warum ist der Vorschaubereich mit 'sandbox' eingeschrankt?
Es ist eine Sicherheitsmassnahme, um zu verhindern, dass der von Ihnen eingefugte Code — besonders wenn er aus einer nicht vertrauenswurdigen Quelle stammt — auf den Rest Ihrer Website, Ihre Cookies oder andere Daten zugreift.
Kann ich Code testen, der JavaScript enthalt?
Ja, der Vorschaubereich erlaubt die Ausfuhrung von Skripten, aber da er isoliert ist, konnen diese Skripte nicht mit Ihrer Hauptseite interagieren.
Warum wird die Vorschau nicht automatisch aktualisiert?
Anstatt bei jedem Tastendruck neu zu rendern, gibt Ihnen die Schaltflache 'Vorschau aktualisieren' die Kontrolle — dies erhalt auch die Leistung bei grossen Codeblocken.
Kann ich dieses Tool zum Testen von Einbettungscodes verwenden?
Ja, einer der haufigsten Anwendungsfalle dieses Tools ist die Uberprufung, ob ein iframe-Einbettungscode korrekt aussieht, bevor er zu Ihrer Website hinzugefugt wird.
Gibt es einen Beispielcode?
Ja, beim Offnen der Seite ist ein einfaches Beispiel-HTML-Snippet im Codefeld vorgeladen — Sie konnen es loschen und Ihren eigenen Code einfugen.
Sieht das Design, das ich in der Vorschau sehe, auf meiner echten Website genauso aus?
In der Regel ja, aber da der Vorschaubereich sein eigenes Style-Reset hat, kann Code, der mit dem globalen CSS Ihrer Website interagiert, kleine visuelle Unterschiede zeigen.
Ist es sicher, hier Code aus einer nicht vertrauenswurdigen Quelle einzufugen?
Die Sandbox-Isolation verhindert, dass der Code Ihrer Website schadet, aber wir empfehlen dennoch, Code aus unbekannten Quellen sorgfaltig zu prufen.
Ahnliche Tools
Dieses Tool einbetten
<iframe src="https://pinfox.tech/de/tools/allgemein/html-code-betrachter/?embed=1" width="100%" height="720" loading="lazy" style="border:0;border-radius:12px;overflow:hidden" title="HTML-Code-Betrachter: Live-Vorschau - Pinfox"></iframe>