右键“查看页面源代码”适合静态页,仅保存服务器原始html,无法获取js渲染内容;开发者工具复制outerhtml可得动态dom;curl/wget适合批量抓取原始html;python requests适合需解析或登录态的场景。

用浏览器右键“查看页面源代码”保存,适合静态页但拿不到 JS 渲染后的内容
直接右键 → “查看页面源代码”(Chrome/Edge 是这个名称,Firefox 叫“查看页面源代码”,Safari 是“显示页面源代码”),打开的是服务器返回的原始 HTML,没执行任何 JavaScript。按 Ctrl+S 保存时注意三点:
- 文件名末尾必须手动加上
.html,比如example.html - “保存类型”选“所有文件”,否则可能被存成
.txt - 编码默认是 UTF-8,不用改;如果页面有中文乱码,说明源站声明了别的编码(比如 GBK),这时得用编辑器重开并转码
这个方法快,但对 React/Vue/Angular 等 SPA 页面基本无效——你保存下来的只是 <div id="root"></div> 这种空壳。
用开发者工具 Elements 面板复制 outerHTML,能拿到 JS 渲染后的完整 DOM
按下 F12 打开开发者工具,切到 Elements 面板,找到最顶层的 标签,右键 → “Copy outerHTML”(Chrome/Edge)或 “Copy” → “Copy outerHTML”(Firefox)。粘贴进记事本或 VS Code 后,另存为 .html 文件即可。
- 务必选
标签本身,不是或某个子节点,否则会缺里的样式和脚本 - 复制后检查开头是不是
,如果不是,说明没复制全 - 有些网站会动态注入
data-属性或内联样式,这些只在outerHTML里存在,源代码里没有
用 curl 或 wget 命令行下载,适合批量或定时抓取
命令行方式绕过浏览器,直接发 HTTP 请求,适合写脚本自动化。但要注意:它只能拿到原始响应,和右键“查看源代码”效果一致,不执行 JS。
-
curl -o page.html https://example.com—— 最简用法,保存为page.html -
wget --convert-links --no-parent https://example.com—— 加参数可下载整站资源,但仅限静态结构 - 遇到反爬时,
curl需加-H "User-Agent: Mozilla/5.0..."模拟浏览器,否则可能返回 403 或验证码页 - HTTPS 网站若证书异常,
curl会报错,加-k跳过校验(仅测试用,生产环境别这么干)
用 Python 的 requests + BeautifulSoup 保存,适合后续要解析的场景
如果你不只是想存个文件,还要提取标题、链接或做内容分析,用 Python 更可控。核心是先用 requests.get() 拿响应体,再用 response.text 写入文件。
- 记得设
response.encoding = 'utf-8'或用response.content.decode('utf-8'),避免中文写乱码 - 如果目标页依赖登录态,得先用
requests.Session()保持 cookie,否则保存下来是跳登录页的 HTML - 动态内容仍需换方案:改用
selenium启动浏览器实例,等document.readyState == 'complete'再取driver.page_source - 文件路径用
os.path.join()拼接,别手写"./output/page.html",Windows 和 macOS 路径分隔符不同
真正容易被忽略的是:网页是否用了 CSP(Content Security Policy)限制外链资源加载,或者通过 fetch() 异步拉取数据——这种情况下,哪怕你拿到了完整的 outerHTML,里面的关键内容字段也可能是空的,得去 Network 面板找真实 API 接口。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











