How do I debug Neutralino in VS Code?

Question

I'm new to NuetralinoJS and web dev in general, so please go easy on me. I tried following the tutorial here with some slight variations:

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

And find "Step 5 - Debugging" to be too vague to be helpful. How would I go about "Chang[ing] neutralino mode in to browser?" Would someone be able to fix my launch.json? There didn't seem to be anything for Neutralino, but found other for webpack, etc, but the configs there didn't work.

I can call

npm run build

and the project builds successfully, I can run it, but just can't debug it. That is:

./neutralino-linux

works! But no debugger is attached :(

Please help, I need an expert!

Steps: 1) Generate NeutralinoJS project:

neu create myapp --template ts

2) In VS Code, File -> Open Folder -> Select 'myapp' directory in file-browser

3) In 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) Modify the tsconfig.json file

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) Add '.js' to extensions in 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 "other dependencies"

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

Thanks in advance!

Answer 1

Best I've come up with is: nuetralino-linux executable needs to be invoked (and does some undocumented magic in the background with the scaffolding) and "mode" in settings.json must be set to "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
        }
    ]
}

Answer 2

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

Answer 3

2022 update with Neutralino server v4 and Neutralino client v3 using WebStorm.

Setup:

• Open neutralino.config.json and change "defaultMode": "browser" and "port": 5006.
• Open the directory containing your neutralino.config.json in WebStorm.
• Edit configurations > Add configuration > + > JavaScript Debug > URL http://localhost:5006 and Browser Chrome > Ok
• Open package.json and add this to scripts: "run": "yarn neu run"

Usage:

• In package.json click the Run button beside "run": "yarn neu run" (or run yarn run from command line)
• Debug the configuration you made in WebWtorm
• Your breakpoints should now work!

Test if breakpoints get hit:

• Open main.js
• Add setInterval(() => { console.log('Logs every second'); }, 1000)
• Place a breakpoint on the console.log
• Restart app / debugging
• The breakpoint gets hit!