Cannot connect to the target at localhost:0: Could not connect to debug target at http://localhost:0: Could not find any debuggable target

解决方法：

1）浏览器桌面快捷方式对应图标，右键属性，找到“快捷方式”选项卡->下的目标，在 "C:\Program Files\Google\Chrome\Application\chrome.exe" 后添加 -remote-debugging-port=9222 变更为："C:\Program Files\Google\Chrome\Application\chrome.exe" -remote-debugging-port=9222

2）vscode打开调试窗口，在下图箭头指向的位置点击打开配置文件 launch.json：

选择后会自动添加如下内容：

        {
            "name": "Attach to Chrome",
            "port": 9222,
            "request": "attach",
            "type": "chrome",
            "webRoot": "${workspaceFolder}"
        }

这里的9222对应的就是步骤（1）中在快捷方式中添加的 9222 端口。

3）通过快捷方式启动chrome浏览器，然后在cmd中输入 netstat -ano | findstr 9222 会看到对应9222端口号的进程，如下：

在任务管理器中也可以得到确认，如下：

4）在vscode中启动调试

5）在步骤（3）中启动的浏览器窗口中输入要调试的页面后就可以在vscode中命中相应的断点。开启vscode的调试。通过这种方式可以跟踪webpack中具体的执行细节，和对应于浏览器中无法跟踪的 commonjs 的相应的实现过程 和对应的 变量以及方法的监视。

reference

https://blog.csdn.net/a15110793402/article/details/81605839