如何在Mac OSX 10.9的VSCode中调试JavaScript递归函数？

我懂你现在的困扰——直接配置launch.json指向Test.js文件时，Chrome只会显示代码内容，根本不会执行这个递归函数对吧？这是因为单独的.js文件没法被浏览器直接执行，它需要放在HTML页面的上下文里才行。下面给你一步步解决的方案：

步骤1：创建HTML承载页面 #

新建一个index.html文件，内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>调试递归函数</title>
</head>
<body>
    <script src="./Test.js"></script>
</body>
</html>

这个页面的作用就是让浏览器加载并运行你的Test.js代码。

步骤2：更新launch.json配置 #

把原来的配置修改为指向这个HTML文件，更新后的配置如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome for Debug",
      "file": "${workspaceRoot}/index.html"
    }
  ]
}

核心就是把file字段改成你的HTML文件路径，确保路径和实际文件位置匹配。

步骤3：设置断点并启动调试 #

• 打开Test.js文件，在你想观察的代码行（比如const countArray = countup(n - 1);或者countArray.push(n);）左侧的 gutter 区点击，添加红色断点。
• 按下Cmd+Shift+D打开VSCode调试面板，选择你配置的"Launch Chrome for Debug"，点击绿色启动按钮。
• Chrome会自动打开你的HTML页面，代码会在断点处暂停，你可以用调试工具栏的按钮（继续、单步跳过、单步进入等）一步步跟踪递归的执行过程，实时查看countArray的变化。

额外提示 #

• 确保你已经安装了VSCode的Debugger for Chrome扩展，如果没装，直接去扩展市场搜索安装即可。
• 如果你想用本地服务器的方式调试，也可以：在终端运行python -m SimpleHTTPServer 8000（MacOS 10.9自带Python），然后把launch.json里的file改成http://localhost:8000/index.html，这种方式适合更复杂的项目场景。

这样操作后，你就能正常调试这个递归函数，清晰看到每一步的执行逻辑了。

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