JPKCom DB

Source Viewer — Beispiele

Praxisnahe Durchläufe mit dem Source Viewer: Quelltext einer URL ansehen, HTML live vorschauen, zu Markdown konvertieren, Links extrahieren, minifizieren.

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) — nicht Enter, denn Enter im URL-Feld startet die Verbindungsanalyse. Der Quelltext wird serverseitig über den JPKCom-Proxy geholt und in den Editor geschrieben (Toast „Content loaded from URL.").
  3. Die Sprache stellt sich automatisch ein: bei einer Seitenadresse wie https://example.com/ auf HTML, bei …/style.css auf CSS, bei …/app.js auf JavaScript. Das Highlighting greift sofort: Tags, Attribute und Werte sind farblich getrennt, links laufen die Zeilennummern. Die Statuszeile unter dem Editor zeigt Größe, Zeilenzahl, Sprache und Dateinamen.
  4. Nutze Find (Strg+F) oder das More tools-Menü, um gezielt nach einer Stelle zu suchen, mit Go to Line (Strg+G) springst du zu einer Zeile, große Blöcke klappst du per Code-Faltung zu.
  5. Die URL steht danach in der Liste Recent URLs (Uhr-Symbol neben dem URL-Feld) — so holst du sie später mit einem Klick zurück.

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. Ist die Seite größer als 950 KB, bricht der Abruf mit „The file is too large." ab.

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 in der Werkzeugleiste die passende Sprache — etwa PHP, Python oder YAML. Das Highlighting stellt sich sofort um.
  3. Stört dich etwas an der Darstellung, öffne More tools → Settings: Dort lassen sich Schriftgröße, Tab-Größe, sichtbare Sonderzeichen und das Theme anpassen — neben Dracula und Monokai auch die hellen Varianten GitHub und Solarized.

Beim Einfügen ordnet das Tool die Sprache nicht neu zu — anders als beim Öffnen einer Datei oder beim URL-Laden. Hier ist die manuelle Sprachwahl also der entscheidende Schritt, siehe auch Beispiel 3.

Beispiel 3: Die Sprache wechseln

Das Highlighting passt nicht, weil die Sprache falsch steht — typisch nach dem Einfügen oder wenn eine URL keine aussagekräftige Endung hat. Die automatische Erkennung beim Laden schaut nur auf Dateiname bzw. URL-Pfad und, falls der nichts verrät, auf wenige Merkmale des Inhalts (HTML, XML, SVG, PHP, JSON, sonst Text).

  1. Öffne den Sprachwähler (Dropdown in der Werkzeugleiste des Editors).
  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. Auch die Endung beim Speichern (File → Save) richtet sich danach.

Liefert z. B. eine URL ohne Endung ein Stylesheet aus, landet es als Text im Editor — stell auf CSS um, und die Selektoren, Eigenschaften und Werte werden korrekt eingefärbt. Umgekehrt steht eine Seite unter …/index.php im Modus PHP; stell sie auf HTML, wenn du sie formatieren, minifizieren oder in der Live-Vorschau ansehen willst.

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 — der Editor steht danach im HTML-Modus. Fügst du das HTML stattdessen ein, prüf, dass der Sprachwähler auf HTML steht — in Nicht-HTML-Modi wie Text oder Markdown verweigert das Tool die Konvertierung.
  2. Klick auf den Markdown-Button (Markdown-Symbol). Der html-to-markdown-Konverter (WebAssembly, Rust-Kern) wandelt das HTML im Browser um. Vorher macht das Tool relative Links und Bildquellen absolut (gegen die Lade-URL) und entfernt Skip-Links und Überschriften-Permalinks.
  3. Im Editor steht jetzt Markdown, der Sprachmodus hat automatisch auf Markdown gewechselt. Vorangestellt ist ein YAML-Frontmatter, das das Tool aus den Meta-Daten der Seite gebaut hat — Titel, Description, Open Graph, Twitter, weitere Meta- und Link-Tags, JSON-LD, die Überschriften-Gliederung sowie Link- und Bildstatistik.
  4. 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, speichern oder drucken.
  5. File → Save speichert das Markdown — der Dateiname bekommt automatisch die Endung .md.
  6. Brauchst du nur den nackten Text ohne Auszeichnung, nimm stattdessen den Plain-Text-Button (Text-Symbol) — ohne Frontmatter, der Editor wechselt auf Text.

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 prüf die Sprache: Die HTML-Routine greift für HTML, XML, SVG und Template-Sprachen wie Twig oder Vue, die CSS-Routine für CSS, SCSS und LESS, die JavaScript-Routine für JavaScript, TypeScript, JSX/TSX und JSON. Für andere Sprachen lehnt das Tool die Formatierung ab.
  2. Klick auf Beautify (Zauberstab). Der JS Beautifier rückt mit Tabs ein, setzt Anweisungen und Blöcke auf eigene Zeilen und stellt so die Struktur wieder her — lange Zeilen bricht er nicht um. Bei Dateien über 50 KB kündigt ein Hinweis an, dass es einen Moment dauert.
  3. Ist JavaScript mit P.A.C.K.E.R. gepackt (eval(function(p,a,c,k,e,…)) oder URL-kodiert, entpackt das Tool es vorher — ohne den Code auszuführen.
  4. Passt das Ergebnis nicht, macht Strg+Z den ganzen Schritt rückgängig.

Den umgekehrten Weg — Code verkleinern — zeigt Beispiel 9. 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 mit Prozent-Score landen als Markdown-Bericht im Editor.
  2. Für einen Technik-Check klick stattdessen auf Analyze connection (Schild-Symbol) oder drück einfach Enter im URL-Feld: Du bekommst IP, Protokoll/HTTP-Version, Timing, Security- und Caching-Header, die rohen HTTP-Header und den SSL-Teil — Vertrauensprüfung, Zertifikatsdetails, SANs und die Zertifikatskette. Die Details erscheinen auch dann, wenn das Zertifikat abgelaufen oder selbst signiert ist; die Zeile Verification nennt in dem Fall den Fehler.
  3. Der Editor steht danach automatisch auf Markdown — klick Preview, um den Bericht gerendert zu lesen, oder sichere ihn mit File → Save (Dateiname seo-…md bzw. connection-…md).
  4. Für eine Zweitmeinung öffnet das Menü External validation tools (Symbol mit Pfeil aus dem Kasten) die URL direkt im W3C-Validator, in PageSpeed Insights, im Schema.org-Validator oder im SSL Server Test.

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.

Beispiel 7: Eine Seite gerendert ansehen (HTML-Live-Vorschau)

Du hast eine HTML-Datei oder eine geladene Seite im Editor und willst sehen, wie sie aussieht — ohne fremden Code auf deiner Seite laufen zu lassen.

  1. Lade die Seite per Load oder öffne eine HTML-Datei; der Editor muss auf HTML (oder SVG) stehen.
  2. Klick Preview (Auge). Die HTML Preview rendert den Code im Vollbild-Dialog in einem abgeschotteten Frame — Badge „Scripts off": Skripte, Formulare und Pop-ups sind deaktiviert. Stylesheets, Webfonts und Bilder der Seite werden dagegen geladen, sofern sie per HTTPS kommen; relative Pfade löst das Tool gegen die Lade-URL auf.
  3. Schalte oben rechts zwischen voller Breite, Tablet (768 px) und Phone (390 px) um, um das responsive Verhalten zu prüfen.
  4. Ändere etwas im Editor — etwa eine Überschrift oder eine Klasse — und öffne die Vorschau erneut: Sie zeigt immer den aktuellen Stand.

Bleibt die Vorschau weitgehend leer, baut die Seite ihren Inhalt per JavaScript auf. Genau das ist der Stand, den ein Crawler ohne Rendering sieht.

Du brauchst eine Liste aller Links, Bilder oder eingebundenen Skripte einer Seite — etwa für einen Link-Check oder eine Inventur.

  1. Lade die Seite per Load von ihrer URL. Wichtig: Nur dann kennt das Tool die Basis-Adresse und kann relative Pfade absolut machen.
  2. Öffne More tools → Extract links, images, scripts….
  3. Wähl oben den Typ: Links, Images, Scripts, Stylesheets oder Headings. Jeder Button zeigt die Anzahl der Einträge.
  4. Lass Remove duplicates eingeschaltet, wenn du jede Adresse nur einmal brauchst; schalte es aus, wenn du wissen willst, wie oft ein Link vorkommt.
  5. Klick Copy — die Liste (eine Adresse pro Zeile) liegt in der Zwischenablage und lässt sich etwa in eine Tabelle oder ein Prüfskript einfügen.

Die Variante Headings liefert die Gliederung der Seite, nach Ebene eingerückt — ein schneller Blick darauf, ob die Überschriften-Hierarchie stimmt.

Beispiel 9: Code minifizieren

Ein Stylesheet oder ein JSON-Dokument soll für die Auslieferung möglichst klein werden.

  1. Füge den Code ein oder öffne die Datei und prüf die Sprache (HTML, XML, SVG, CSS, SCSS, LESS, JSON oder JavaScript).
  2. Öffne das Format-Menü (Pfeil rechts neben dem Zauberstab) und wähl Minify (HTML, CSS, JS, JSON).
  3. Ein Toast meldet die Größe vorher und nachher, zum Beispiel „Minified: 12.4 KB → 8.1 KB (−35 %) · Ctrl+Z to undo.".
  4. Sichere das Ergebnis mit File → Save — oder mach es mit Strg+Z rückgängig.

Das Tool geht dabei bewusst vorsichtig vor: Lizenzkommentare (/*! … */) in CSS bleiben stehen, in HTML wird Leerraum nur zusammengefasst und nie ganz entfernt, <pre>, <script> und <style> bleiben unangetastet. JavaScript läuft durch Terser.

Beispiel 10: Zwischenstände mit Snapshots sichern

Du baust eine Seite um und willst jederzeit zu einem früheren Stand zurückkönnen — auch nach dem Schließen des Tabs.

  1. Öffne File → Snapshots…, gib einen Namen ein (z. B. „vor dem Umbau") und klick Save current code.
  2. Arbeite weiter. Lädst du zwischendurch eine andere URL oder Datei, fragt das Tool nach, weil du den Code verändert hast, und legt vorher automatisch einen Snapshot an.
  3. Willst du zurück, öffne Snapshots… erneut und klick beim gewünschten Eintrag auf Restore. Sprache und Dateiname kommen mit; der Stand davor wird seinerseits als automatischer Snapshot gesichert.

Snapshots liegen nur in diesem Browser, höchstens 20 Stück — für dauerhafte Sicherung bleibt File → Save der richtige Weg.

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.