JPKCom DB

Source Viewer — Beispiele

Praxisnahe Durchläufe mit dem Source Viewer: Quelltext einer URL ansehen, Code einfügen und highlighten, Sprache wechseln, HTML zu Markdown konvertieren.

Zurück zur Übersicht: Source Viewer · Tool live öffnen: www.jpkc.com/tools/source/

Das Manual erklärt jede Funktion und die Proxy-Architektur im Detail. Diese Seite ergänzt das um konkrete Arbeitsabläufe — typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche des Tools ist auf Englisch; Button- und Menü-Namen stehen deshalb im Original, bei Bedarf mit deutscher Erläuterung.

Beispiel 1: Den Quelltext einer URL ansehen

Der Klassiker — du willst sehen, wie eine fremde Seite aufgebaut ist.

  1. Öffne den Source Viewer und trag oben im URL-Feld eine absolute Adresse ein (z. B. https://example.com/).
  2. Klick auf Load (Download-Symbol). Der Quelltext wird serverseitig über den JPKCom-Proxy geholt und in den Editor geschrieben (Toast „Content loaded from URL.").
  3. Der Editor steht jetzt im HTML-Modus — das ist nach jedem URL-Load so. Das Highlighting greift sofort: Tags, Attribute und Werte sind farblich getrennt, links laufen die Zeilennummern.
  4. Nutze Find (Strg+F) oder das More tools-Menü, um gezielt nach einer Stelle zu suchen, und klapp große Blöcke per Code-Faltung zu.

Was du so nicht siehst: alles, was erst per JavaScript im Browser nachgeladen wird, und alles hinter einem Login. Geladen wird das ausgelieferte Roh-HTML, nicht das fertig gerenderte DOM.

Beispiel 2: Code einfügen und highlighten

Du hast ein Snippet aus einer Log-Datei, einem Chat oder einer Mail und willst es ordentlich lesen.

  1. Klick in den Editor und füge den Code mit Strg+V ein (oder über den Paste-Button).
  2. Wähl im Sprachwähler oben rechts die passende Sprache — etwa PHP, Python oder YAML. Das Highlighting stellt sich sofort um.
  3. Stört dich etwas an der Darstellung, öffne Settings: Dort lassen sich Schriftgröße, Tab-Größe, sichtbare Sonderzeichen und das Theme (Dracula oder Monokai) anpassen.

Weil es keine inhaltsbasierte Auto-Erkennung gibt, ist die manuelle Sprachwahl der entscheidende Schritt — siehe auch Beispiel 3.

Beispiel 3: Die Sprache wechseln

Das Highlighting passt nicht, weil die Sprache falsch steht — typisch direkt nach einem URL-Load, der ja immer HTML annimmt.

  1. Öffne den Sprachwähler (Dropdown oben rechts in der Editor-Leiste).
  2. Wähl die richtige Sprache. Oben findest du die gängigen Sprachen schnell, darunter alphabetisch den kompletten Rest (100+ Einträge).
  3. Das Highlighting und das Linting stellen sich sofort um; die gewählte Sprache wird zusammen mit dem Inhalt im Browser-Speicher gesichert und beim nächsten Besuch wiederhergestellt.

Lädst du z. B. eine style.css per URL, steht der Editor erst auf HTML — stell ihn auf CSS um, und die Selektoren, Eigenschaften und Werte werden korrekt eingefärbt.

Beispiel 4: HTML in Markdown umwandeln

Du willst aus einer HTML-Seite eine saubere Markdown-Version gewinnen — etwa als rauscharme Quelle für ein KI-System oder fürs Wiki.

  1. Lade die Seite per Load von ihrer URL (oder füge das HTML ein) — der Editor steht danach im HTML-Modus.
  2. Klick auf den Markdown-Button (Markdown-Symbol). Der html-to-markdown-Konverter (WebAssembly, Rust-Kern) wandelt das HTML im Browser um.
  3. Im Editor steht jetzt Markdown — mit einem vorangestellten YAML-Frontmatter, das das Tool aus den Meta-Daten der Seite gebaut hat (Titel, Description, Open Graph, Twitter usw.).
  4. Stell den Sprachwähler auf Markdown und klick Preview (Auge): Die Vollbild-Vorschau rendert das Markdown als HTML, Code-Blöcke werden gehighlightet, das Frontmatter erscheint als yaml-Block. Aus der Vorschau kannst du das Ergebnis als HTML kopieren oder speichern.
  5. Brauchst du nur den nackten Text ohne Auszeichnung, nimm stattdessen den Plain-Text-Button.

Beispiel 5: Code formatieren (Beautify)

Eine minifizierte oder unsauber eingerückte Datei soll wieder lesbar werden.

  1. Füge den Code ein oder lade ihn, und wähl die passende Sprache (HTML, CSS oder JavaScript — danach richtet sich, welche Beautify-Routine läuft).
  2. Klick auf Beautify (Zauberstab). Der JS Beautifier rückt ein, bricht um und stellt die Struktur wieder her.
  3. Bei stark verschleiertem JavaScript greifen zusätzlich die mitgelieferten Unpacker, sodass auch gepackter Code wieder lesbar wird.

Brauchst du das öfter oder auch für SASS/SCSS-Kompilierung, ist der spezialisierte Compiler oder das Beautify-Tool die schärfere Wahl.

Beispiel 6: Die Meta-Daten und die Verbindung einer URL prüfen

Du willst nicht den Quelltext, sondern eine schnelle Auswertung einer Seite.

  1. Trag die URL ein. Für eine On-Page-/Meta-Analyse klick auf SEO (Balken-Symbol): Titel, Meta-Tags, Überschriften, Links, Bilder, Keyword-Dichte und SEO-Empfehlungen landen als Markdown-Bericht im Editor.
  2. Für einen Technik-Check klick stattdessen auf Analyze connection (Schild-Symbol): Du bekommst IP, Protokoll/HTTP-Version, Timing, SSL-Zertifikat, Security- und Caching-Header sowie die rohen HTTP-Header — ebenfalls als Markdown.
  3. Stell den Sprachwähler auf Markdown und nutz Preview, um den Bericht gerendert zu lesen.

Für eine vollständige, bewertete Analyse mit zwei Scores und Tabs ist der SEO & GEO Analyzer das größere Werkzeug — der Source Viewer liefert die kompakte Variante direkt im Editor.

Noch tiefer: die Übersicht zum großen Bild, das Manual für jede Funktion im Detail und die Tipps & Tricks für die Kniffe. Ausprobieren kannst du alles direkt im Tool.