typescript - VSCode 只能附加到电子中的 devtools 背景页面

Question

我正在尝试使用 typescript、webpack 和 react 调试电子应用程序中的渲染过程。在类似的项目中，启动时，当调试器附加到电子以选择页面时，会出现一个下拉列表。在这种情况下不会发生这种情况。如果我尝试"url": "${workspaceFolder}/dist/index.html"在 launch.json 中设置，我会收到此错误：

Cannot connect to runtime process, timeout after 10000 ms - (reason: Can't find a valid target that matches {path}. Available pages: {vue dev tools page})

忽略"url":会导致调试器附加到 vue 开发工具页面（由 验证.scripts）。

反应页面显示在电子中，我可以使用电子中的 devtools 进行调试，并且源映射在那里并且可以正常工作。

文件夹结构为：

/dist/
    electron.js
    electron.js.map
    index.html
    react.js
    react.js.map
/src/
    /main/
        electron.ts
    /render/
        App.tsx
    index.html

还有大家最喜欢的launch.json：

{
    "version": "2.0.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Electron: Main",
            "preLaunchTask": "build",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "program": "${workspaceFolder}/dist/electron.js",
            "runtimeArgs": [
                "${workspaceFolder}/dist/electron.js",
                ".",
                "--remote-debugging-port=4040",
            ],
            "outFiles": ["${workspaceFolder}/dist/*"],
            "sourceMaps": true
        },
        {
            "name": "Electron: Renderer",
            "type": "chrome",
            "request": "attach",
            "port": 4040,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/../*"
            },
            "webRoot": "${workspaceFolder}/dist",
            "timeout": 10000,
            "sourceMaps": true,
            "trace": "verbose",
            "url": "${workspaceFolder}/dist/index.html"
        }
    ],
    "compounds": [
        {
            "name": "Electron: All",
            "configurations": [
                "Electron: Main",
                "Electron: Renderer"
            ]
        }
    ]
}

webpack.config.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = [
    {
        mode: 'development',
        entry: './src/render/App.tsx',
        target: 'electron-renderer',
        devtool: 'source-map',
        resolve: {
            extensions: [
                '.tsx', '.ts,', '.js', '.css'
            ]
        },
        module: {
            rules: [{
                test: /\.ts(x?)$/,
                include: /src/,
                use: [{ loader: 'ts-loader' }]
            }, {
                    test: /\.css$/i,
                    use: [
                        "style-loader",
                        "@teamsupercell/typings-for-css-modules-loader",
                        {
                            loader: "css-loader",
                            options: { modules: true }
                        }
                    ]
                }
            ]
        },
        output: {
            path: __dirname + '/dist',
            filename: 'react.js'
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            })
        ]
    },
    {
        mode: 'development',
        entry: './src/main/electron.ts',
        target: 'electron-main',
        devtool: 'source-map',
        module: {
            rules: [{
                test: /\.ts$/,
                include: /src/,
                use: [{ loader: 'ts-loader' }]
            }]
        },
        output: {
            path: __dirname + '/dist',
            filename: 'electron.js'
        }
    }
];

tsconfig.json：

{
    "compilerOptions": {
        "jsx": "react",
        "esModuleInterop": true,
        "sourceMap": true,
        "rootDir": "./",
        "outDir": "./dist/",
        "noImplicitAny": false,
        "strict": false,
        "target": "ES2017",
        "module": "commonjs",
        "baseUrl": "./"
    }
}

编辑：一些选项 launch.json、webpack.config.js 和 tsconfig.json 可能有点不稳定，因为我一直在搞乱它们，试图让它工作，我并不是特别挑剔关于把它们改回来。

编辑＃2：：我使用跟踪检查vscode和电子之间的流量，并且能够"url: "通过复制和粘贴其中一条消息的绝对路径来设置。这解决了无法调试的问题，但我仍然不知道为什么没有出现下拉菜单，也不知道为什么 using"${workspaceFolder}/dist/index.html"不起作用，因为据我所知它们应该指向同一个东西。

标签： typescriptdebuggingwebpackvisual-studio-codeelectron