google-chrome - 如何在 Chrome 开发者工具中导出 DOM 祖先列表？

Question

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

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

标签： google-chromedomgoogle-chrome-devtools

Answer 1

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

1. 切换到Elements面板

2. 打开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.snippet-hidden

   实际数据存储在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);
   })();
   

   

---

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

如何打开 devtools-on-devtools：

1. 首先打开 devtools 并Dock side在菜单中将其切换到分离（浮动）窗口

   

2. 在现在分离的 devtools 按CtrlShifti或⌘</kbd>⌥</kbd>i on MacOS,
   which will open devtools-on-devtools in a new window