Точки останова не работают при отладке с помощью VS Code и webpack-dev-server

Question

В настоящее время я пытаюсь отладить пример проекта расширения Azure DevOps из кода VS.

В проекте используется webpack-dev-server для локального размещения расширения в целях отладки. Это в сочетании с расширением Debugger for Chrome для VS Code и правильной настройкой должно позволить отладку и пошаговое выполнение исходного кода машинописи.

Я могу пройти и отладить файл .ts из Chrome, но мои точки останова находятся внутриVS Код отчета

Точка останова установлена, но еще не связана

и

Неподтвержденная точка останова

Версии инструмента:
VS Код: 1.38.1
Node.js: 10.11.0
Chrome: 77.0.3865.90
Отладчик для Chrome: 4.12.0
машинопись: 3.6.3
webpack: 4.41.0
webpack-cli: 3.3.9
webpack-dev-server: 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
        }
      ]
}

Структура проекта

ИсточникСтруктура s в Chrome

Исходный код проекта
https://github.com/cschleiden/vsts-quick-decompose

Это было несколько ресурсов, которые я уже нашел, но без кубиков:
Отладка сервера dev веб-пакетов в коде?
Как использовать отладчик VS Code с webpack-dev-server (точки останова)игнорируется)
https://medium.com/acoolthingilearned/vs-code-chrome-debugger-and-webpack-10b5e3618d05
https://code.visualstudio.com/docs/typescript/typescript-debugging

Спасибо заранее за любую помощь!

Answer 1

В настоящее время отладчик кода VS для Chrome не поддерживает фреймы. Azure DevOps загружает расширения через фреймы. Этот блог привел меня к ответу:

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

Вот открытый выпуск GitHub, помеченный как расширение:

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

Текущая рабочая альтернатива - использовать отладчик кода VS для Firefox.
Убедитесь, что вы авторизуете самоподписанный сертификат в 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')
            },
        }
    ]
  }
});