我正在尝试设置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
,它确实有效。
我可能在某些方面尝试过这种方法,但我认为我试图调试的特定代码段是主要进程的一部分。它不是,它是渲染器的一部分,但实际上并没有起作用。
这些是我在我的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进程并同时运行它们,这样我就不必担心我正在尝试调试哪个进程(调试器会告诉我当我点击它时它是哪一个断点)。
希望这有助于其他人。