如何让VSCode Debugger找到电子源图

问题描述 投票:0回答:1

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

我很确定这是一个源地图问题,无论是我已经完成的研究,还是所有日志都引用了捆绑代码中的行号。

电子版本为2.0.0,使用的webpack版本为4.8.2。

实际上有大约九个不同的webpack.config.js文件,适用于环境,因此它可以构建为电子应用程序,也可以构建为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文件夹中的文件中获得断点。

任何有关我应该集中精力的见解都将受到赞赏。

webpack electron vscode-debugger
1个回答
0
投票

所以我已经明白了。在此过程中,我似乎做了一些错误的假设。

首先,单击VSCode添加断点似乎根本不起作用。但是,如果您以与其他java脚本代码相同的方式键入debugger,它确实有效。

我可能在某些方面尝试过这种方法,但我认为我试图调试的特定代码段是主要进程的一部分。它不是,它是渲染器的一部分,但实际上并没有起作用。

这些是我在我的launch.json中为Renderer设置的:

        {
            "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进程并同时运行它们,这样我就不必担心我正在尝试调试哪个进程(调试器会告诉我当我点击它时它是哪一个断点)。

希望这有助于其他人。

© www.soinside.com 2019 - 2024. All rights reserved.