Как отлаживать Neutralino в VS Code?

Question

Я новичок в NuetralinoJS и веб-разработчиках в целом, поэтому, пожалуйста, не торопитесь. Я пробовал следовать руководству здесь с небольшими вариациями:

https://neutralino.js.org/docs/

И находите "Шаг 5 - Отладка" слишком расплывчатым, чтобы быть полезным. Как я могу сделать "Изменить режим нейтралино в браузере?" Сможет ли кто-нибудь исправить мой launch.json? Похоже, что для Neutralino ничего не было, но нашел другое для webpack и т.д., но там конфиги не работали.

я могу позвонить

npm run build

и проект успешно строится, я могу его запустить, но просто не могу отладить. То есть:

./neutralino-linux

работает! Но отладчика нет:(

Пожалуйста, помогите, мне нужен эксперт!

Шаги: 1) Создайте проект NeutralinoJS:

neu create myapp --template ts

2) В VS Code, File -> Open Folder -> Выберите каталог myapp в файловом браузере.

3) В VS Code, Run -> Add Configuration

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "runtimeArgs": ["--harmony"],
            "request": "launch",
            "name": "Launch Webpack",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "sourceMaps": true,
            "program": "${workspaceFolder}/src/app.ts",
            "preLaunchTask": "npm: build",
            "smartStep": true,
            "internalConsoleOptions": "openOnSessionStart",
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ],
            "cwd": "${workspaceFolder}"
        }
    ]
}

4) Измените файл tsconfig.json

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": false,
        "module": "es6",
        "moduleResolution": "node",
        "target": "es6",
        "allowJs": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "types": ["reflect-metadata"],
        "lib": ["es6", "dom"],
        "sourceMap": true
    },
    "include": [
        "./src/**/*"
    ]
}

5) Добавьте '.js' к расширениям в webpack.config.js

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: path.resolve(__dirname, './src/app.ts'),
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: [
          /node_modules/,
          /deps/
        ],
      },
      {
        test: /\.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
        ],
      },

    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, './app/assets'),
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'app.css'
    }),
  ],
};

6) npm install "прочие зависимости"

package.json

{
  "name": "neutralinojs-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack -p --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.4.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "mini-css-extract-plugin": "^0.9.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.4",
    "webpack": "^4.41.4",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "inversify": "^5.0.1",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^6.5.4",
    "rxjs-compat": "^6.5.4",
    "source-map": "^0.7.3",
    "whatwg-fetch": "^3.0.0"
  }
}

Заранее спасибо!

Answer 1

Обновление 2022 с сервером Neutralino v4 и клиентом Neutralino v3 с использованием WebStorm.

Настраивать:

• Откройте и измените "defaultMode": "browser"а также "port": 5006.
• Откройте каталог, содержащий ваш neutralino.config.jsonв Вебсторм.
• Изменить конфигурации > Добавить конфигурацию > + > Отладка JavaScript > URL-адрес http://localhost:5006и браузер Chrome> Хорошо
• Откройте и добавьте это в скрипты:

Применение:

• В package.jsonнажмите кнопку «Выполнить» рядом с "run": "yarn neu run"(или запустить yarn runиз командной строки)
• Отладьте конфигурацию, которую вы сделали в WebWtorm
• Теперь ваши точки останова должны работать!

Проверьте, не сработали ли точки останова:

• Открытым main.js
• Добавлять setInterval(() => { console.log('Logs every second'); }, 1000)
• Поставьте точку останова на console.log
• Перезапустите приложение/отладку
• Точка останова сбита!

Answer 2

Go to app -> settings.json Change the mode to "browser"

Answer 3

Лучшее, что я придумал, это: исполняемый файл nuetralino-linux должен быть вызван (и выполняет некоторую недокументированную магию в фоновом режиме с помощью строительных лесов), а для параметра "mode" в settings.json должно быть установлено значение "browser".

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 5006,
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "debug",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "sourceMaps": true,
            "smartStep": true,
        }
    ]
}

tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558 
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "build",
            "group": "build",
            "problemMatcher": [],
            "label": "build",
            "isBackground": false
        },
        {
            "type": "shell",
            "command": "./neutralino-linux",
            "label": "debug",
            "dependsOn": "build",
            "isBackground": true
        }
    ]
}