你有没有试过在浏览器开发者工具的 Console 里输入 document.，刚敲完点号，后面一串 getElementById、querySelector、body 就自己跳出来了？这不是魔法，是调试器的自动补全在干活。
它到底在补啥？
调试器自动补全，说白了就是当你在控制台、断点调试面板或源码编辑区输入一部分内容（比如对象名+点号，或者函数名前几个字母），工具主动猜你要写什么，并实时列出可选成员。它不是瞎猜——背后读的是当前执行上下文里的变量、作用域链、DOM 结构、甚至已加载的 JS 模块定义。
常见场景，真香时刻
比如你在调试一个网页表单提交逻辑：
const form = document.querySelector('#login-form');
form.addEventListener('submit', function(e) {
e.<span class="cursor"></span>
});光标停在 e. 后面，还没按点号，Chrome DevTools 就已经把 preventDefault、stopPropagation、target 全列好了。手一动，回车就补全，不用翻 MDN，也不用靠记忆硬背。
再比如调试 Vue 或 React 组件时，在断点暂停状态下输入 this.state. 或 props.，补全项会动态反映当前组件的真实数据结构，连你自己刚加的字段都能立刻出现。
不是所有调试器都一样
Chrome 和 Edge 的 DevTools 补全最成熟，支持 DOM、BOM、ES6+ 原生对象、甚至部分 TypeScript 类型推导；Firefox 开发者工具也支持，但对自定义对象属性的响应稍慢半拍；Safari 的 Web Inspector 补全能力偏保守，尤其在复杂闭包或异步上下文中容易“卡壳”。
顺带一嘴：Node.js 自带的 node --inspect 搭配 Chrome 调试时，补全也能跨进程生效——你在服务端代码里输入 req.，HTTP 请求对象的方法和属性照样弹出来。
怎么让它更准一点？
补全不是万能的。如果你写了 let data; 没赋值，然后输 data.，基本啥都不出——因为 JS 引擎真不知道它将来是数组还是对象。但加一句 data = { user: 'tom', id: 123 };，再敲 data.，user 和 id 就稳稳出现了。变量越早有明确类型或结构，补全就越靠谱。
另外，现代编辑器（如 VS Code）连上调试器后，还能把源码里的 JSDoc 注释当补全提示来源。写个 /** @type {User} */ let u;，后面 u. 就能按 User 接口补全，这招在团队协作时特别管用。
调试器自动补全不是炫技功能，它是把“查文档”“想名字”“防拼错”这些琐事悄悄扛走，让你专注逻辑本身。下次卡在 console.log 前，别急着翻 API，先敲个点，看看它想告诉你什么。