在浏览器开发者工具中单步执行并跳入函数内部需使用“步入”（f11）功能：先设断点并触发暂停，再对函数调用行按f11进入其第一行；注意原生方法、压缩代码或缺失source map时可能失效，需开启source map以调试原始源码。
在浏览器开发者工具中单步执行并跳入函数内部，关键在于使用“步入”（Step Into）功能，而不是“跳过”（Step Over）或“跳出”（Step Out）。
确认已设置断点并触发暂停
先在目标代码行左侧点击行号旁空白处，设置一个断点（红色圆点）。刷新页面或触发对应逻辑，让执行停在该断点处。此时调试器已就绪，可以开始单步操作。
用“步入”（F11 或 Step Into 按钮）进入函数调用
当光标停在某一行包含函数调用的语句上（例如 calculateTotal() 或 user.getName()），按下 F11（Windows/Linux）或 Cmd+'（Mac），或点击调试面板中的“步入”图标（通常是一个向下箭头进入方块的图标）。调试器会进入该函数的第一行可执行代码，而非直接执行完它。
- 如果函数是原生方法（如
Array.prototype.map）、压缩代码、或无源码映射（source map），则“步入”可能跳过，自动转为“跳过” - 确保开启了 source map（尤其用 Webpack/Vite 等构建的项目），否则无法看到原始 TS/JS 源码，步入后可能显示压缩后的代码
区分“步入”、“跳过”和“跳出”
避免误用其他单步命令：
- 步入（Step Into，F11）：进入当前行调用的函数内部——这是你想要的操作
- 跳过（Step Over，F10）：执行完整个函数，但不进入，直接停在下一行
- 跳出（Step Out，Shift+F11）：快速执行完当前函数剩余部分，返回到调用它的上一层
辅助技巧提升调试效率
单步过程中，配合变量监视更易定位问题：
- 在“Scope”面板实时查看当前作用域的变量值
- 右键变量 → “Add to Watch”，持续跟踪复杂表达式（如
items.filter(x => x.active).length） - 遇到异步代码（
async/await），注意“步入”对await的行为：它会等待 Promise settle 后，停在await下一行，不是直接跳进 Promise 内部；如需调试 Promise 执行体，需在回调或.then()内部设断点
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
