Edge控制台中querySelector输出两种结果的原因及固定输出方法

你遇到的问题是因为Edge控制台默认会根据元素的实时状态，有时显示元素的实时引用（呈现压缩形式），有时显示DOM快照（展开的完整结构）。要始终得到指定的DOM结构形式，有两种可靠方法：

方法1：打印元素的静态克隆节点 #

克隆节点会生成一个独立的静态DOM副本，控制台会直接显示其完整结构，不会随原元素变化或控制台状态改变：

const test = document.querySelector("#test");
console.log(test.cloneNode(true));

cloneNode(true)表示克隆包括子节点在内的整个元素，若只需克隆当前节点本身，可传false。

方法2：打印元素的HTML字符串 #

如果不需要可视化的DOM结构，直接打印元素的HTML代码也是固定的输出形式：

const test = document.querySelector("#test");
console.log(test.outerHTML);

控制台设置调整（辅助优化） #

打开Edge控制台的设置（右上角齿轮图标），在「Console」选项中：

• 关闭「Preserve log」：避免刷新后保留旧日志导致的状态混淆
• 确保「Enable custom formatters」处于关闭状态：防止自定义格式化工具干扰元素的默认显示

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