如何在MacOSX10.9的VSCode 2019企业版中调试JavaScript函数？

我来帮你搞定这个调试难题，核心原因很简单：Chrome直接打开单独的.js文件时，会把它当作纯文本渲染展示，不会执行里面的代码，自然也就触发不了断点。得通过HTML页面作为入口来加载并执行你的JS代码，具体步骤如下：

步骤1：创建HTML入口文件 #

在你的工作目录下新建一个index.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Debug Countup Function</title>
</head>
<body>
    <!-- 引入你的Test.js文件 -->
    <script src="Test.js"></script>
</body>
</html>

步骤2：修改launch.json配置 #

把原来的配置改成加载这个HTML文件，而不是直接加载JS文件。更新后的launch.json：

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

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

• 打开Test.js，在你想要暂停的代码行（比如const countArray = countup(n - 1);或者countArray.push(n);）左侧的空白处点击，添加一个红色的断点标记。
• 点击VSCode左侧的调试图标（或按Ctrl+Shift+D），选择刚才配置的Launch Chrome for Debug，然后点击绿色的启动按钮。

此时Chrome会打开并加载index.html，自动执行Test.js里的代码，当运行到断点处时就会暂停，你可以查看变量值、调用栈，一步步调试你的递归函数了。

如果你想用本地服务器调试（可选） #

如果之前尝试本地服务器没成功，可能是配置不对。比如用http-server（需要先安装Node.js）：

1. 在终端进入工作目录，运行npx http-server启动本地服务器，默认地址是http://localhost:8080。
2. 修改launch.json为：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome with Local Server",
            "url": "http://localhost:8080/index.html",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

3. 同样设置断点后启动调试即可。

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