Zum Inhalt springen
DEVARY
Alle Werkzeuge

HTML Studio

Verfügbar

Bearbeite vollständige HTML-Dokumente mit Live-Vorschau in einer isolierten Browser-Sandbox.

Devary lädt dein HTML weder hoch noch speichert es dauerhaft.
Senden an

Kompatible Tools

JSON StudioRegex LabCron StudioBase64 StudioTimestamp StudioText DiffUUID StudioData Converter

HTML-Dokument

1530 Zeichen

Live-Vorschau

Synchronisiert

Konsole

0

Die Konsolenerfassung ist im Interactive-Modus verfügbar. Safe lässt Skripte deaktiviert.

HTML Intelligence

Eine einzige lokale Analyse speist DOM-Baum, Diagnosen, SEO/Metadaten, Ressourcen und die statische Barrierefreiheitsprüfung.

13 Elemente0 Fehler0 Warnungen
  • <!doctype html>Z1:1
  • <html>Z2:1
    lang="en"
    • <head>Z3:3
      • <meta>Z4:5
        charset="utf-8"
      • <meta>Z5:5
        name="viewport"content="width=device-width, initial-scale=1"
      • <title>Z6:5
      • <style>Z7:5
    • <body>Z46:3
      • <main>Z47:5
      • <script>Z56:5

Safe blockiert aktive Inhalte

JavaScript, Netzwerkverbindungen, externe Frames, Objekte und Formularübermittlungen sind blockiert. Inline-CSS sowie data/blob-Medien können gerendert werden.

Ein fokussierter Workspace für HTML-Dokumente

Füge ein vollständiges HTML-Dokument ein oder schreibe es selbst, bearbeite es mit CodeMirror und sieh das gerenderte Ergebnis sofort daneben.

Isolation ist Teil der Funktion

Die Vorschau läuft in einem sandboxed iframe statt im Devary-DOM. Safe blockiert standardmäßig Skripte und netzwerkfähige Ressourcen.

Entwicklerleitfaden

Vollständige HTML-Dokumente isoliert testen

HTML Studio bietet Editor, isolierte Vorschau und Diagnosen. Die Vorschau ersetzt aber nicht deine Produktionsumgebung.

Praktischer Ablauf

  1. Einrichten

    Lade ein komplettes HTML-Dokument und prüfe DOM, Ressourcen und Diagnoseansichten.

  2. Ausprobieren

    Formatiere oder minimiere vorsichtig und vergleiche Code, Vorschau und Konsole.

  3. Prüfen

    Bewerte SEO- und Zugänglichkeitsmeldungen nur als vorläufige Hinweise.

Beispiele

Sichtbare Abstände bewahren

Die schonende Minimierung behält Abstände zwischen Inline-Elementen.

Konfiguration

Conservative minify

Beispieleingabe

<main>  <span>A</span> <span>B</span> </main>

Erwartetes Ergebnis

<main> <span>A</span> <span>B</span> </main>

Vorformatierten Text bewahren

In vorformatierten Blöcken bleiben Einrückungen und Zeilenumbrüche erhalten.

Konfiguration

Preserve preformatted content

Beispieleingabe

<pre>  line 1
  line 2 </pre>

Erwartetes Ergebnis

<pre>  line 1
  line 2 </pre>

Grenzen und Sicherheit

Unterstützter Umfang

Die isolierte Vorschau kann andere Ressourcen- und Scriptregeln als das Deployment haben.

Vor dem Produktiveinsatz

Automatische Diagnosen ersetzen weder Sicherheitsaudits noch vollständige Barrierefreiheitstests.

Häufige Frage

Reicht eine korrekte Vorschau für Produktion aus?

Nein. Prüfe Ressourcen, mobiles Layout und Sicherheitsregeln im Zielsystem.