РЕДАКТИРОВАТЬ 10/1/19
Я все еще не могу приостановить / отладить процесс рендеринга, точка останова, которую я установил для кода Vs, не проверена пустым кружком и "игнорируется из-за того, что сгенерированный код не найден"
РЕДАКТИРОВАТЬ 8/1/19
Я обновил конфигурацию запуска, package.json и webpack.config.js, ошибка 1 исчезла, теперь я могу прерваться при запуске и пройти по файлу main.dev.js, однако у меня все еще есть 3 вопроса:
- Я получил эту ошибку в коде vs при переходе через код
Невозможно открыть файл init.js: файл не найден
(файлов: /// E: /snsoft/xblive-web/node_modules/electron/dist/resources/electron.asar/browser/init.js).
Изображение
Точка останова, которую я устанавливаю на main.dev.js, отличается от фактической точки останова. См. Ожидаемая точка останова и Фактическая точка останова
Как перейти непосредственно к точке останова при запуске режима отладки вместо паузы в первой строке.
launch.json
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "NPM",
"runtimeExecutable":
"npm",
"runtimeArgs": [
"run",
"dev"
],
"protocol": "inspector",
"console": "integratedTerminal",
// "port": 9229,
"outFiles": [],
"sourceMaps": true,
// "stopOnEntry": true
},
{
"name": "Electron: Main",
"type": "node",
"request": "attach",
"port": 9229,
"timeout": 30000
},
{
"name": "Electron: Renderer",
"type": "chrome",
"request": "attach",
"port": 9223,
"webRoot": "${workspaceFolder}",
"timeout": 30000
}
],
"compounds": [
{
"name": "Electron: All",
"configurations": [
"NPM",
"Electron: Main",
"Electron: Renderer"
]
}
]
package.json
"scripts": {
//...
"start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r babel-register --inspect-brk=9229 --remote-debugging-port=9223 ./app/main.dev.js",
//...
}
webpack.config.js
export default merge.smart(baseConfig, {
devtool: 'source-map',
//...
})
Оригинальный пост
Я пытаюсь настроить отладку для электронного приложения в коде VS, в этом приложении используется веб-пакет.
Я попробовал базовую настройку, рекомендованную на этой странице (https://github.com/Microsoft/vscode-recipes/tree/master/Electron), с успехом. Но когда я пытаюсь применить ее к моему проекту, она не работает.
Вот мой launch.json , который я изменил по ссылке выше
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron: Main",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run",
"dev",
"--remote-debugging-port=9223"
],
"protocol": "inspector",
"autoAttachChildProcesses": true,
"internalConsoleOptions": "openOnFirstSessionStart",
"console": "integratedTerminal",
"port": 2323
},
{
"name": "Electron: Renderer",
"type": "chrome",
"request": "attach",
"port": 9223,
"webRoot": "${workspaceFolder}",
"timeout": 30000
},
],
"compounds": [
{
"name": "Electron: All",
"configurations": [
"Electron: Main",
"Electron: Renderer"
]
}
]
}
package.json
"scripts": {
//...
"dev": "cross-env START_HOT=1 node -r babel-register ./internals/scripts/CheckPortInUse.js && cross-env START_HOT=1 npm run start-renderer-dev",
"start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r babel-register ./app/main.dev.js",
"start-renderer-dev": "cross-env NODE_ENV=development node --trace-warnings -r babel-register ./node_modules/webpack-dev-server/bin/webpack-dev-server --config webpack.config.js",
//...
}
webpack.config.js
export default merge.smart(baseConfig, {
devtool: 'inline-source-map',
mode: 'development',
target: 'electron-renderer',
entry: [
'react-hot-loader/patch',
`webpack-dev-server/client?http://localhost:${port}/`,
'webpack/hot/only-dev-server',
path.join(__dirname, 'app/index.js')
],
output: {
publicPath: `http://localhost:${port}/dist/`,
filename: 'renderer.dev.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
plugins: [
// Here, we include babel plugins that are only required for the
// renderer process. The 'transform-*' plugins must be included
// before react-hot-loader/babel
'transform-class-properties',
'transform-es2015-classes',
'react-hot-loader/babel'
]
}
}
},
{
test: /\.global\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.css$/,
include: [
/[\\/]node_modules[\\/].*antd/,
/react-datepicker/,
/video.js/
],
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /^((?!\.global).)*\.css$/,
exclude: [
/[\\/]node_modules[\\/].*antd/,
/react-datepicker/,
/video.js/
],
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
importLoaders: 1,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
}
]
},
// SASS support - compile all .global.scss files and pipe it to style.css
{
test: /\.global\.(scss|sass)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader'
}
]
},
// SASS support - compile all other .scss files and pipe it to style.css
{
test: /^((?!\.global).)*\.(scss|sass)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
importLoaders: 1,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
},
{
loader: 'sass-loader'
}
]
},
// WOFF Font
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff'
}
}
},
// WOFF2 Font
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff'
}
}
},
// TTF Font
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream'
}
}
},
// EOT Font
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader'
},
// SVG Font
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'image/svg+xml'
}
}
},
// Common Image Formats
{
test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
use: 'url-loader'
}
]
},
plugins: [
requiredByDLLConfig
? null
: new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(manifest),
sourceType: 'var'
}),
new webpack.HotModuleReplacementPlugin({
multiStep: true
}),
new webpack.NoEmitOnErrorsPlugin(),
/**
* Create global constants which can be configured at compile time.
*
* Useful for allowing different behaviour between development builds and
* release builds
*
* NODE_ENV should be production so that modules do not perform certain
* development checks
*
* By default, use 'development' as NODE_ENV. This can be overriden with
* 'staging', for example, by changing the ENV variables in the npm scripts
*/
new webpack.EnvironmentPlugin({
NODE_ENV: 'development'
}),
new webpack.LoaderOptionsPlugin({
debug: true
}),
new ExtractTextPlugin({
filename: '[name].css'
})
],
node: {
__dirname: false,
__filename: false
},
devServer: {
port,
publicPath,
compress: true,
noInfo: true,
stats: 'errors-only',
inline: true,
lazy: false,
hot: true,
headers: { 'Access-Control-Allow-Origin': '*' },
contentBase: path.join(__dirname, 'dist'),
watchOptions: {
aggregateTimeout: 300,
ignored: /node_modules/,
poll: 100
},
historyApiFallback: {
verbose: true,
disableDotRule: false
},
before() {
if (process.env.START_HOT) {
console.log('Starting Main Process...');
spawn('npm', ['run', 'start-main-dev'], {
shell: true,
env: process.env,
stdio: 'inherit'
})
.on('close', code => process.exit(code))
.on('error', spawnError => console.error(spawnError));
}
}
}
});
Что я ожидаю: я могу делать отладку на электроне с помощью кода.
Фактический результат: я получаю две ошибки «Не удается подключиться к процессу времени выполнения ...». (Пожалуйста, смотрите прикрепленные изображения ниже)
Ошибка 1: не удается подключиться к цели
Ошибка2: ECONNREFUSED