微软VSCode JS调试器优化：延迟加载eval代码提升调试体验

在JavaScript开发过程中，eval()和Function构造函数是动态执行代码的常见方式，但它们会给调试带来挑战。微软VSCode的js-debug调试器近期实现了一项重要优化，通过延迟加载eval代码来提升调试体验。

问题背景

当开发者使用eval()或new Function()动态生成代码时，传统调试器会立即将这些代码作为"Loaded Sources"显示。这在某些场景下（如Blazor框架）会导致调试界面出现大量暂时不需要的eval代码，影响调试效率。

技术实现

js-debug调试器现在采用了一种智能的延迟加载策略：

1. 首次引用原则：eval代码不会立即出现在"Loaded Sources"视图中
2. 按需加载：只有当代码首次被实际调用或引用时，才会在调试界面显示
3. 保持功能完整：所有调试功能（如断点、单步执行）在代码加载后完全可用

验证方法

开发者可以通过以下测试用例验证这一功能：

const logAdd = new Function('a', 'b', 'console.log(a + b);');
const returnAdd = new Function('a', 'b', 'a + b');
eval('1234');

debugger;
logAdd(2, 3);

debugger;
returnAdd(4, 5);

预期行为：

1. 首次暂停时，"Loaded Sources"不应显示eval代码
2. 执行logAdd后，应出现第一个eval代码且控制台输出有正确源映射
3. 单步进入returnAdd后，应出现第二个eval代码

技术优势

这项优化带来了多方面好处：

• 界面简洁：避免eval代码过早污染调试界面
• 性能提升：减少不必要的资源加载和传输
• 调试专注：开发者只看到当前相关的代码
• 兼容性保证：不影响原有调试功能的使用

实现原理

调试器内部通过监听代码执行事件来实现这一功能。当检测到eval代码首次被执行时，才会向客户端发送相关源信息。这种设计既保持了DAP协议的兼容性，又优化了用户体验。