HTML注释无法直接输出变量值，但可通过document.createComment()动态创建含运行时变量的注释节点并插入DOM，实现“可执行注释”；推荐仅开发时启用，并优先使用console.log等调试工具。
HTML 注释里不能直接输出变量值，但可以配合 JS 调试
HTML 注释 <!-- ... --> 是纯静态文本，浏览器解析时直接忽略，不会执行任何 JS 代码，也无法插入运行时变量。所以想用注释“输出” user.name 或 data.length，光靠 HTML 注释本身做不到。
但开发中确实有这类需求：快速查看某个变量在 DOM 某个位置附近的值，又不想频繁切到控制台。可行思路是——用 JS 动态写入注释节点，并把它插进 HTML 结构里，这样既保留在 DOM 中可见，又支持运行时求值。
用 document.createComment + insertBefore 实现“可执行注释”
核心是绕过 HTML 源码注释，改用 JS 创建并插入注释节点。它和普通注释一样不渲染、不占布局，但内容可动态生成。
-
document.createComment()创建注释节点，参数是字符串（可拼接变量） - 用
insertBefore()或appendChild()插入到目标元素前后 - 调试完后删掉对应 JS 行即可，不影响生产环境
const user = { name: 'Alice', id: 1024 };
const debugComment = document.createComment(`DEBUG: user.name = "${user.name}", id = ${user.id}`);
document.body.insertBefore(debugComment, document.body.firstChild);执行后，在 Elements 面板中能看到类似这样的节点：<!-- DEBUG: user.name = "Alice", id = 1024 -->，位置就在 <body> 开头。
立即学习“前端免费学习笔记（深入）”；
避免污染生产代码的轻量封装
直接写 createComment 太啰嗦，容易忘记清理。建议封装一个仅开发时启用的函数，配合环境判断或开关：
- 检查
location.hostname是否为localhost或127.0.0.1 - 或加个全局开关如
window.DEBUG_COMMENTS = true - 函数名建议带
debug前缀，比如debugComment()，避免误用
function debugComment(text) {
if (!location.hostname.includes('localhost') && !/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(location.hostname)) return;
const comment = document.createComment('[DEBUG] ' + text);
document.body.appendChild(comment);
}
// 使用
debugComment(`cart.items.length = ${cart?.items?.length || 0}`);比注释更推荐的替代方案：console.log + DOM 元素引用
真要查变量，console.log() 配合 $0（控制台当前选中元素）或 console.dir() 更直接高效。例如：
- 在 Elements 面板右键某个
<div class="card">→ “Break on” → “attribute modifications”，再console.log($0.dataset) - 把变量挂到临时属性上：
el.setAttribute('data-debug-user', JSON.stringify(user))，再在 Elements 里看 - 用
console.table()查数组或对象结构，比注释更结构化
注释节点适合需要“固定位置标记”的场景（比如模板循环里每个 item 旁标 ID），但多数时候，console 的交互性、可点击性、过滤能力更强——别为了“看起来像 HTML”而放弃真正好用的工具。
