Source Viewer — Manual

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

Dieses Manual beschreibt den Source Viewer vollständig: wie Inhalt in den Editor kommt, was jede Funktion tut, wie der serverseitige Proxy beim URL-Laden arbeitet und welche technischen Grenzen gelten. Die Oberfläche des Tools ist auf Englisch — die Button- und Menü-Bezeichnungen werden deshalb in ihrer englischen Original-Schreibweise genannt (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Die drei Eingabewege

Es gibt drei Arten, Inhalt in den Editor zu bekommen:

Einfügen oder tippen. Klick in den Editor und füge Code per Strg+V ein oder schreib direkt los. Eigene Buttons für Cut, Copy und Paste stehen in der Werkzeugleiste; das Highlighting greift sofort, sobald die passende Sprache gewählt ist.
Lokale Datei öffnen. Der Button Open (Ordner-Symbol) öffnet über die HTML5 File API einen Dateidialog. Die Datei wird vollständig im Browser gelesen — sie verlässt deinen Rechner nicht.
Von URL laden. Trag oben im URL-Feld eine absolute http(s)-Adresse ein und klick Load. Der Quelltext wird serverseitig geholt (siehe Proxy-Architektur) und in den Editor geschrieben.

Wichtig beim URL-Laden: Nach dem Abruf setzt das Tool die Editor-Sprache immer auf HTML, unabhängig vom tatsächlichen Dateityp. Lädst du etwa eine .css- oder .js-Datei, stell die Sprache danach von Hand über den Sprachwähler um, damit das Highlighting passt.

Dein Stand wird automatisch im lokalen Browser-Speicher (localStorage) gesichert — inklusive der gewählten Sprache und der zuletzt eingegebenen URL. Das Badge storageStatus (Festplatten-Symbol) zeigt den Speicher-Status. Beim nächsten Besuch stellt der Editor den Inhalt wieder her (Toast „Content restored from local storage."). New beginnt eine leere Datei, Clear (Papierkorb) leert den Editor.

Der Editor und das Syntax-Highlighting

Der Editor basiert auf dem ACE Editor — derselben Engine, die auch im Source Code-Tab des SEO & GEO Analyzers steckt.

Sprachen und Highlighting

Über den Sprachwähler (Dropdown oben rechts) wählst du den Sprachmodus. Die Liste umfasst über 100 Sprachen: ganz oben eine Gruppe gängiger Sprachen (HTML, CSS, JavaScript, TypeScript, JSON, JSX, TSX, Vue, LESS, SASS, SCSS, Markdown, MySQL, PHP, Python, Text, Twig, XML, YAML), darunter alphabetisch der komplette Rest — von ABAP, Assembly und C/C++ über Dockerfile, Go, Kotlin, Lua, Rust und Swift bis Terraform, Verilog und XQuery. Standardmäßig startet der Editor im HTML-Modus.

Das Highlighting selbst liefert ACE über seine Sprachmodi; es gibt keine Auto-Erkennung der Sprache aus dem Inhalt — du wählst den Modus aktiv. Zusätzlich aktiv: Linting (Syntax-Prüfung über Worker), Autovervollständigung (Basis, Snippets und Live-Vorschläge) und Hervorhebung des Worts unter dem Cursor.

Themes

Im Einstellungs-Dialog (Settings) stehen zwei dunkle Themes zur Wahl: Dracula (Standard) und Monokai. Ein helles Theme gibt es im Editor nicht; die Markdown-/Text-Vorschau rendert dagegen auf hellem Grund.

Bearbeiten, Navigieren, Suchen

Undo/Redo, Indent/Outdent, Schriftgröße +/−, Zeilenumbruch umschalten und Vollbild (Toggle) liegen als Buttons in der Werkzeugleiste.
Über das More tools-Menü (Drei-Punkte) erreichst du Go to Line (Strg+G), Find (Strg+F), Replace (Strg+H) und Print sowie die Dialoge Keyboard Shortcuts und Settings.
Der Dialog Keyboard Shortcuts listet alle Tastenkürzel — Datei, Navigation, Suche, Editing, Auswahl und Code-Faltung. Beispiele: Strg+D Zeile duplizieren, Alt+↑/↓ Zeile verschieben, Strg+/ Kommentar umschalten, Strg+Shift+L alle Vorkommen auswählen, Alt+0 alles falten.

Einstellungen

Der Settings-Dialog steuert: Schriftgröße (8–32 px), Tab-Größe (2/4/8 Leerzeichen), Theme (Dracula/Monokai), Zeilenumbruch, sichtbare Sonderzeichen, Einrück-Hilfslinien, Zeilennummern (Gutter), Hervorhebung der aktiven Zeile, Autovervollständigung und Linting. Reset to Defaults stellt die Standardwerte wieder her.

Umwandeln und Vorschau

Beautify

Der Button Beautify (Zauberstab) formatiert den Inhalt mit dem JS Beautifier. Welche Routine läuft, hängt von der Eingabe ab: Im Modus CSS läuft die CSS-Routine; sonst entscheidet der Inhalt — beginnt er mit einem <-Tag, greift die HTML-Routine, andernfalls die JavaScript-Routine (die auch JSON sinnvoll einrückt). Andere Modi wie LESS/SASS/SCSS lösen daher die JavaScript-Routine aus, nicht die CSS-Routine — für echtes SASS/SCSS ist der Compiler die bessere Wahl. Der Beautifier bringt die mitgelieferten Unpacker mit und kann so auch verschleierten/minifizierten JavaScript-Code wieder lesbar machen. Bei leerem Editor kommt der Hinweis „Nothing to beautify.".

HTML → Markdown

Der Button mit dem Markdown-Symbol wandelt HTML in Markdown um. Dafür läuft der html-to-markdown-Konverter als WebAssembly-Modul (Rust-Kern) direkt im Browser. Aus den im <head> gefundenen Meta-Daten (Titel, Description, Open Graph, Twitter, weitere Meta-Tags und <link>-Angaben) baut das Tool zusätzlich ein YAML-Frontmatter und stellt es dem Markdown voran. So entsteht aus einer abgerufenen HTML-Seite in einem Schritt eine saubere, frontmatter-versehene Markdown-Datei.

HTML → Plain Text

Der Button mit dem Text-Symbol wandelt HTML in reinen Text um — Formatierung gestrippt, ohne Frontmatter.

Markdown-/Text-Vorschau

Der Button Preview (Auge) ist nur bei den Sprachen Text und Markdown aktiv. Er öffnet eine Vollbild-Vorschau, in der das Markdown per markdown-it (samt Plugins für Fußnoten, Definitionslisten, Sub/Sup, Mark, Ins, Emoji, Abkürzungen und Task-Listen) als HTML gerendert wird; Code-Blöcke darin werden mit highlight.js hervorgehoben. Ein vorangestelltes YAML-Frontmatter wird in der Vorschau als yaml-Codeblock dargestellt. Aus der Vorschau heraus kannst du das Ergebnis als HTML kopieren, als HTML speichern oder drucken.

URL-Analyse: SEO und Verbindung

Neben dem reinen Quelltext kann das Tool zwei Analyse-Berichte zu einer URL laden — beide laufen über denselben Proxy und landen als Markdown-Bericht im Editor:

SEO (Balken-Symbol, Button SEO) — eine On-Page-Auswertung der Seite: Titel und Länge, alle Meta-Tags, <link>-Attribute, Tag-Zähler für <head> und <body>, Überschriften-Hierarchie, alle Links und Bilder mit Attributen, eine Barrierefreiheits-Übersicht, Keyword-Dichte, eine Plain-Text-Version und konkrete SEO-Empfehlungen mit einem Prozent-Score. Das ist dieselbe Analyse-Familie wie der SEO & GEO Analyzer, hier in den Editor geliefert.
Analyze connection (Schild-Symbol) — eine Verbindungs- und Header-Analyse: finale URL, IP, Protokoll und HTTP-Version, HTTP-Status, Timing (DNS, TCP, SSL-Handshake, Total), SSL-Zertifikat (Subject, Issuer, Gültigkeit, Restlaufzeit, SANs, Chain, Algorithmus), Security-Header, Server-Infos, Caching-Header und die rohen HTTP-Header. Verbindungs- und SSL-Fehler werden als Diagnose ausgegeben statt einfach abzubrechen.

Dazu kommt Open URL in new tab (Pfeil-Symbol), das die eingegebene URL einfach im neuen Tab öffnet, sowie ein Validate-Menü mit externen Werkzeugen (W3C-Markup-Validator, PageSpeed Insights, Structured-Data-Test, SSL-Server-Test, IP-Geolocation, Redirect-Checker) — diese Einträge öffnen jeweils den externen Dienst in einem neuen Tab.

Proxy-Architektur: serverseitiger Abruf

Sobald eine der drei URL-Funktionen (Load, SEO, Analyze connection) läuft, wird die Zielseite vom JPKCom-Server abgerufen, nicht von deinem Browser. Der Grund ist CORS: Ein direkter Abruf einer fremden Domain aus dem Browser scheitert. Für den Datenschutz heißt das: Die Zielseite sieht einen Request vom JPKCom-Server (mit dessen User-Agent), nicht deine IP-Adresse.

Im Hintergrund arbeiten zwei serverseitige Endpunkte: ein Fetch-Proxy, der die Seite per cURL holt und (je nach Modus) roh ausliefert oder als Markdown-Analyse aufbereitet, und ein token-basierter Endpunkt, der dem Tool-JavaScript vor jedem Abruf ein frisches, tagesrotierendes Token-Paar liefert. Beides ist kein öffentliches API, das du selbst aufrufen kannst — die Endpunkte sind ausschließlich für das Tool gedacht und gehärtet:

Referer-Prüfung: Anfragen werden nur akzeptiert, wenn sie nachweislich von der Tool-Seite (/tools/source/) kommen; sonst HTTP 403.
Token-Authentifizierung: Ein zweistufiges, zeitgestempeltes Token (V2) verhindert, dass die Endpunkte ohne das Tool angesprochen werden.

SSRF-Schutz und Grenzen

SSRF-/Private-IP-Schutz: Interne, lokale und private IP-Adressen werden blockiert. Als Protokolle sind nur HTTP und HTTPS erlaubt. localhost, Intranet und Dev-Instanzen lassen sich daher nicht laden.
Größenlimit: Der Abruf ist auf rund 950 KB Antwortgröße begrenzt; größere Inhalte werden abgeschnitten.
Timeout: Der Abruf läuft mit einem 15-Sekunden-Timeout (für die Header-/Verbindungs-Analyse ebenso).
Rate-Limit (clientseitig): Die URL-Buttons (Load, SEO, Analyze connection) teilen sich eine Drossel von etwa einer Anfrage pro Sekunde. Feuerst du schneller, kommt der Hinweis „Please wait … second(s) before the next request.".

Expert Mode (optional)

Es gibt einen optionalen Expert Mode mit einem selbst betriebenen lokalen Proxy (LocalProxy auf http://127.0.0.1:<port>). Ist er aktiv, holt dieser lokale Proxy die Seite statt des JPKCom-Servers — die clientseitige Rate-Drossel wird dann übersprungen. Die Einrichtung ist fortgeschritten und für den normalen Betrieb nicht nötig.

Grenzen — kompakt

Sprach-Auswahl ist manuell. Es gibt keine inhaltsbasierte Auto-Erkennung; nach einem URL-Load steht die Sprache immer auf HTML.
URL-Laden nur für öffentliche http(s)-Seiten. Kein Login-Bereich, kein localhost/Intranet, nur HTTP/HTTPS, max. ~950 KB, 15 s Timeout, ~1 Anfrage/Sekunde.
Beautify ist sprachabhängig. Es greifen die CSS-, HTML- oder JS-Routinen — andere Sprachen werden nicht „verschönert".
Preview nur für Text/Markdown. Bei allen anderen Sprachen ist der Vorschau-Button deaktiviert.
Keine KI im Tool. Der Source Viewer nutzt selbst keine KI; die HTML-zu-Markdown-Funktion ist lediglich KI-freundlich, weil Markdown rauschärmer ist.

Für den Einstieg und das große Bild siehe die Übersicht, für konkrete Abläufe die Beispiele und für Kniffe die Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.