最可靠方式是进入「查看页面源代码」标签页(地址栏以view-source:开头)后按Ctrl+S或Cmd+S保存;该页内容即服务器返回的原始HTML,未执行JS,与Elements面板中动态渲染后的DOM有本质区别。

直接保存原始 HTML 源码最可靠的方式,是在「查看页面源代码」标签页里按 Ctrl+S(Windows)或 Cmd+S(macOS)——不是在原网页上右键另存为,也不是在 Elements 面板里复制,那得到的是渲染后 DOM。
怎么拿到真正的原始 HTML 源码?
原始源码指服务器返回的、未经 JS 修改的初始 HTML。它和你在 Elements 面板看到的结构可能完全不同(比如少了动态插入的 <div>,多了服务端注释)。
- 打开目标网页,按
Ctrl+U(Windows/Linux)或Cmd+Option+U(macOS),进入源码查看页 - 此时地址栏 URL 以
view-source:开头,这是关键识别标志 - 在这个页面里按
Ctrl+S,保存类型选「所有文件」或「Web Page, HTML Only」,文件名加.html后缀 - 别用记事本默认 ANSI 编码保存,务必手动选
UTF-8,否则中文变
为什么 Elements 里复制的不是原始源码?
Elements 面板显示的是当前内存中的 DOM 树,已受 JS 执行、框架挂载、Shadow DOM 等影响。你复制 document.documentElement.outerHTML 或右键「Copy outerHTML」,得到的是“此刻浏览器理解的 HTML”,不是服务器发来的那一份。
- 常见错误现象:
fetch()或XMLHttpRequest跨域失败时,想用 JS 抓源码——根本做不到,浏览器禁止跨域读取响应体 - SPA 页面(如 React/Vue 路由)在
Elements里看到的可能是空<div id="root"></div>,原始源码里却有完整骨架 - 如果必须用开发者工具,且需原始内容,应切到
Network→ 刷新 → 找Doc类型请求 → 右键Save as
命令行抓取:curl 和 wget 的关键参数
自动化或绕过浏览器限制时,curl 和 wget 是更可控的选择,但默认行为不等价于「查看源代码」。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit,触发小红书发布。
立即学习“前端免费学习笔记(深入)”;
-
curl -o page.html https://example.com→ 获取服务器原始响应,等效于view-source: -
wget -O page.html https://example.com→ 同样获取原始 HTML,但默认不跟随重定向,加-L参数才等效 - 注意:某些网站会根据
User-Agent返回不同内容,curl默认无 UA,可加-H "User-Agent: Mozilla/5.0"避免被屏蔽 - 不要用
wget --page-requisites来“保存源码”——那是下载整个网页资源,生成一堆文件夹,不是单个.html
离线打不开?大概率是路径或协议问题
保存下来的 .html 文件双击用 file:// 协议打开时,90% 的失败跟三件事有关:绝对路径引用、AJAX 请求、Service Worker。
- 检查 HTML 里是否有
src="/js/app.js"这种根路径——file://下无法解析,得改成相对路径src="js/app.js" - 含
fetch('/api/data')的页面,在本地直接打开必报 CORS 错误,因为没有服务端支持 - 如果页面注册了 Service Worker(查
navigator.serviceWorker),file://协议下会静默失败,控制台可能只报Failed to register a ServiceWorker - 真正要离线可用,优先用浏览器「另存为 → 网页,全部」,它会自动转相对路径并下载资源到同名文件夹
原始源码和渲染后 DOM 的差异,是保存动作中最容易被忽略的分水岭。选错入口,后面所有操作都基于一个已被篡改的快照——这不是编码问题,是数据源头错了。


















