允许使用 Debugger for Chrome 进行扩展答案

【问题标题】：Allow extensions using Debugger for Chrome允许使用 Debugger for Chrome 进行扩展
【发布时间】：2019-03-02 17:33:38
【问题描述】：

我在 Visual Studio Code 上使用扩展程序 Debugger For Chrome 来调试 JavaScript 客户端代码

如您所知，它会启动一个新的 Chrome 实例，而无需任何扩展。

有没有办法允许该实例上的 Chrome 扩展程序？

【问题讨论】：

标签： javascript google-chrome debugging visual-studio-code

【解决方案1】：

我找不到如何做我所要求的。但对我的问题有效的解决方法是将调试器附加到打开的 Chrome 实例。

所以我可以在 Visual Studio Code 上调试时使用扩展。

在文件./.vscode/.launch.json 中我编辑了具有"type": "chrome" 的对象

发件人：

{
  "type": "chrome",
  "request": "launch",
  "name": "Meteor: Chrome",
  "url": "http://localhost:3000/",
  "webRoot": "${workspaceFolder}"
},

收件人：

{
  "type": "chrome",
  "request": "attach",
  "name": "Meteor: Chrome",
  "url": "http://localhost:3000/*",
  "webRoot": "${workspaceFolder}",
  "port": 9222
},

并将 remote-debugging-port 参数添加到 Chrome 快捷方式中，如下图所示：

完成此操作后，您必须从修改后的快捷方式打开 Chrome，转到要调试的 URL（与 URL 值相同），然后将调试器附加到 Visual Studio Code 单击开始调试.

注意：

JSON 的端口和 Chrome 快捷方式的端口必须匹配。
我将 URL 值从 "http://localhost:3000/" 编辑为 "http://localhost:3000/*"。星号是因为当您打开项目时，它可能会将您重定向到 URL，例如 "http://localhost:3000/dashboard" 或类似的东西。因此，当您尝试附加调试器时，它将不匹配。星号告诉调试器 URL 的最后一部分可以是任何东西。

【讨论】：