VSCode - 使用 vscode-chrome-debug 在 Web 应用程序中调试 iframe答案

【问题标题】：VSCode - debugging an iframe inside a web application with vscode-chrome-debugVSCode - 使用 vscode-chrome-debug 在 Web 应用程序中调试 iframe
【发布时间】：2016-08-28 17:24:20
【问题描述】：

使用最新的 VS Code 和优秀的 Chrome Debug 扩展。

我有一个网站无法进行调试，这是因为我要调试的代码位于 iframe 中。仅在框架中运行页面对我不起作用（因为 auth 和 postMessage 等等）。

Chrome DevTools 中的文件夹结构如下所示：http://imgur.com/2VLjD1j。我想调试选择的 wfm 文件夹，这是我在 VSCode 中打开的。

由网络服务器托管的映射是（虽然我不能直接点击它——如果我尝试使用他们的工作区->代码自动映射，这就是 Chrome 映射到的）： https://localhost:4300/contact-center/components/wfm

我没有看到任何方法告诉插件我想在 launch.json 中调试这个 iframe，但为了完整起见，这是我目前所拥有的：

{
        "name": "Launch with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "https://localhost:4300/dca",
        "sourceMaps": true,
        "userDataDir": "/Users/${env.USER}/Library/Application\\ Support/Google/ChromePersonal",
        "webRoot": "${workspaceRoot}"
}

【问题讨论】：

遇到了同样的问题，无法在 iframe（或 html 对象标签）内调试。有人找到解决办法吗？
同理，可以在Chrome中看到context和source maps，但是VSCode似乎只能调试最外框的context。
这个问题似乎在github.com/Microsoft/vscode-chrome-debug/issues/786上跟踪
@deandob & op - 我只是使用 marketplace.visualstudio.com/… 为 Firefox 设置了一个等效的源映射调试配置，它工作正常。它主要与 Chrome 工具以 1:1 的配置对等，因此很容易设置。
不幸的是，我们的应用程序必须支持 Chrome 作为主要浏览器，因此我们的调试必须在 Chrome 中进行。这排除了我们团队使用 VS Code 进行 Web 开发的可能性！它在以 Chrome 作为目标浏览器的 Visual Studio 中工作得更好一些，但在

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

【解决方案1】：

哈，5年了！我遇到了同样的问题并转而使用VS Code Debugger for Firefox 来调试 Outlook 加载项。

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "firefox",
      "request": "attach",
      "name": "Firefox: Attach",
      "webRoot": "${workspaceFolder}/src",
      "url": "https://addin.example.com",
      "tabFilter": "https://outlook.office.com/*",
      "preLaunchTask": "Firefox debugger",
      "pathMappings": [
        {
          "url": "webpack:///",
          "path": "${webRoot}/"
        },
        {
          "url": "webpack://./",
          "path": "${webRoot}/"
        },
        {
          "url": "webpack:///**",
          "path": "${workspaceFolder}/src"
        },
        {
          "url": "webpack:///node_modules/",
          "path": null
        }
      ],
      "skipFiles": [
        "chrome://**",
        "moz-extension://**",
        "**/node_modules/**"
      ],
      "log": {
        "consoleLevel": {
          "PathConversion": "Error",
          "SkipFilesManager": "Error",
          "DebugConnection": "Error",
          "ThreadActorProxy": "Error",
          "TabActorProxy": "Error",
          "SourceMappingThreadActorProxy": "Error",
          "SourceActorProxy": "Error",
          "net": "Error",
          "ConsoleActorProxy": "Error",
          "ConsoleActor": "Error",
          "FirefoxDebugSession": "Error",
          "FirefoxDebugAdapter": "Error",
          "RootActorProxy": "Error",
          "TabDescriptorActorProxy": "Error",
          "DataBreakpointsManager": "Error",
          "BreakpointsManager": "Error",
          "SourceAdapter": "Error",
          "SourceMappingSourceActorProxy": "Error",
          "SourceMappingInfo": "Error",
          "ThreadPauseCoordinator": "Error",
          "FrameActorProxy": "Error",
          "ObjectGripActorProxy": "Error",
          "ThreadCoordinator": "Error",
          "default": "Debug"
        }
      }
    }
  ]
}

"preLaunchTask": "Firefox debugger" - 来自.vscode/tasks.json
"url": "https://addin.example.com" - iframe 的网址
"tabFilter": "https://outlook.office.com/*" - 指示在特定选项卡中搜索 iframe

.vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Firefox debugger",
      "osx": {
        "type": "shell",
        "command": "/Applications/Firefox.app/Contents/MacOS/firefox --start-debugger-server"
      },
      "windows" : {
        "type": "shell",
        "command": "\"C:\\Program Files\\Mozilla Firefox\\firefox.exe\" -start-debugger-server"
      }
    }
  ]
}

【讨论】：