使用 VS Code 和 webpack-dev-server 调试时断点不起作用

Question

我目前正在尝试从 VS Code 调试 Azure DevOps 扩展示例项目。

该项目使用 webpack-dev-server 在本地托管扩展以进行调试。结合 VS Code 的 Chrome 扩展调试器和适当的配置应该允许调试和单步执行 typescript 源代码。

我能够从 Chrome 单步执行和调试 .ts 文件，但我在 VS Code 报告中的断点

Breakpoint set but not yet bound

和

Unverified breakpoint

工具版本：
VS 代码：1.38.1
Node.js: 10.11.0
Chrome: 77.0.3865.90
Chrome 的调试器：4.12.0
打字稿：3.6.3
网络包：4.41.0
webpack-cli: 3.3.9
webpack-开发服务器：3.8.1

tsconfig.json

{
    "compilerOptions": {
        "module": "amd",
        "target": "es5",
        "jsx": "react",
        "moduleResolution": "node",
        "rootDir": "src/",
        "outDir": "dist/",
        "types": [
            "vss-web-extension-sdk",
            "mocha"
        ]
    },   
    "filesGlob": [
        "src/**/*.ts",
        "src/**/*.tsx"
    ]    
}

tsconfig.dev.json

{
    "extends": "./tsconfig",
    "compilerOptions": {
      "sourceMap": true
    }
}

[webpack]base.config.js

const path = require("path");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    context: path.join(__dirname, '../src'),
    entry: {
        registration: "./app.ts",
        dialog: "./dialog.tsx"
    },
    output: {
        filename: "[name].js",
        libraryTarget: "amd"
    },
    externals: [
        /^VSS\/.*/, /^TFS\/.*/, /^q$/
    ],
    resolve: {
        extensions: [
            "*",
            ".webpack.js",
            ".web.js",
            ".ts",
            ".tsx",
            ".js"],
        modules: [
            path.resolve("./src"),
            'node_modules'
        ]
    },
    module: {
        rules: [
            {
                test: /\.s?css$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    },
    plugins: [
        new CopyWebpackPlugin([
            { from: "../node_modules/vss-web-extension-sdk/lib/VSS.SDK.min.js", to: "libs/VSS.SDK.min.js" },
            { from: "../src/*.html", to: "./" },
            { from: "../marketplace", to: "marketplace" },
            { from: "../vss-extension.json", to: "vss-extension-release.json" }
        ])
    ]
}

[webpack]dev.config.js

const path = require("path");
const merge = require('webpack-merge');
const baseConfig = require('./base.config.js');

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    port: '9085',
    https: true,
    writeToDisk: true
  },
  module: {
    rules: [
        {
            test: /\.tsx?$/,
            loader: "ts-loader",
            options: {
              configFile: '../tsconfig.dev.json'
            },
        }
    ]
  },
  output: {
    path: path.join(__dirname, '../dist'),
  }
});

launch.json

{
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": {{omitted}},
            "webRoot": "${workspaceFolder}/dist",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${workspaceFolder}/src/*",
                "webpack:///../node_modules/*": "${workspaceFolder}/node_modules/*",
            },
            "trace": true
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Webpack-dev-server",
            "program": "${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server.js",
            "args": [
                "--config",
                "webpack/dev.config.js"
            ],
            "sourceMaps": true,
            // "smartStep": true,
            "trace": true,
            "autoAttachChildProcesses": true
        }
      ]
}

项目结构

Chrome

中的来源结构

原始项目源代码
https://github.com/cschleiden/vsts-quick-decompose

这些是我已经找到但没有骰子的一些资源：
Debugging webpack dev server in vs code?
How to use VS Code debugger with webpack-dev-server (breakpoints ignored)
https://medium.com/acoolthingilearned/vs-code-chrome-debugger-and-webpack-10b5e3618d05
https://code.visualstudio.com/docs/typescript/typescript-debugging

在此先感谢您的帮助！

Answer 1

目前 Chrome 的 VS Code 调试器不支持 iframe。 Azure DevOps 通过 iframe 加载扩展。这篇博文让我找到了答案：

https://devblogs.microsoft.com/devops/streamlining-azure-devops-extension-development/

这是标记为增强功能的未解决 GitHub 问题：

https://github.com/microsoft/vscode-chrome-debug/issues/786

当前可行的替代方法是使用适用于 Firefox 的 VS 代码调试器。
确保您在 Firefox 中授权自签名证书

与 Firefox 插件一起更新的工作配置：

launch.json

{
    "configurations": [
        {
            "name": "Launch Firefox",
            "type": "firefox",
            "request": "launch",
            "url": "https://localhost:9085",
            "reAttach": true,
            "pathMappings": [
                {
                    "url": "webpack:///",
                    "path": "${workspaceFolder}/"
                }
            ]
        }
      ]
}

[webpack]base.config.js

const path = require("path");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        registration: path.resolve(__dirname, "../src/app.ts"),
        dialog: path.resolve(__dirname, "../src/dialog.tsx")
    },
    output: {
        filename: "[name].js",
        libraryTarget: "amd",
        path: path.join(__dirname, '../dist'),
    },
    externals: [
        /^VSS\/.*/, /^TFS\/.*/, /^q$/
    ],
    resolve: {
        extensions: [
            "*",
            ".webpack.js",
            ".web.js",
            ".ts",
            ".tsx",
            ".js"],
        modules: [
            path.resolve("./src"),
            'node_modules'
        ]
    },
    module: {
        rules: [
            {
                test: /\.s?css$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    },
    plugins: [
        new CopyWebpackPlugin([
            { from: "./node_modules/vss-web-extension-sdk/lib/VSS.SDK.min.js", to: "libs/VSS.SDK.min.js" },
            { from: "./src/*.html", to: "./", flatten: true },
            { from: "./marketplace", to: "marketplace" },
            { from: "./vss-extension.json", to: "vss-extension-release.json" }
        ])
    ]
}

[webpack]dev.config.js

const path = require("path");
const merge = require('webpack-merge');
const baseConfig = require('./base.config.js');

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, '../dist'),
    port: 9085,
    https: true
  },
  module: {
    rules: [
        {
            test: /\.tsx?$/,
            loader: "ts-loader",
            exclude: /node_modules/,
            options: {
              configFile: path.resolve(__dirname, '../tsconfig.dev.json')
            },
        }
    ]
  }
});

使用 VS Code 和 webpack-dev-server 调试时断点不起作用

Breakpoints not working when debugging with VS Code and webpack-dev-server

typescript

webpack

webpack-dev-server

visual-studio-code

azure-devops-extensions