Process HTML in the Browser and preview it safely
Load HTML code or one HTML file, configure how the original URL, JavaScript, and Links are handled, review the sandboxed Preview, then save it as .html.
Open the HTML Web Archive GeneratorConclusion: Prepare HTML appropriate for the purpose, verify the preview and external references, then save it
For a static page, you can use page source or a saved HTML file. For a page where JavaScript adds content, you need to obtain the post-execution DOM rather than the initial HTML.
Current DevelopTools is not a resource crawler. It normalizes URLs in HTML but does not collect CSS, images, and fonts into one file.
“It was saved” and “it can always be reproduced with exactly the same appearance in the future” are separate determinations.
Distinguish saved targets as HTML source, current DOM, or complete page save.
| Algorithm | What to save | Items likely to remain | Other required items |
|---|---|---|---|
| Save HTML Source | HTML string returned by the server | Static tags, attributes, and body content | Content added after JavaScript execution |
| Save current DOM | Serialization of the DOM built and updated by the browser | Elements added by the SPA | Canvas pixels, closed Shadow DOM, and all execution state |
| Save complete page | HTML and related reference Resources | CSS, images, fonts, and other resources collected where possible | CORS, authentication, dynamic communication, and rights checks |
"Saved the HTML" does not mean external CSS, images, fonts, videos, and iframe destinations were included in the file. First determine what you need to review later, then record the storage method and missing information.
Determine the purpose and input source before saving.
The method differs depending on whether you retain the text and structure, the screen appearance, or the state after interaction.
Recording the source URL, retrieval date and time, browser, login state, and whether JavaScript was executed makes rechecking easier.
| Item | How to check | judgment |
|---|---|---|
| Body text and tags | Display and inspect HTML source | Static source is sufficient |
| Content after the operation | Check with DOM inspector | Current DOM required |
| Appearance only | Compare with Screenshot/PDF | Non-HTML candidates as well |
| Offline reproduction | Disconnect from the network to verify | External resource collection is required |
Basic steps for creating an HTML snapshot
- Prepare the HTML source or HTML file to save.
- Enter the original URL and set the base for relative URLs and Metadata.
- Enable JavaScript removal and disable external Links if necessary.
- Preview at PC and Smartphone widths, then check the body, images, and Links.
- Download under a different name, reopen it, and check network dependencies.
If a URL cannot be fetched due to CORS, switch to pasting or file loading rather than treating it as a failure.
Choose a save method by purpose.
| purpose | First choice |
|---|---|
| Investigate the Tag and body text | HTML source |
| Content after SPA rendering | Currently DOM |
| Visual record | Screenshot or PDF |
| Reproduce nearby Offline | A dedicated storage format including Resources |
| Tamper resistance is required | Trusted archive and timestamp infrastructure |
Check external resources and relative URLs before saving
| Description | Whether it is included in the HTML alone | Check points |
|---|---|---|
| <link rel="stylesheet" href="/app.css"> | Not included | Whether it can connect to the original server and resolve url() in CSS |
| <img src="../images/a.png"> | Not included | Whether it has been converted to an absolute URL based on the original URL |
| <img src="data:image/png;base64,..."> | Included | Check for increased file size, the MIME type, and the creator's rights |
| <canvas> | Drawing commands and bitmaps are usually not included. | If necessary, a separate process is required to rasterize under the same-origin condition. |
| blob: URL | The actual content is not included | Cannot be used beyond the lifetime of the source page |
Converting to absolute URLs or adding a base element corrects references; it does not embed the resource itself in HTML. If the resource is deleted from the original server, the appearance of the saved HTML may also change.
What DevelopTools can and cannot do
| Item | Support in the current Tool |
|---|---|
| Input | Pasted HTML code, one .html/.htm file, or retrieval from a URL that permits CORS |
| URL processing | Resolve href, src, srcset, poster, and action to absolute URLs based on the original URL, and add base if necessary |
| Safety | By default, remove script, on* attributes, javascript: URLs, and meta refresh. Disabling links is optional |
| Metadata | Add the archive title, local save date/time, and original URL to the beginning of the body |
| Preview | Check PC and Smartphone widths in a sandboxed iframe without Script permissions. |
| output | Download HTML containing DOCTYPE and UTF-8 meta with a filename where Windows-prohibited characters are replaced |
| Unsupported | Direct DOM retrieval from the page being viewed, inlining external resources, ZIP, Canvas/Shadow DOM state, and complete offline conversion |
The URL field is not a Proxy for bypass-fetching arbitrary sites. If the destination does not permit CORS, the user must obtain and paste the HTML source or current DOM themselves.
Treat saved HTML as untrusted active content.
A document parsed by DOMParser as text/html is generally inert during processing, but event handlers and similar code may run if unprocessed nodes are inserted into the active DOM. Do not consider content safe merely because it has been parsed.
- For the first run, verify in an environment isolated from network access and confidential data
- Check script, event attributes such as onerror, javascript: URLs, and meta refresh.
- Check the destinations of iframe, object, embed, form, external resources, and download links
- Do not casually add allow-scripts or allow-same-origin to Preview; isolate it in a sandbox.
- The saved date and time is the local time of the device used and is not a tamper-resistant timestamp or legal evidence.
Primary sources used for specification verification
- MDN: DOMParser.parseFromString()
- MDN: Element.outerHTML
- MDN: Same-origin policy
- MDN: iframe element and sandbox
- MDN: base element
- MDN: data URL
- MDN: ShadowRoot.getHTML()
- WHATWG HTML: HTML fragment serialization
Browser implementations of CORS, sandboxing, HTML serialization, Shadow DOM, and similar features are updated. When standardizing a save procedure, also check target browser support and the MDN and HTML Standard current at the time of use.
Example: Save the HTML of a public specification page with a date
Save the source of a static specification page and record the source URL and save date and time at the top of the web archive.
Text and link structure remain, but external CSS and images connect to the source server, so record offline verification results as well.
- Copy Page source as UTF-8
- Paste into DevelopTools
- Enter the original URL and title
- Check the safe preview
- Save using a file name with the archive date.
When saving or sharing third-party pages, check copyright, terms of use, and personal information.
Frequently asked questions
- Can any web page be saved by entering its URL?
- No. Browser cross-origin reads depend on CORS permission from the source Server. If not permitted, switch to saving the HTML source, copying the current DOM, or loading a saved HTML file.
- Is the generated HTML a fully offline save?
- No. The current tool does not embed external CSS, images, Fonts, videos, and so on into the file. Converting them to absolute URLs still leaves communication with the referenced Server.
- Is the entered HTML sent to DevelopTools?
- Pasting, File loading, processing, and Download occur in the Browser. Only when URL retrieval is run does the user's Browser connect directly to the entered retrieval URL.