如何在 Chrome 开发者工具中导出 DOM 祖先列表？答案

【问题标题】：How can I export a DOM ancestor list in Chrome developer tools?如何在 Chrome 开发者工具中导出 DOM 祖先列表？
【发布时间】：2021-02-18 08:37:53
【问题描述】：

我正在尝试确定一个元素是否位于多个（嵌套）iframe 中。如果我检查一个元素，我会在检查器窗格的底部看到各种面包屑：

有时这个祖先列表很长，很难通过滚动来分析结构。如何导出或以其他方式获取此列表？

【问题讨论】：

标签： google-chrome dom google-chrome-devtools

【解决方案1】：

一种解决方法是使用 devtools-on-devtools 从 devtools UI 获取该数据：

切换到Elements 面板

打开 devtools-on-devtools（见下文）并在控制台中运行：console.log($$('devtools-node-text', UI.panels.elements._breadcrumbs.shadowRoot).map(el => $$('span', el.shadowRoot).map(el => el.innerText).join('')).join('\n'))

它会像这样打印文本：

html.html__responsive.html__unpinned-leftnav body.question-page.unified-theme div.container div#content.sn-p-隐藏

实际数据存储在UI.panels.elements._breadcrumbs及其各种属性中。

作为一个幻想它的例子：

(() => {
  let num = 0;
  const args = [];
  const root = UI.panels.elements._breadcrumbs.shadowRoot;
  $$('devtools-node-text', root).forEach(bc => {
    num++;
    let info = '';
    $$('span', bc.shadowRoot).map(({innerText: s}, i) => {
      if (!i) {
        args.push(`font-weight:bold;${s === 'iframe' ? 'color:red;' : ''}`, s,
          'font-weight:normal');
      } else {
        info += s;
      }
    });
    args.push(info);
  });
  console.log('%c%s%c%s\n'.repeat(num), ...args);
})();

为方便起见，您可以将代码保存在 snippets 中并稍后从那里运行它，或者在命令面板中输入 sn-p 名称（Ctrl-P 或 Cmd-P 热键）。

如何打开 devtools-on-devtools：

首先打开 devtools 并将其在菜单中的Dock side 切换到分离（浮动）窗口
在现在分离的开发工具中按 CtrlShifti 或 ⌘⌥ i 在 MacOS 上，
这将在新窗口中打开 devtools-on-devtools

【讨论】：