VSCode 中的时间旅行调试需借助 Replay 扩展和 Replay Browser 实现前端录制回溯，或通过 node-ttd 在 Node.js 环境中实验性支持；须配置 source map 以调试原始代码，并设置对应 launch.json。
如果您在使用 VSCode 进行 JavaScript 或 TypeScript 开发时希望回溯代码执行过程、逐帧查看变量状态变化，则可能需要启用并配置时间旅行调试功能。以下是解析该功能的多个关键方面：
本文运行环境：MacBook Air，macOS Sequoia。
一、确认调试器支持与扩展安装
VSCode 原生不直接提供时间旅行调试能力，需依赖兼容的调试适配器和运行时支持。当前仅部分环境（如基于 Replay 的浏览器调试）可实现完整时间旅行能力。
1、打开 VSCode 扩展市场，搜索并安装 Replay for VS Code 官方扩展。
2、确保系统已安装 Replay Browser 桌面应用，并完成首次启动与账户登录。
3、在 VSCode 中按 Cmd+Shift+P，输入 “Replay: Start Recording”，验证是否出现可选命令。
二、使用 Replay 录制并加载会话
该方法通过录制真实浏览器交互行为生成可逆向执行的调试会话，是目前 VSCode 中最接近“时间旅行”定义的实现路径。
1、在 VSCode 中打开目标前端项目文件夹，确保已配置有效的 launch.json 调试配置。
2、点击左侧活动栏的“运行和调试”图标，选择 Replay: Launch and Record 配置并启动。
3、在自动打开的 Replay Browser 中执行操作（如点击按钮、触发 API 请求），完成后关闭标签页。
4、VSCode 将自动生成一个以时间戳命名的 .rrweb 文件，并在调试视图中加载该会话。
三、在调试界面中进行时间轴导航
加载 Replay 会话后，VSCode 将呈现可视化时间轴控件，允许用户暂停、倒放、跳转至任意执行时刻，并同步查看对应堆栈与变量值。
1、在调试面板顶部找到 Timeline 区域，拖动滑块定位到目标时间点。
2、点击 Step Backward 按钮（向左箭头图标）逐帧回退执行状态。
3、在“变量”窗格中观察当前帧下所有作用域内变量的快照值，包括闭包变量与 DOM 属性。
4、右键点击某一行源码，在上下文菜单中选择 Set Time Travel Breakpoint，可在回放过程中自动中断。
四、配置 source map 以支持原始代码调试
当项目使用构建工具（如 Vite、Webpack）编译时，必须正确映射压缩/转换后的代码到源文件，否则时间旅行将仅显示打包后产物，无法定位原始逻辑。
1、在项目根目录的 vite.config.ts 或 webpack.config.js 中启用 devtool: 'source-map'。
2、确保构建输出目录中存在与 JS 文件同名的 .js.map 文件，并被 Replay 扩展识别。
3、重启 Replay 录制流程，检查调试器是否在时间轴中显示原始 TS/JS 文件路径而非 bundle.js。
五、启用 Node.js 环境下的实验性时间旅行支持
Node.js 官方尚未提供稳定的时间旅行调试接口，但可通过第三方运行时（如 node-ttd）配合 VSCode 实现有限回溯能力，适用于纯服务端逻辑分析。
1、在终端执行 npm install -g node-ttd 安装时间旅行调试运行时。
2、修改 VSCode 的 launch.json，将 runtimeExecutable 设为 node-ttd 路径。
3、添加配置项 "request": "attach" 与 "timeTravel": true。
4、启动调试后，在 REPL 控制台中输入 .back 命令执行单步回退，或使用 .rewind 100 回滚至前 100ms 状态。
