JPKCom DB

Source Viewer — Tips & Tricks

Tricks for the Source Viewer: what the proxy sees, language detection, beautify and minify limits, safe previews, snapshots, and combining it with other tools.

Back to the overview: Source Viewer · Open the tool live: www.jpkc.com/tools/source/

The manual explains every function, the examples show the workflows. This page is about what both assume but rarely state: where the pitfalls are, what the proxy actually sees, and how the Source Viewer plays with other tools. Button and menu names are given exactly as the tool shows them.

What the proxy sees — and what it doesn't

  • The fetch comes from the JPKCom server, not your browser. When loading a URL (Load, SEO, Analyze connection) a server-side proxy retrieves the page. The target page therefore sees a request from the JPKCom server (with a regular browser user agent) — not your IP address. That's good for privacy, but it also means: no personalized, logged-in, or cookie-dependent view. The exception is the preview — stylesheets, web fonts, and images in the HTML live preview and images in the Markdown preview are loaded by your browser directly, with your IP address.
  • Only the delivered raw HTML, no rendered DOM. Whatever a page builds later via JavaScript in the browser — content, meta data, entire SPA interfaces — does not appear in the loaded source. A client-rendered app often delivers little more than an empty skeleton. That's not a tool bug; it's the same reason crawlers struggle with such pages.
  • Private and internal URLs don't work. For SSRF protection the proxy blocks private, local, and internal IP addresses — including when a public address redirects there; only public HTTP/HTTPS addresses are allowed. A local dev instance, localhost, or an intranet page can't be loaded. The way around it: expose it via a public staging domain — or save the file locally and open it via File → Open file… or drag and drop.
  • Large pages fail, rapid clicking gets throttled. There's a 950 KB size limit — the proxy aborts larger responses with "The file is too large." instead of delivering them truncated — and a 15-second timeout. The URL buttons share a throttle of one request per second (otherwise the "Please wait …" note), and the server additionally allows 120 fetches per minute per IP. For bigger files on a plain Load there's the optional Expert Mode with a local proxy (up to 50 MB according to the tool, no throttle); SEO and the connection analysis still go through the server.
  • Enter is not Load. Enter in the URL field starts the connection analysis. If you want the source, click Load.

The language choice — automatic, but not infallible

  • The tool guesses on load, not on paste. When you open a file, drop it onto the editor, or load a URL, the tool sets the language from the file name or URL path (.css, .js, .json, .yml, Dockerfile …). Pasted code is not reassigned — if the highlighting looks "wrong" then, it's almost always the language not yet being switched.
  • Without an extension the content decides — roughly. Only HTML, XML, SVG, PHP, and JSON are recognized; everything else lands as Text. A stylesheet served under /styles is yours to switch to CSS. Watch out for a bare domain without a trailing /: for https://example.pl the tool takes .pl for a file extension and picks Perl (likewise .io, .sh) — with https://example.pl/ the content decides.
  • .php addresses land in PHP mode. The highlighting fits, but Beautify, Minify, and the HTML live preview refuse PHP. Switch to HTML for those functions.
  • The language also sets the file extension. File → Save appends the extension of the current mode — so switch before saving if you want .scss instead of .css, for instance.

Use beautify and conversion well

  • Beautify depends on the language. Only the HTML (incl. XML, SVG, Vue, Twig, and friends), CSS (incl. SCSS, LESS), or JavaScript routines (incl. TypeScript, JSX, JSON) run. For other languages — Markdown, YAML, Python, SASS — the tool refuses rather than mangling the code. Packed JavaScript is unpacked first, but only P.A.C.K.E.R. and URL-encoded code — and without executing it.
  • Minify is cautious — on purpose. HTML is only collapsed, not aggressively trimmed; <pre>, <script>, and <style> stay as they are, and so do CSS license comments (/*! */). JavaScript goes through Terser, including renaming of local names. TypeScript and JSX are not minified.
  • HTML → Markdown produces frontmatter. The converter pulls a YAML frontmatter block from the <head> (title, description, OG, Twitter, link tags, JSON-LD, outline, link and image statistics) and prepends it. If you only want the body text without frontmatter, use the plain-text button instead of the Markdown button.
  • Absolute links need an origin. The conversion only makes relative links and image paths absolute if the page was loaded by URL or contains a <base href>. For pasted HTML, adding a <base href="https://…/"> to the <head> does the trick. Conversely, the tool remembers the load URL until you choose New file, Open file… (drag and drop included), or Clear editor, or load an SEO or connection report — if you paste other HTML after a load, its links are resolved against the old address.
  • Converting needs HTML. If the editor is on Markdown, Text, or any other non-HTML language, the tool refuses to convert — so a stray click can't replace your Markdown with an empty result.
  • Preview has two faces. For HTML and SVG it opens the sandboxed live preview, for Markdown and Text the rendered preview with HTML export. For all other languages the button is disabled.

View safely, lose nothing

  • The live preview runs no foreign code. It works in a sandboxed frame without scripts, forms, and pop-ups. You can look at pages of unknown origin without risk — in exchange you only see the state without JavaScript. The Markdown preview, too, sanitizes the rendered HTML before showing it.
  • Overwriting with a safety net. Once you have edited code, every load or clear action asks first and takes an automatic snapshot beforehand. Beautify, Minify, and the conversions don't ask, but a single Ctrl+Z undoes them.
  • Snapshots before big changes. A named snapshot under File → Snapshots… costs one click and survives closing the tab. At most 20 are kept — automatic ones go first, so your named ones go last.
  • Shared machine? Clean up properly. Content, language, last URL, snapshots, the Recent URLs list, and the settings all live in browser storage. Clear editor only removes the auto-saved editor content; snapshots you delete one by one in the snapshot dialog, the URL list with Clear list in the clock menu.

No AI in the tool — but AI-friendly

The Source Viewer uses no AI itself: no model, no generation, no AI-driven detection. The HTML-to-Markdown function is merely AI-friendly because Markdown carries less noise than HTML and makes a good compact source for a language model. Language detection on load isn't "intelligence" either, just a fixed rule: file extension first, then a few unambiguous markers such as <?xml or valid JSON. Everything is deterministic, and you can always override it.

Combine with other JPKCom tools

The Source Viewer is a good all-rounder — for sharply defined tasks there are more specialized tools:

  • SEO & GEO Analyzer — when you want the full, scored analysis of a URL instead of a compact Markdown report (two scores, tabs, SSL, redirects, structured data). Uses the same proxy and the same ACE editor in its Source Code tab.
  • Beautify — the dedicated formatter and unpacker for JavaScript, CSS, and HTML.
  • Compiler — compile SASS/SCSS and minify and beautify HTML/JS/CSS when you need more control than you get here.
  • Playground — when you want to run HTML/CSS/JavaScript live, not just view it.
  • Markdown Editor — to comfortably keep writing the result you got from HTML-to-Markdown.

There's more context elsewhere: the overview for the big picture, the manual for every function, and the examples for the step-by-step workflows. You can try everything directly in the tool.