Как получить VSCode Debugger для поиска электронных карт-источников - PullRequest
Новая
       40

Как получить VSCode Debugger для поиска электронных карт-источников

0 голосов
/ 10 апреля 2019

Я пытаюсь настроить VScode для отладки электронного приложения, но когда я пытаюсь начать отладку, мои точки останова становятся непроверенными.

Я почти уверен, что это проблема исходной карты, как изисследование, которое я провел, а также все журналы ссылаются на номера строк в комплекте кода.

Версия электрона - 2.0.0, а используемая версия веб-пакета - 4.8.2.

На самом деле существует около девяти различных файлов webpack.config.js для сред, а также для того, чтобы его можно было создать либо как электронное приложение, либо как стандартное веб-приложение для Chrome.При этом я думаю, что это соответствующий файл веб-пакета, который объединяет код в различные библиотеки: 

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',
};

Наконец, вотфайл launch.json в vscode: 


   {
            "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/**"
            ]
        },

Я действительно борюсь с тем, чтобы выяснить, стоит ли мне тратить свое время на файлы веб-пакетов (они создают исходные карты), если все это имеетчтобы получить файл launch.json для правильного поиска исходных карт.

VScode действительно предлагает этот шаблон: 


            "sourceMapPathOverrides": {
                "webpack:///./~/*": "${workspaceRoot}/node_modules/*",
                "webpack:///./*": "${workspaceRoot}/*",
                "webpack:///*": "*"
            }

Но мне немного непонятно, какие пути я пробуючтобы соответствовать слева и справа.Я думаю, что этот шаблон устарел, и теперь workspaceRoot должен быть workspaceFolder, однако я не уверен, почему в этом шаблоне я указываю путь к папке модулей узла или мне нужно убедиться, что они эквивалентны путямЯ предоставляю в outFiles.

Также файлы, которые мне больше всего нужны для отладки, живут в этой папке ${workspaceFolder}/build/electron/dev/libs/, но я не могу получить точки прерывания в файлах в папке dev.

Любое пониманиегде я должен был бы сосредоточить свои усилия, был бы оценен.

1 Ответ

0 голосов
/ 11 апреля 2019

Итак, я понял это.Кажется, я сделал несколько неправильных предположений.

Прежде всего, щелкнув в VSCode, чтобы добавить точку останова, похоже, не работает вообще.Однако это работает, если вы набираете debugger так же, как в другом коде java-скрипта.

Возможно, я пытался это делать в определенные моменты, но я думал, что конкретный фрагмент кода я пыталсяотладка была частью основных процессов.Это не было, это было частью Renderer, но это на самом деле не работало.

Это были настройки, которые я имел в своем 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 получателей специально этот раздел для добавления в качестве новой конфигурации в мой файл launch.json: 

"compounds": [
          {
              "name": "Electron: All",
              "configurations": [
                  "Electron: Main",
                  "Electron: Renderer"
              ]
          }
      ]

Запуск этой конфигурации я могу отладитьлибо процесс Main или Renderer, и запускайте их одновременно, чтобы мне не приходилось беспокоиться о том, какой процесс я пытаюсь отладить (а отладчик скажет мне, какой это, когда я достигну точки останова).

Надеюсь, это поможет кому-то еще.

...