JPKCom DB

Source Viewer — Tipps & Tricks

Kniffe für den Source Viewer: was der Proxy sieht, Spracherkennung, Beautify- und Minify-Grenzen, sichere Vorschau, Snapshots und Tool-Kombinationen.

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

Das Manual erklärt jede Funktion, die Beispiele zeigen die Abläufe. Hier geht es um das, was beides voraussetzt, aber selten dabeisteht: wo die Stolperfallen liegen, was der Proxy wirklich sieht und wie der Source Viewer mit anderen Tools zusammenspielt. Die Oberfläche ist auf Englisch — die echten Button- und Menü-Namen stehen deshalb im Original.

Was der Proxy sieht — und was nicht

  • Geladen wird vom JPKCom-Server, nicht von deinem Browser. Beim URL-Laden (Load, SEO, Analyze connection) holt ein serverseitiger Proxy die Seite. Die Zielseite sieht deshalb einen Request vom JPKCom-Server (mit einem browserüblichen User-Agent) — nicht deine IP-Adresse. Das ist gut für die Privatsphäre, heißt aber auch: keine personalisierte, eingeloggte oder cookie-abhängige Sicht. Die Ausnahme ist die Vorschau — Stylesheets, Webfonts und Bilder der HTML-Live-Vorschau und Bilder der Markdown-Vorschau lädt dein Browser direkt, mit deiner IP-Adresse.
  • Nur das ausgelieferte Roh-HTML, kein gerendertes DOM. Was eine Seite erst per JavaScript im Browser nachbaut — Inhalte, Meta-Daten, ganze SPA-Oberflächen — taucht im geladenen Quelltext nicht auf. Eine client-gerenderte App liefert oft nur ein fast leeres Grundgerüst. Das ist kein Fehler des Tools, sondern derselbe Grund, aus dem auch Crawler solche Seiten schlecht erfassen.
  • Private und interne URLs gehen nicht. Aus SSRF-Schutz blockiert der Proxy private, lokale und interne IP-Adressen — auch dann, wenn eine öffentliche Adresse dorthin weiterleitet; erlaubt sind nur öffentliche HTTP/HTTPS-Adressen. Eine lokale Dev-Instanz, localhost oder eine Intranet-Seite kannst du nicht laden. Der Ausweg: über eine öffentliche Staging-Domain bereitstellen — oder die Datei lokal speichern und per File → Open file… bzw. Drag & Drop öffnen.
  • Große Seiten scheitern, schnelles Klicken wird gebremst. Es gilt ein Größenlimit von 950 KB — größere Antworten bricht der Proxy mit „The file is too large." ab, statt sie gekürzt zu liefern — und ein 15-Sekunden-Timeout. Die URL-Buttons teilen sich eine Drossel von einer Anfrage pro Sekunde (sonst der Hinweis „Please wait …"), der Server erlaubt zusätzlich 120 Abrufe pro Minute und IP. Für größere Dateien beim reinen Laden gibt es den optionalen Expert Mode mit lokalem Proxy (laut Tool bis 50 MB, ohne Drossel); SEO und Verbindungsanalyse laufen auch dann über den Server.
  • Enter ist nicht Load. Enter im URL-Feld startet die Verbindungsanalyse. Willst du den Quelltext, klick Load.

Die Sprachwahl — automatisch, aber nicht unfehlbar

  • Beim Laden rät das Tool, beim Einfügen nicht. Öffnest du eine Datei, ziehst sie in den Editor oder lädst eine URL, stellt das Tool die Sprache nach Dateiname bzw. URL-Pfad ein (.css, .js, .json, .yml, Dockerfile …). Eingefügten Code ordnet es nicht neu zu — steht das Highlighting dann „falsch", liegt es fast immer an der noch nicht umgestellten Sprache.
  • Ohne Endung entscheidet der Inhalt — grob. Erkannt werden nur HTML, XML, SVG, PHP und JSON; alles andere landet als Text. Ein Stylesheet unter /styles musst du also selbst auf CSS stellen. Vorsicht bei einer bloßen Domain ohne / am Ende: Bei https://example.pl hält das Tool .pl für eine Dateiendung und stellt Perl ein (ebenso .io, .sh) — mit https://example.pl/ entscheidet der Inhalt.
  • .php-Adressen landen im PHP-Modus. Das Highlighting passt, aber Beautify, Minify und die HTML-Live-Vorschau verweigern PHP. Stell für diese Funktionen auf HTML um.
  • Die Sprache bestimmt auch die Dateiendung. File → Save hängt die Endung des aktuellen Modus an — stell also vor dem Speichern um, wenn du z. B. .scss statt .css willst.

Beautify und Konvertierung richtig einsetzen

  • Beautify ist sprachabhängig. Es laufen nur die HTML- (inkl. XML, SVG, Vue, Twig & Co.), CSS- (inkl. SCSS, LESS) oder JavaScript-Routinen (inkl. TypeScript, JSX, JSON). Für andere Sprachen — Markdown, YAML, Python, SASS — lehnt das Tool ab, statt den Code zu verunstalten. Gepacktes JavaScript entpackt es vorher, allerdings nur P.A.C.K.E.R.- und URL-kodierten Code — und ohne ihn auszuführen.
  • Minify ist vorsichtig — und das ist Absicht. HTML wird nur zusammengefasst, nicht aggressiv gekürzt; <pre>, <script> und <style> bleiben, wie sie sind, CSS-Lizenzkommentare (/*! */) ebenso. Für JavaScript läuft Terser mit Umbenennung lokaler Namen. TypeScript und JSX minifiziert das Tool nicht.
  • HTML → Markdown erzeugt Frontmatter. Der Konverter zieht aus dem <head> ein YAML-Frontmatter (Titel, Description, OG, Twitter, Link-Tags, JSON-LD, Gliederung, Link- und Bildstatistik) und stellt es voran. Willst du nur den Fließtext ohne Frontmatter, nimm den Plain-Text-Button statt des Markdown-Buttons.
  • Absolute Links gibt es nur mit Herkunft. Relative Links und Bildpfade macht die Konvertierung nur absolut, wenn die Seite per URL geladen wurde oder ein <base href> enthält. Bei eingefügtem HTML hilft es, ein <base href="https://…/"> in den <head> zu setzen. Umgekehrt merkt sich das Tool die Lade-URL, bis du New file, Open file… (auch per Drag & Drop) oder Clear editor wählst oder einen SEO- bzw. Verbindungsbericht lädst — fügst du nach einem Load fremdes HTML ein, werden dessen Links gegen die alte Adresse aufgelöst.
  • Konvertieren braucht HTML. Steht der Editor auf Markdown, Text oder einer anderen Nicht-HTML-Sprache, verweigert das Tool die Umwandlung — so kann ein versehentlicher Klick dein Markdown nicht durch ein leeres Ergebnis ersetzen.
  • Preview hat zwei Gesichter. Bei HTML und SVG öffnet sie die abgeschottete Live-Vorschau, bei Markdown und Text die gerenderte Vorschau mit Export als HTML. Bei allen anderen Sprachen ist der Button deaktiviert.

Sicher ansehen, nichts verlieren

  • Die Live-Vorschau führt keinen fremden Code aus. Sie läuft in einem Sandbox-Frame ohne Skripte, Formulare und Pop-ups. Du kannst also auch Seiten unbekannter Herkunft gefahrlos ansehen — siehst dafür aber nur den Zustand ohne JavaScript. Auch die Markdown-Vorschau bereinigt das gerenderte HTML, bevor sie es anzeigt.
  • Überschreiben mit Netz. Hast du Code bearbeitet, fragt jede Lade- oder Leeren-Aktion nach und legt vorher einen automatischen Snapshot an. Beautify, Minify und Konvertierung fragen nicht, sind aber mit einem Strg+Z rückgängig.
  • Snapshots vor großen Umbauten. Ein benannter Snapshot unter File → Snapshots… kostet einen Klick und überlebt das Schließen des Tabs. Es bleiben höchstens 20 — automatische fliegen zuerst raus, deine benannten also zuletzt.
  • Geteilter Rechner? Gründlich aufräumen. Inhalt, Sprache, letzte URL, Snapshots, die Liste Recent URLs und die Einstellungen liegen im Browser-Speicher. Clear editor löscht nur den automatisch gespeicherten Editor-Inhalt; Snapshots löschst du einzeln im Snapshot-Dialog, die URL-Liste mit Clear list im Uhr-Menü.

Keine KI im Tool — aber KI-freundlich

Der Source Viewer nutzt selbst keine KI: kein Modell, keine Generierung, keine KI-gestützte Erkennung. Die HTML-zu-Markdown-Funktion ist lediglich KI-freundlich, weil Markdown rauschärmer ist als HTML und sich gut als kompakte Quelle für ein Sprachmodell eignet. Auch die Spracherkennung beim Laden ist keine „Intelligenz", sondern eine feste Regel: Dateiendung zuerst, dann ein paar eindeutige Merkmale wie <?xml oder gültiges JSON. Alles ist deterministisch und von dir übersteuerbar.

Mit anderen JPKCom-Tools kombinieren

Der Source Viewer ist ein guter Allrounder — für scharf umrissene Aufgaben gibt es spezialisiertere Tools:

  • SEO & GEO Analyzer — wenn du statt eines kompakten Markdown-Berichts die vollständige, bewertete Analyse einer URL willst (zwei Scores, Tabs, SSL, Redirects, Structured Data). Nutzt denselben Proxy und denselben ACE-Editor im Source Code-Tab.
  • Beautify — der dedizierte Formatierer und Entpacker für JavaScript, CSS und HTML.
  • Compiler — SASS/SCSS kompilieren sowie HTML/JS/CSS minifizieren und verschönern, wenn du mehr Kontrolle brauchst als hier.
  • Playground — wenn du HTML/CSS/JavaScript nicht nur ansehen, sondern live ausführen willst.
  • Markdown Editor — um das per HTML-zu-Markdown gewonnene Ergebnis komfortabel weiterzuschreiben.

Noch mehr Kontext: die Übersicht zum großen Bild, das Manual für jede Funktion und die Beispiele für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im Tool.