如何在VS Code中调试Neutralino？

Question

我是NuetralinoJS和web dev的新手，所以请不要对我太苛刻。我尝试在这里遵循教程，但有一些细微的变化：

https://neutralino.js.org/docs/#/gettingstarted/firstapp

并且发现“第五步-调试”太含糊了，没有什么帮助。我该如何处理“将neutralino模式改为浏览器？”有没有人能修好我的launch.json？似乎没有任何东西为Neutralino，但找到了其他为webpack等，但那里的配置不起作用。

我可以打电话给你

npm run build

如果项目构建成功，我可以运行它，但不能调试它。这就是：

./neutralino-linux

成功了！但是没有附加调试器:(

请帮帮忙，我需要一个专家！

步骤: 1)生成NeutralinoJS工程：

neu create myapp --template ts

2)在VS代码中，文件->打开文件夹->在文件浏览器中选择'myapp‘目录

3)在VS代码中，运行->添加配置

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安装“其他依赖项”

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

我想出的最好的方法是: nuetralino-linux可执行文件需要被调用(并且在后台用脚手架做一些未公开的魔术)，settings.json中的“模式”必须设置为“浏览器”。

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
        }
    ]
}

Answer 2

转到app -> settings.json将模式更改为"browser“