Skip to content

Webview debug breakpoints not binding to the source file #2287

@gigara

Description

@gigara

Describe the bug
A clear and concise description of what the bug is.
I'm trying to debug my extension webview (react + webpack). Breakpoints are popping up the .js file instead of the actual source file.

Launch config

{
    "name": "WI Extension",
    "type": "extensionHost",
    "request": "launch",
    "env": {
        "WEB_VIEW_DEV_MODE": "true",
        "WEB_VIEW_DEV_HOST": "http://localhost:3000",
    },
    "debugWebviews": true,
    "args": [
        "--extensionDevelopmentPath=${workspaceFolder}/workspaces/wi/wi-extension"
    ],
    "outFiles": [
        "${workspaceFolder}/workspaces/wi/wi-extension/dist/**/*.js",
        "${workspaceFolder}/workspaces/wi/wi-webviews/lib/**/*"
    ],
    "skipFiles": [
        "**/node_modules/**"
    ],
    "rendererDebugOptions": {
        "sourceMaps": true,
        "webRoot": "${workspaceFolder}/workspaces/wi/wi-webviews",
    },
    "preLaunchTask": "npm: watch-wi",
    "envFile": "${workspaceFolder}/workspaces/wi/wi-extension/.env"
}

Webpack config

output: {
        path: path.resolve(__dirname, "lib"),
        filename: "main.js",
        library: "visualizerWebview",
        devtoolModuleFilenameTemplate: function (info) {
            return "file:///" + encodeURI(info.absoluteResourcePath);
        },
        publicPath: "http://localhost:3000/lib/",
    }
Image Image Image Image Image

VS Code Version: 1.105.1

Metadata

Metadata

Assignees

Labels

bugIssue identified by VS Code Team member as probable bug

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions