代码工作区文件：

Question

我在launch.json中有默认配置，该站点在端口8080上运行

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

然而，当我点击Debug按钮时，我收到此错误：

无法连接到目标：连接ECONNREFUSED 127.0.0.1:9222

问题1：为什么VSCode在创建此json时分配端口9222

这个端口有什么特别之处，MS决定把它放在这个launch.json中？

问题2：我需要做些什么才能让事情发挥作用。

启动调试始终启动一个新窗口。我问具体关于附加调试选项，以便它将在新标签中打开。

感谢。

Answer 1

您需要安装Debugger for Chrome扩展程序才能生效。在VS Code中打开扩展程序并搜索适用于Chrome的调试程序
您需要在第一个配置中指定的URL上运行Web服务器（默认为http://localhost:8080）。我使用全局安装的serve npm包。从我的app文件夹中运行serve -p 8080
选择针对localhost选项启动Chrome。它将启动浏览器，您可以在代码中设置断点，调试应该有效。

关于第二种配置（附加到Chrome）。这个港口没有什么特别之处。要附加到Chrome，您需要在配置中指定的端口上启用启用远程调试的Chrome。例如chrome.exe --remote-debugging-port=9222。我个人从不使用这个选项。按照上面的三个步骤，你应该没事。

Answer 2

使用配置val mock = spyk(MockCls(), recordPrivateCalls = true) every { mock.property } answers { fieldValue } every { mock getProperty "property" } propertyType Int::class answers { fieldValue + 6 } every { mock setProperty "property" value any<Int>() } propertyType Int::class answers { fieldValue += value } every { mock.property = any() } propertyType Int::class answers { fieldValue = value + 1 } andThen { fieldValue = value - 1 }时，vscode将搜索带有精确URL的选项卡，并在找到后附加到该标签。

使用配置url（该配置可以带有通配符*）将调试器附加到您网址中的任何子路由。

例如urlFilter

要执行的完整步骤：

将lanch.json文件配置为如下所示：
```
"urlFilter": "http://localhost:4200/*"
```
关闭所有打开的Chrome实例（确保使用Windows中的任务管理器将其全部杀死）。
使用以下参数为Chrome提供午餐：--remote-debugging-port = 9222

确保此参数中的端口与在Lunch.json文件中的chrome配置的附件的“ port”属性中配置的端口相同（如上面的示例）
导航到您的网站。在此示例中，http://localhost:4200
在vscode中运行“开始调试”。

Answer 3

在VSCode中使用“附加到Chrome”配置寻求帮助时遇到了这个问题。虽然已接受的答案确实给了我一些提示，但我确实必须做更多的挖掘工作。以下是对我有用的步骤，以防其他人发现它们有用：

在VSCode中安装Chrome扩展调试器
通过您选择的Web服务器为您的文件提供服务
Launch Chrome with remote debugging enabled
在这个新的Chrome窗口中，导航到您的Web服务器托管的网址（例如http://localhost:8080）。

在VSCode中，将如下所示的配置添加到您的launch.json文件中：

"configurations": [
  {
    "type": "chrome",
    "request": "attach",
    "port": 9222,
    "name": "Attach Chrome",
    "url": "http://localhost:8080/",
    "webRoot": "${workspaceFolder}"
  }
]

在下拉菜单中选择“附加到Chrome”选项后，按VSCode中的播放按钮。

配置文件中需要的关键是url字段。该地址必须是托管文件的URL，并且当前需要在刚刚启用了远程调试功能的Chrome窗口中打开该URL。如果您在此字段之外输入其他所有内容，则VSCode将为您显示一条错误消息，指出哪些URL可用。像Cannot connect to runtime process, timeout after 10000 ms - (reason: Can't find a valid target that matches: localhost:8080/. Available pages: ["http://localhost:8080",...

出于完整性考虑，以下是在启用了远程调试（from the Debugger for Chrome README）的情况下启动Chrome的方法：

Windows：

右键单击Chrome快捷方式，然后选择属性
在“目标”字段中，附加--remote-debugging-port=9222
或者在命令提示符下，执行<path to chrome>/chrome.exe --remote-debugging-port=9222

MacOS：

在终端中，执行/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux：

在终端中，启动google-chrome --remote-debugging-port=9222

Answer 4

2020年补充答案...

VS Code具有一个新的调试功能，该调试功能尚不稳定，但目前在Insiders版本中作为默认功能起作用。

它会自动打开一个新的Chrome实例，并附带以下设置的调试信息：

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

与任何附件一样，您可以随时在VS Code打开的新窗口中运行调试。或者，您可以以前将Chrome作为调试模式运行，以避免VS Code像@quicklikerabbit answer https://stackoverflow.com/a/51392142/7050878一样打开新的调试窗口，但这一次不需要URL参数。

Answer 5

进入任务管理器。您可能有Chrome实例挂在那里。只有杀死它们后，您才能运行遥控器并成功启动调试器。为我工作。

Answer 6

不幸的是，我会把两美分放在:)不幸或幸运的是，我遇到了类似的问题，上面的帖子指出了我正确的方向，并且在此过程中我学到了一些东西。请在下面查看我的注释：

1）如果您使用的是Linux，请在启动vsCode之后运行以下Linux命令：

sudo lsof -i -P -n | grep LISTEN

这将使您可以查看正在使用的端口，在我的情况下，您可以看到5500上的代码。

2）假设您有一些测试html / js代码，并且vsCode安装了服务器和调试器，则需要按以下方式配置以下文件：

代码工作区文件：

/*
Workspace settings override user settings.
https://code.visualstudio.com/docs/getstarted/settings
Check to see if needed ports are listening: sudo lsof -i -P -n | grep LISTEN
*/

{
    "folders": [
        {
            "path": "."
        }
    ],
    "settings": {
        "liveServer.settings.AdvanceCustomBrowserCmdLine": "google-chrome-stable --remote-debugging-port=9222",
    }
}

launch.json：

{
/*
Workspace settings override user settings.
https://code.visualstudio.com/docs/getstarted/settings
Check to see if needed ports are listening: sudo lsof -i -P -n | grep LISTEN
*/
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch 127.0.0.1:5500",
            "type": "chrome",
            "request": "launch",
            "url": "http://127.0.0.1:5500/${relativeFileDirname}/${fileBasename}",
            "webRoot": "${workspaceFolder}/${relativeFileDirname}"
        },
        {
            "name": "Attach 127.0.0.1:5500",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "url": "http://127.0.0.1:5500/${relativeFileDirname}/${fileBasename}",
            "webRoot": "${workspaceFolder}/${relativeFileDirname}/"
        },
    ]
  }

setting.json：

/*
Workspace settings override user settings.
https://code.visualstudio.com/docs/getstarted/settings
Check to see if needed ports are listening: sudo lsof -i -P -n | grep LISTEN
    */

    {
        "cSpell.language": "en",
        "git.enableSmartCommit": true,
        "git.autofetch": true,
        "[html]": {
            "editor.defaultFormatter": "vscode.html-language-features"
        },
        "liveServer.settings.donotShowInfoMsg": true,
        "cSpell.userWords": [
            "lsof",
            "readonly"
        ],
        "[javascript]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "cSpell.enabledLanguageIds": [
            "asciidoc",
            "c",
            "cpp",
            "csharp",
            "css",
            "git-commit",
            "go",
            "handlebars",
            "haskell",
            "html",
            "jade",
            "java",
            "javascript",
            "javascriptreact",
            "json",
            "jsonc",
            "latex",
            "less",
            "markdown",
            "php",
            "plaintext",
            "pug",
            "python",
            "restructuredtext",
            "rust",
            "scala",
            "scss",
            "text",
            "typescript",
            "typescriptreact",
            "yaml",
            "yml"
        ],
    }

3）请注意，在启动“ Live Server”之前，请确保所有浏览器都已关闭。启动服务器“ Live Server”以打开要根据配置进行调试的文件对于vsCode File> Preferences> Settings中规定的Chrome浏览器，注意使用127.0.0.1我对本地主机没有运气，默认端口为5500。现在，根据vsCode-启动浏览器。工作区文件设置“ liveServer.settings.AdvanceCustomBrowserCmdLine”：“ google-chrome-stable --remote-debugging-port = 9222”，这是发生调试魔术的地方。 注意，在启动“ Live Server”之前，请确保关闭所有浏览器。 尤其要检查以确保没有像环聊这样的Chrome扩展程序正在运行，这也将阻止Chrome打开9222端口。在我的示例中，我必须单击任务上的退出选项以杀死所有Chrome扩展程序：

4）现在，如果您运行sudo lsof -i -P -n | grep LISTEN，将看到vsCode'Live Server'在端口127.0.0.1:5500上运行，调试器在端口127.0.0.1:9222上运行它； 如果您没有看到两个端口都打开，则说明不正确，您需要确认上面列出的STEP 3）。

5）您可以通过在空白的浏览器选项卡中输入http://127.0.0.1:9222/来检查调试器的Web界面，该URL将显示指向每个选项卡的链接，并且扩展名打开，并允许您在调试器中四处浏览，单击指向要调试的文件的链接，在我的案例中为 127.0.0.1:5500/Leason_66/index.html ，这是端口，链接vsCode将与IDE调试器进行通信并重新呈现

6）注意：确保您位于要调试的文件上。我们已经准备就绪，现在只需单击“调试”图标，然后转到“绿色播放”按钮并选择附加选项即可。从下拉列表中，请注意launch.js文件中配置的信息将显示在下拉列表中。

7）是时候采取行动了！现在您所要做的就是单击“绿色播放”按钮，调试器现在将附加到您在127.0.0.1:5500 / << em>文件的路径> 中打开的选项卡上，并在端口上进行调试127.0.0.1:9222

8）快乐工程：）

Answer 7

尝试一下：

"type": "edge",
"request": "launch",
"name": "Launch Edge",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
"file": "${workspaceFolder}/index.html"

Answer 8

以下过程适用于create-react-app创建的React应用程序：

单击Activity Bar中的扩展名按钮，然后安装Debugger for Chrome扩展名（如果尚未安装）。
打开一个新的终端窗口。 cd到客户端文件夹，并安装chrome-launcher：
```
npm install chrome-launcher
```
切换到Side Bar中的 Debugger 面板。
单击侧边栏顶部的配置下拉菜单，然后选择“添加配置...” 。或者，按边栏顶部打开launch.json，然后按标有“添加配置...”
的蓝色大按钮

从配置模板列表中，选择Chrome: Attach。以下配置应添加到launch.json：

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

在此配置中无需更改任何内容。

将具有以下内容的名为.env的新文件添加到项目的根文件夹（如果是全栈应用程序，则添加到客户端文件夹的根目录）：
```
BROWSER=launchChrome.js
```

将名为launchChrome.js的新文件添加到同一文件夹中，其内容如下：

 const chromeLauncher = require('chrome-launcher');
 chromeLauncher.launch({
     startingUrl: process.argv[2],
     port: 9222,
 }).then(function (chrome) {
     console.info('Chrome remote debugging port:', chrome.port);
 });

从“终端”窗口中启动您的React应用：
```
npm start
```

几秒钟后，您应该看到以下文本：

Starting the development server...

Chrome remote debugging port: 9222

在侧面板的顶部，选择配置Attach to Chrome并按绿色三角形。
您现在可以在React代码中放置断点，调试器在碰到断点时就会中断。您甚至可以通过向Node.js: Launch Program添加launch.json配置来同时调试服务器和客户端。

无法通过附加到Chrome

8 个答案:

代码工作区文件：

launch.json：

setting.json：