将文档片段插入 dom 时，Chrome 浏览器会向控制台输出空文档片段，而 Firefox 在插入前输出非空片段，在插入后输出空片段。 如果片段没有插入到 dom 中，那么 Chrome 也会将非空片段输出到控制台。 我正在运行最新的稳定版本（Chrome 126 和 Firefox 128）
const init = function() {
let fn0 = function() {
let fragment = document.querySelector('template').content.cloneNode(true);
console.log('before insertion: ', fragment); // empty in Chrome but not in Firefox
document.querySelector('ul').append(fragment);
console.log('after insertion: ', fragment);
};
let fn1 = function() {
let fragment = document.querySelector('template').content.cloneNode(true);
console.log('no insertion: ', fragment); // non-empty in both
};
let buttons = document.getElementsByTagName('button');
buttons[0].addEventListener('click', fn0);
buttons[1].addEventListener('click', fn1);
};
window.addEventListener('load', init);.container {
width: 200px;
height: 200px;
display: flex;
flex-direction: column;
font-family: sans-serif;
}
.bar {
flex-basis: max-content;
display: flex;
padding: 6px;
gap: 6px;
}
.list {
overflow: auto;
border: 1px solid;
}
button {
text-align: left;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template test</title>
</head>
<body>
<div class="container">
<div class="bar">
<button type="button">log document fragment before insertion, then insert the fragment and log the fragment after insertion</button>
<button type="button">log document fragment without inserting</button>
</div>
<div class="list">
<ul>
<template>
<li>list item</li>
</template>
</ul>
</div>
</div>
</body>
</html>这里有两点。首先，控制台是异步的，因此您无法真正知道您的值何时会在控制台中实际呈现。其次，chrome 实际上会向您显示对象的当前状态，而不是您记录它时的状态。考虑这段代码：
const obj = {a: 1};
console.log(obj);
obj.b = 2;
delete obj.a;
如果您尝试在 chrome 中登录它，您会看到它具有您期望的形状 (
{a: 1}这非常令人困惑，但是当您想要跟踪对象在其生命周期中如何变化时，特别是与断点（在浏览器中设置或使用
debugger