如何获取网页完整HTML源代码？JS控制台执行程序实现问询

阿华AIGC实验室

2026-5-13

获取网页完整HTML源代码的浏览器控制台JS方法

嘿，这个需求其实挺常见的，在浏览器控制台里有好几种简单直接的方式能拿到页面的完整HTML源码，我给你梳理几个最实用的：

方法一：直接取<html>元素的完整代码
浏览器里的document.documentElement就是整个页面的<html>根元素，它的outerHTML属性会返回包含元素本身在内的所有HTML内容，正好就是你要的完整源码。
直接在控制台输入这段代码就行：
```
console.log(document.documentElement.outerHTML);
```
要是想直接复制到剪贴板省得手动选，用浏览器内置的copy()方法更方便：
```
copy(document.documentElement.outerHTML);
```
方法二：换个方式选<html>元素
和上面的效果完全一样，只是用querySelector来获取根元素，写法稍微不同而已：
```
console.log(document.querySelector('html').outerHTML);
```
方法三：更标准的序列化方式
如果遇到一些特殊的DOM节点（比如SVG之类的），用XMLSerializer来序列化会更严谨，输出的代码更符合标准：
```
const serializer = new XMLSerializer();
const fullPageHtml = serializer.serializeToString(document);
console.log(fullPageHtml);
// 同样支持一键复制
copy(fullPageHtml);
```

上面前三种方法拿到的是当前页面DOM的实时状态——也就是说如果页面有JS动态修改过内容（比如加载后新增了元素、改了属性），返回的是修改后的代码。如果想要服务器最初返回的原始源码，除了右键选「查看页面源代码」，也可以用fetch重新请求一次页面：

fetch(window.location.href)
  .then(response => response.text())
  .then(rawHtml => {
    console.log(rawHtml);
    copy(rawHtml);
  });

这个方法会绕过当前的DOM，直接拿到服务器发过来的原始HTML文件。

内容的提问来源于stack exchange，提问作者Odog8

火山引擎最新活动

模型自由，工具不限，免费解锁 ArkClaw，7*24 小时在线的专属智能伙伴

分钟级部署，云服务器包月低至￥9.9，与 CodingPlan 组合购买仅需19.8元

注册即享免费500万Tokens，抢先领略新一代AI视频技术跃迁

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠