我正在尝试设置 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 文件夹中的文件中。
任何关于我应该集中精力的见解将不胜感激。
所以我已经想通了。似乎我在此过程中做出了一些错误的假设。
首先，在 VSCode 中单击以添加断点似乎根本不起作用。但是，如果您以与其他 java 脚本代码相同的方式键入debugger它确实有效。
我可能在某些时候尝试过，但我认为我尝试调试的特定代码段是 Main 进程的一部分。它不是，它是渲染器的一部分，但这实际上不起作用。
这些是我在渲染器的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 食谱，特别是本节，作为新配置添加到我的 launch.json 文件中：
"compounds": [
{
"name": "Electron: All",
"configurations": [
"Electron: Main",
"Electron: Renderer"
]
}
]
运行此配置，我可以调试 Main 或 Renderer 进程并同时运行它们，这样我就不必担心我尝试调试哪个进程(当我遇到断点时，调试器会告诉我是哪个进程)。
希望这对其他人有所帮助。