webpack - 如何让 VSCode 调试器找到 Electron 源图

Question

我正在尝试设置 VScode 来调试 Electron 应用程序，但是当我尝试开始调试时，我的断点都变得未经验证。

我很确定这是一个源映射问题，来自我所做的研究，而且所有日志都引用了捆绑代码中的行号。

electron 版本是 2.0.0，使用的 webpack 版本是 4.8.2。

实际上有大约九个不同的 webpack.config.js 文件，用于环境，因此它可以构建为 Electron 应用程序，或作为 chrome 的标准 Web 应用程序。话虽如此，我认为这是将代码捆绑到各种库中的相关 webpack 文件:

const webpack = require('webpack');

const baseConfig = (root, src, options, entry, name) => {
    return {
        entry: entry,
        output: {
            filename: '[name]-bundle.js',
            path: `${root}${options.output.path}/libs`,
            library: name,
            libraryTarget: 'umd',
            chunkFilename: '[name]-bundle.js'
        },
        plugins: [
            new webpack.ProvidePlugin({
                _: 'lodash'
            }),    
            new webpack.DefinePlugin(options.defines)
        ],
        target: options.platform.lib,
        context: src,
        resolve: {
            modules: [
                src,
                'node_modules'
            ],
            alias: {
                app: 'app',
                util: 'app/util',
                robot: 'app/robot',
                platform: 'platform/' + options.platform.name
            },
            extensions: ['.json', '.js']
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: 'eslint-loader',
                    enforce: 'pre',
                    exclude: /node_modules/
                },
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.mp4$|\.woff2?$|\.otf$|\.ttf$|\.eot$/,
                    loader: 'file-loader'
                }
            ]
        }
    };
};

module.exports = (root, src, options) => {
    const configs = [];

    const libraries = [
        {
            entry: {messagingservice: 'util/messaging/messaging-service.js'},
            name: 'MessagingService'
        },
        {
            entry: {messagingclient: 'util/messaging/messaging-client.js'},
            name: 'MessagingClient'
        },
        {
            entry: {utils: 'util/utils-helper.js'},
            name: 'Utils'
        }
    ];

    libraries.forEach(library => {
        const config = baseConfig(root, src, options, library.entry, library.name);
        if (options.sourceMap) {
            config.devtool = 'source-map';
        }
        configs.push(config);
    });

    return configs;
};

这是开发环境的配置:

module.exports = {
    defines: {
        VERBOSE: true,
        SHOW_DEV_TOOLS: true,
    },
    output: {
        path: 'dev'
    },
    clean: true,
    sourceMap: true,
    mode: 'development',
};

最后是 vscode 中的 launch.json 文件:

   {
            "type": "node",
            "request": "launch",
            "name": "Electron: Main",
            "protocol": "inspector",
            "cwd": "${workspaceFolder}/build/electron/dev",
            "program": "${workspaceRoot}/build/electron/dev/index.js",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
            },
            "runtimeArgs": [
                "--enable-logging",
                "--remote-debugging-port=9223"
            ],
            "sourceMaps": true,
            "outFiles": [
                "${workspaceFolder}/build/electron/dev/**"
            ]
        },

我真正苦苦挣扎的是弄清楚我是否应该把时间花在 webpack 文件中(它们确实会创建源映射)，是否这一切都与让 launch.json 正确找到源映射有关。

VScode 确实提供了这个模板:

            "sourceMapPathOverrides": {
                "webpack:///./~/*": "${workspaceRoot}/node_modules/*",
                "webpack:///./*": "${workspaceRoot}/*",
                "webpack:///*": "*"
            }

但我有点不清楚我要在左侧和右侧匹配哪些路径。我认为这个模板已经过时了，workspaceRoot 现在应该是workspaceFolder，但是我不确定为什么这个模板让我给出节点模块文件夹的路径，或者我是否需要确保这些与路径等效我在 outFiles 中提供。

还有我最关心调试的文件在这个文件夹中 ${workspaceFolder}/build/electron/dev/libs/但我也无法在 dev 文件夹中的文件中发生断点。

任何关于我应该把精力集中在哪里的见解都将不胜感激。

Answer 1

所以我想通了。在此过程中，我似乎做了一些错误的假设。

首先，在 VSCode 中单击添加断点似乎根本不起作用。但是，如果您输入 debugger，它确实有效。就像在其他 java 脚本代码中一样。

我可能在某些时候尝试过，但我认为我尝试调试的特定代码是主进程的一部分。它不是，它是渲染器的一部分，但实际上不起作用。

这些是我在 launch.json 中为渲染器设置的设置:

        {
            "name": "Electron: Renderer",
            "type": "chrome",
            "request": "attach",
            "port": 9223,
            "webRoot": "${workspaceFolder}/build/electron/dev",
            "sourceMaps": true,
            "timeout": 3000,
        }

每当我尝试使用此配置时，我都会收到此错误: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9223我在这个错误上发现了很多，但它都与“启动”请求而不是“附加”请求有关，所以这些解决方案对我不起作用。

最后我找到了这个 vscode recipies特别是将此部分作为新配置添加到我的 launch.json 文件中:

"compounds": [
          {
              "name": "Electron: All",
              "configurations": [
                  "Electron: Main",
                  "Electron: Renderer"
              ]
          }
      ]

运行此配置，我可以调试 Main 或 Renderer 进程并同时运行它们，这样我就不必担心我正在尝试调试哪个进程(当我点击时，调试器会告诉我它是哪一个断点)。

希望这对其他人有帮助。