Chrome调试工具：iframe加载断点设置及相关技术疑问

我想了解iframe如何加载其src属性指定的URL，在Chrome开发者工具的网络面板中，该请求的Type列显示为"document"。参考以下HTML代码：

<!DOCTYPE html>
<html>
<body>

<h1>The iframe element</h1>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3549.400553850174!2d78.03995351513306!3d27.175144783015277!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39747121d702ff6d%3A0xdd2ae4803f767dde!2sTaj%20Mahal!5e0!3m2!1sen!2sin!4v1660205543740!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

</body>
</html>

我注意到使用fetch API时请求类型显示为fetch，使用XMLHttpRequest()时显示为xhr，因此有以下疑问：

1. iframe对应的"document"类型代表什么含义？
2. iframe使用哪个原生JS方法加载其src属性中的URL？
3. 由于无法使用xhr断点，如何在Chrome开发者工具中为iframe的src URL加载前设置断点？

1. "document"类型的含义 #

这个类型表示该请求是浏览器发起的完整HTML文档加载请求，用于获取iframe要嵌入的整个页面资源。它属于浏览器的顶级文档加载流程，区别于fetch/xhr这类由脚本发起的异步数据请求，是浏览器为渲染内嵌文档而触发的原生加载行为。

2. iframe加载src的原生机制 #

iframe加载src的行为是浏览器的原生内置流程，不需要手动调用特定的JS API：

• 如果是静态设置src属性，页面解析到iframe标签时，浏览器自动触发加载；
• 如果是动态修改src，直接给iframe元素的src属性赋值（比如document.querySelector('iframe').src = 'xxx'），或者修改iframe内部的contentWindow.location.href，浏览器会自动发起加载请求。本质上这是浏览器的内部渲染机制，并非调用类似fetch/XMLHttpRequest的公开API。

3. 在Chrome DevTools中设置iframe加载前断点 #

可以通过两种方式实现：

方式一：DOM属性修改断点 #

1. 打开Chrome DevTools的「Elements」面板，找到目标iframe元素；
2. 右键点击该元素，选择「Break on」→「Attribute modifications」；
3. 当iframe的src属性被设置或修改时，DevTools会暂停执行，此时请求还未发起，刚好满足加载前断点的需求。

方式二：URL匹配断点 #

1. 打开「Sources」面板，在左侧的「XHR/fetch Breakpoints」区域点击「+」按钮；
2. 输入目标URL的特征片段（比如域名、路径关键词），即使是document类型的请求，也会在发起前触发断点。

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