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

Question

使用最新的VS Code和出色的Chrome Debug扩展.

我有一个网站,我无法调试工作,这是因为我想调试的代码是在iframe中.只是在框架中运行页面对我不起作用(因为auth和postMessage等).

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

由Web服务器托管的映射是(虽然我不能直接点击 - 如果我尝试使用他们的工作区 - >代码自动化,这就是Chrome映射的内容): https:// localhost:4300/contact-center /组件/ 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}"
}

Answer 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 的 URL
• "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"
      }
    }
  ]
}