如何让Chrome DevTools在元素检查时聚焦iframe内指定元素

• 核心思路：通过Chrome扩展结合chrome.debugger API实现，前提是用户已手动打开DevTools（无法自动启动DevTools的限制无法突破）
• 具体实现步骤：

1. 编写扩展配置文件manifest.json

{
  "manifest_version": 3,
  "name": "DevTools元素选中工具",
  "version": "1.0",
  "permissions": ["debugger", "activeTab", "webNavigation"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

2. 编写内容脚本content.js，捕获iframe内h1的点击事件并通知后台

// 等待页面iframe加载完成
document.querySelector('iframe').addEventListener('load', async () => {
  // 获取当前激活标签页信息
  const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
  // 获取目标iframe的frameId（匹配srcdoc生成的about:srcdoc页面）
  const frames = await chrome.webNavigation.getAllFrames({tabId: tab.id});
  const targetFrame = frames.find(frame => frame.url === "about:srcdoc");
  if (!targetFrame) return;

  // 监听iframe内h1的点击事件
  const iframeDoc = document.querySelector('iframe').contentDocument;
  iframeDoc.querySelector('h1').addEventListener('click', () => {
    chrome.runtime.sendMessage({
      action: "selectElement",
      tabId: tab.id,
      selector: "h1",
      frameId: targetFrame.frameId
    });
  });
});

3. 编写后台脚本background.js，通过调试器API执行元素选中命令

chrome.runtime.onMessage.addListener(async (message) => {
  if (message.action !== "selectElement") return;
  const {tabId, selector, frameId} = message;

  try {
    // 附加到目标标签页的调试器
    await chrome.debugger.attach({tabId}, "1.3");
    // 启用DOM调试域
    await chrome.debugger.sendCommand({tabId}, "DOM.enable");
    // 在指定iframe中查询目标元素
    const queryRes = await chrome.debugger.sendCommand({tabId}, "DOM.querySelector", {
      nodeId: 0,
      selector,
      frameId
    });
    // 让DevTools选中该元素
    await chrome.debugger.sendCommand({tabId}, "DOM.selectNode", {nodeId: queryRes.nodeId});
  } catch (err) {
    // 调试器未打开时触发，提示用户
    console.error("请先打开Chrome DevTools再进行操作");
  }
});

• 注意事项：
  • 扩展需要用户手动安装并授权权限
  • 仅当DevTools已打开时，点击h1才会触发选中操作；若未打开，会在控制台提示用户打开DevTools
  • 若页面存在多个iframe，需调整content.js中的frame匹配逻辑，确保定位到目标iframe

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