边缘组装的html是服务端拼接的原始响应体，需通过network面板查看原始response或curl直取，而非elements面板、outerhtml等客户端dom结果。
边缘计算节点上组装出来的 HTML，不是浏览器最终渲染的 DOM 树，也不是你本地编辑器里写的源码——它是服务端（边缘运行时）拼出来的那一版字节流，且不经过客户端 JS 二次修改。要拿到它，必须绕过浏览器、跳过 DOM API、直取边缘函数输出的原始响应体。
用 fetch() 在浏览器中请求边缘 URL 并禁用 JS 执行
很多人误以为打开 DevTools 的 Elements 面板看到的就是“真实 HTML”，其实那已经是经过 document.write()、innerHTML、React hydration 等多次篡改后的结果。真正代表边缘组装结果的，是 Network 面板里原始 response 的纯文本内容。
- 在浏览器地址栏直接访问目标 URL（如
https://example.com/），确保没带任何影响缓存的查询参数 - F12 打开 DevTools → Network → 刷新页面 → 找到主文档请求（通常 type 是
document） - 右键 → “Open in new tab” 或点击 Headers → Response → 查看原始响应体（不是 Preview）
- 关键点：不要点 Elements 面板，不要执行任何脚本；如果页面依赖
fetch()补全内容，此时还没发生
在 Cloudflare Workers 中用 HTMLRewriter 提前捕获结构
HTMLRewriter 不是解析器，它是在流式响应过程中做标签级重写，但它能帮你“看见”边缘组装完成那一刻的 HTML 结构——只要你不把它用于修改，而是用 onElement 把节点路径和属性打出来。
- 在
event.respondWith()前加一层new HTMLRewriter().on('*', { element: el => console.log(el.tagName, el.getAttribute('id')) }) - 注意：它只处理已写出的 HTML 片段，对
document.write()或异步插入的内容无效 - 日志里出现的标签顺序，就是边缘函数实际输出的顺序，可据此反推模板拼接逻辑是否出错
- 不支持自定义元素或 Shadow DOM，遇到
<my-component></my-component>会当普通标签处理
curl + -H 'User-Agent: edge-test' 绕过客户端干扰
某些边缘逻辑会根据 User-Agent、X-Device-Type 等头字段动态注入区块。用浏览器请求时，这些头可能被自动带上或覆盖；而 curl 可以精确控制，避免 JS 注入、cookie 污染、Service Worker 缓存等干扰。
- 命令示例：
curl -H "X-Geo-Region: US" -H "X-Device-Type: mobile" https://example.com/ -o raw.html - 对比不同头组合下的输出差异，能快速定位哪些区块由哪个上下文变量触发
- 若响应含
Set-Cookie，说明该响应被判定为不可缓存，需检查边缘函数是否意外写了 cookie - 别用
curl -I，它只拿 header，看不到 body；也别加--compressed，gzip 解压可能破坏原始字节流结构
警惕 document.documentElement.outerHTML 这类伪“真实”获取方式
在浏览器控制台执行 document.documentElement.outerHTML 看起来很直接，但它返回的是当前 DOM 树的快照，已混入所有客户端 JS 修改、CSSOM 影响、甚至 Web Component 升级后的状态。这不是边缘组装结果，而是“最终渲染态”的混合产物。
- 比如边缘注入了
<div data-replace="header"></div>，随后 JS 执行querySelector('[data-replace="header"]').innerHTML = 'Hello'—— 此时 outerHTML 里是Hello，但边缘输出的原始 HTML 里只有空 div - 同理，
innerHTML会把<script></script>标签内容转义成文本，丢失执行上下文，造成结构误判 - 真正需要比对的，是 curl 获取的原始响应与本地模板文件（如
index.html.ts）之间的 diff，而不是跟浏览器 DOM 做 diff
边缘组装的 HTML 结构，本质是一次性、无状态、不可逆的字符串拼接结果。它没有 DOM 生命周期，不响应事件，也不维护引用关系。一旦你开始用 querySelector 或 appendChild 去分析它，就已经脱离了边缘语境——那个时刻，你面对的已是浏览器的世界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
