如何查看JavaScript函数的执行代码行？无需插入额外代码的方法

VS Code 内置调试工具 #

• 基础断点调试：打开目标JS文件，点击左侧调试图标（虫子图标），创建launch.json配置文件（前端场景选Chrome）。在函数的关键分支行号左侧点击添加断点，启动调试后触发表单提交，就能通过调试工具栏的"步过"（F10）、"步入"（F11）按钮逐行跟踪执行路径，同时能实时查看变量值变化。
• 条件断点：针对特定输入才会触发的分支，右键断点选择"编辑条件"，输入判断逻辑（比如formData.isAgree === true），只有满足条件时断点才会触发，避免无效暂停。
• 日志点：不想打断程序运行的话，右键行号选择"添加日志点"，输入要输出的日志内容（比如执行分支A，当前数值: ${formData.number}），调试时日志会直接输出到控制台，完全不需要手动插入console.log。

浏览器开发者工具 #

• 单步调试：按下F12打开DevTools，切换到Sources面板，找到你的JS函数代码，添加断点后触发表单操作，通过F10（步过）、F11（步入）控制执行流程，直观看到每一行代码是否被执行。
• 覆盖率分析：在Chrome DevTools的"更多工具"中打开Coverage面板，点击"开始录制"后触发函数执行，录制结束后会高亮显示已执行的代码行（绿色）和未执行的代码行（红色），能快速确认所有分支的执行情况。

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