VSCode можно прикрепить только к фоновой странице devtools в электронном виде. - PullRequest
Новая
       27

VSCode можно прикрепить только к фоновой странице devtools в электронном виде.

1 голос
/ 20 марта 2020

Я пытаюсь отладить процесс рендеринга в электронном приложении с использованием машинописи, веб-пакета и реакции. В похожих проектах при запуске появится раскрывающийся список, когда отладчик подключается к электрону, чтобы выбрать страницу. Это не происходит в этом случае. Если я пытаюсь установить "url": "${workspaceFolder}/dist/index.html" при запуске. 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": out приводит к подключению отладчика на страницу инструментов vue dev (проверено .scripts).

Страница реакции отображается в электронном виде, и я могу использовать devtools в электронном для отладки, и исходные карты там и работают должным образом.

Структура папок: 

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

И запускается всеми любимая. 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": "./"
    }
}

Редактировать: Некоторые параметры запускаются. json, webpack.config. js и tsconfig. json может быть немного вялым, потому что я какое-то время возился с ними, пытаясь заставить это работать, и я не особо разборчив в том, чтобы вернуть их обратно.

Редактировать # 2: : Я использовал трассировку для проверки траффика c между vscode и электроном и смог установить "url: ", скопировав и вставив абсолютный путь из одного из Сообщения. Это решает проблему невозможности отладки, но я до сих пор не знаю, почему не появляется выпадающее меню и почему не работает "${workspaceFolder}/dist/index.html", потому что, насколько я могу судить, они должны указывать на одну и ту же вещь.

...