Question

我正在尝试设置VScode来调试电子应用，但是当我尝试开始调试时，所有断点都无法验证。

我很确定这是一个源地图问题，无论是根据我所做的研究，还是所有日志都引用了捆绑代码中的行号。

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

针对环境，实际上大约有九种不同的webpack.config.js文件，因此可以将其构建为电子应用程序或chrome的标准网络应用程序。话虽这么说，我认为这是相关的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添加断点似乎根本不起作用。但是，如果您以与输入其他Java脚本代码相同的方式键入debugger，则可以正常工作。

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

这些是我在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进程，并同时运行它们，这样我就不必担心要调试的进程（调试器会告诉我它是哪个进程）当我到达断点时。

希望这对其他人有帮助。

如何获取VSCode调试器以查找电子源图

1 个答案: