VSCode - debugging an iframe inside a web application with vscode-chrome-debug - debugging

Question

Using the latest VS Code and the excellent Chrome Debug extension.
I have one site that I can't get debugging to work and it's because the code I want to debug is in an iframe. Just running the page in the frame won't work for me (because auth and postMessage and more).
The folder structure in Chrome DevTools looks like the following: http://imgur.com/2VLjD1j. I want to debug the wfm folder selected, which is what I have open in VSCode.
The mapping as hosted by the web server is (though I can't hit this directly - this is what Chrome maps to if I try to use their workspace->code automap):
https://localhost:4300/contact-center/components/wfm
I don't see any way to tell the plugin that I want to debug this iframe in launch.json, but for completeness here's what I have so far:
{
"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

Hah, it's been 5 years! I faced the same problem and switched to using VS Code Debugger for Firefox to debug an Outlook add-in.
.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" - comes from .vscode/tasks.json
"url": "https://addin.example.com" - iframe's URL
"tabFilter": "https://outlook.office.com/*" - instructs to search iframe in specific tabs
.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"
}
}
]
}