如何在Chromium控制台始终以HTML格式打印DOM元素？

一、脚本层面方案 #

1. 分批打印避免触发批量优化 #

Chrome在批量打印大量DOM元素时会自动切换为对象视图以优化性能，你可以将打印操作拆分为小批次，每次打印数量控制在阈值（约100个）以内，避免触发优化：

// 示例：分批打印所有目标元素
const targetElements = [...document.querySelectorAll('.your-selector')];
const batchSize = 90; // 控制在阈值以下
let currentIndex = 0;

function printNextBatch() {
  const batch = targetElements.slice(currentIndex, currentIndex + batchSize);
  batch.forEach(el => console.log(el));
  currentIndex += batchSize;
  if (currentIndex < targetElements.length) {
    setTimeout(printNextBatch, 50); // 短暂间隔避免批量检测
  }
}

printNextBatch();

2. 自定义控制台格式化器强制渲染DOM节点 #

通过Chrome的自定义格式化器API，强制将所有HTMLElement以DOM节点格式显示：

1. 打开Chrome控制台，点击右上角齿轮图标进入设置，开启「Enable custom formatters」选项
2. 在你的脚本中添加以下代码：

window.devtoolsFormatters = [{
  // 定义元素的头部显示（模拟原生DOM节点样式）
  header: function(obj) {
    if (obj instanceof HTMLElement) {
      return ['div', {}, obj.outerHTML];
    }
    return null; // 非HTMLElement使用默认格式化
  },
  // 标记是否有可展开的内容
  hasBody: function(obj) {
    return obj instanceof HTMLElement && obj.children.length > 0;
  },
  // 定义展开后的子节点内容
  body: function(obj) {
    const childNodes = [...obj.children].map(child => 
      ['div', { style: 'margin-left: 16px;' }, child.outerHTML]
    );
    return ['div', {}, ...childNodes];
  }
}];

这个方法会强制所有HTMLElement以HTML样式显示，且支持展开子树，不过原生的悬停高亮功能依赖Chrome原生处理，自定义格式化器无法完全复刻，但基本满足查看DOM结构的需求。

二、浏览器设置说明 #

目前Chrome/Chromium没有公开的设置项可以调整批量打印DOM元素的阈值，无法直接通过设置强制始终显示DOM节点格式，因此推荐使用上述脚本方案。

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