VSCode调试JavaScript遇连接失败及断点无效问题求助

问题描述 #

我按照VSCode官网的JavaScript调试配置步骤操作，但文档信息缺失较多，遇到以下问题：

• 复制官网的launch.json配置时，出现错误：VSCode and Javascript: cannot connect to the target at localhost:9222；使用自定义launch.json时，断点全部变为白圈无法触发。
• 疑问一：官网配置中URL指向"http://localhost:8080"，VSCode会自动启动服务器吗？是否需要安装扩展？我的配置指向XAMPP服务器的"http://localhost/test/index.html"。
• 疑问二：Edge浏览器似乎未开启调试模式，如何在VSCode中添加启动命令edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile？能否在launch.json中指定Edge可执行文件路径？
• 疑问三：尝试在launch.json中添加"runtimeExecutable" : "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile"并将request改为launch，却出现错误：unable to launch browser, available auto-discovered versions are ["stable"]，如何正确输入路径及参数？

附涉事配置与代码 #

自定义launch.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "Launch Edge Against Localhost",
            "url": "http://localhost/test/index.html",
            "webRoot": "${workspaceFolder}"
            }
        }
    ]
}

官网提供的launch.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "attach",
            "name": "Attach to browser",
            "port": 9222,
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

index.html代码：

<head>
    <title>Read Text File</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div id="myDynamicTable"></div>
    <script>
         window.onload = () => {
              document.write("TEST:");
         }
    </script>  
</body>

解决方案 #

一、错误及断点问题修复 #

1. 连接错误cannot connect to the target at localhost:9222

官网配置用的是attach模式，该模式要求你提前手动启动开启了远程调试端口的Edge浏览器。如果没启动带--remote-debugging-port=9222参数的浏览器，VSCode就无法连接到指定端口，触发该错误。

2. 断点白圈无法触发

白圈表示VSCode无法将断点映射到源码位置，检查以下两点：

• 确认webRoot路径正确：你的webRoot设为${workspaceFolder}，需确保index.html及关联脚本确实在VSCode打开的工作区根目录下。如果index.html在test子文件夹，需将webRoot调整为${workspaceFolder}/test。
• 优先使用外部脚本：内联在index.html中的脚本断点识别率较低，建议把脚本抽成单独的.js文件，再通过<script src="xxx.js"></script>引入页面。

二、疑问解答 #

疑问一：VSCode会自动启动服务器吗？

VSCode本身不会自动启动Web服务器，官网配置里的http://localhost:8080是假设你已自行启动了对应端口的服务器（比如http-server、live-server工具）。你用XAMPP的服务器路径http://localhost/test/index.html是有效的，只要XAMPP处于运行状态且该URL能正常访问即可。

若需要VSCode协助启动服务器，可安装Live Server扩展，它能快速启动本地服务器并自动打开页面，适配调试需求。

疑问二：如何配置Edge调试模式及指定可执行路径？

无需手动在外部执行Edge调试命令，VSCode的msedge调试类型可自动配置调试参数。如需指定Edge可执行文件路径，不要将参数与路径混写，需用runtimeArgs单独配置参数。

疑问三：正确配置runtimeExecutable和参数的方式

你错误地将命令参数与可执行路径写在一起，导致VSCode无法识别浏览器版本。正确写法如下：

• runtimeExecutable仅填写Edge可执行文件的绝对路径
• 调试参数放入runtimeArgs数组中

修改后的launch.json（launch模式）：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "Launch Edge with Debug",
            "url": "http://localhost/test/index.html",
            "webRoot": "${workspaceFolder}",
            "runtimeExecutable": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe",
            "runtimeArgs": [
                "--remote-debugging-port=9222",
                "--user-data-dir=remote-debug-profile"
            ]
        }
    ]
}

注意：若你的Edge是64位版本，路径可能为C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe，请根据实际安装路径调整。

另外，使用launch模式时，VSCode会自动启动带调试参数的浏览器，无需手动提前启动；若用attach模式，则需先手动启动带--remote-debugging-port=9222参数的Edge，再让VSCode连接。

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