VSCode (Win10): Debugging/Breakpoints nur unterhalb .dev-server/

[Acgua]

Siehe Forum-Beitrag von OliverIO: https://forum.iobroker.net/post/826766
Bei mir verhält sich das auch so, daher öffne ich jetzt mal dieses Issue.

Issue

VS Code erkennt die Breakpoints nur in <Adapter-Verzeichnis>\.dev-server\default\node_modules\iobroker.<Adapter-Name>\main.js und nicht in <Adapter-Verzeichnis>\main.js

Aufgrund "stopOnEntry": true in der launch.json hält bei "F5" das Debugging hier:

main.js-Pfad: C:\iobroker\DEV1\node_modules\ioBroker.mytest03-js\.dev-server\default\node_modules\iobroker.mytest03-js\main.js

Breakpoints werden ebenso erkannt:

Die C:\iobroker\DEV1\node_modules\ioBroker.mytest03-js\main.js wird aber ignoriert und Breakpoint wie hier auf Zeile 39 gesetzt nicht erkannt.

Diagnose Breakpoint Problems in VS Code, also Ctrl+Shift+P > "Debug: Diagnose Breakpoint Problems", zeigt:

Diagnose Breakpoint Problems, "What scripts and sourcemaps are loaded" listet außerdem ausschließlich Dateien unterhalb von C:\iobroker\DEV1\node_modules\ioBroker.mytest03-js\.dev-server\default\

Verwendetes System und Setup

System:

• Entwicklungsrechner: Windows 10 (alles lokal, nichts remote)
• Standard-ioBroker wurde installiert unter c:\ioBroker\DEV1\
• Visual Studio Code wird verwendet.

Vorgehensweise:

1. Standard-ioBroker zur Sicherheit gestoppt: Öffnen der ioBroker-Konsole (z.B. mit [WIN+s > iob > Enter]).
   In der Konsole: iob stop ausführen, und nach Ausführung Konsole schließen.
2. Neue Windows-Konsole z.B. mit [WIN+s > cmd > Enter] öffnen und cd C:\iobroker\DEV1\node_modules ausführen.
3. npx @iobroker/create-adapter ausführen, "typische" Einstellungen, Sprache: JavaScript, Name: mytest03-js (d.h. Adapter-Pfad = C:\iobroker\DEV1\node_modules\ioBroker.mytest03-js). Option "dev-server" aktiviert.
4. VS Code öffnen, Menü: "Datei/Ordner öffnen...", Verzeichnis C:\iobroker\DEV1\node_modules\ioBroker.mytest03-js wählen.
5. Terminal öffnen (sollte jetzt im o.g. Pfad sein, falls nicht: cd C:\iobroker\DEV1\node_modules\ioBroker.mytest03-js ausführen).
6. In Terminal dev-server watch --noStart ausführen.
7. Debugger öffnen (CTRL+SHIFT+d), Oben neben "Ausführen und Debuggen" auf Zahnrad, "node" wählen, und in der nun neu erzeugten launch.json den bestehenden Code mit Folgendem überschreiben:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "request": "launch",
            "type": "node",
            "args": ["--debug", "0"],
            "stopOnEntry": true, // - break immediately when the program launches
            "program": "node_modules/iobroker.mytest03-js/main.js", // executable or file to run when launching the debugger
            "cwd": "${workspaceFolder}/.dev-server/default", // current working directory for finding dependencies and other files
            "skipFiles": ["<node_internals>/**"],
            "outputCapture": "std", // https://github.com/ioBroker/dev-docs/issues/35
        },     
    ]
}

8. In Debugger oben unter "Ausführen und debuggen" den neuen Eintrag "Launch" auswählen.
9. Debugging mit F5 starten

[Acgua]

Ich bin mir noch nicht mal sicher, ob das überhaupt ein "Bug" ist, oder ob beim Entwickeln mit dem dev-server das Debugging mit Breakpoints immer unterhalb <Adapter-Verzeichnis>\.dev-server\default\node_modules\iobroker.<Adapter-Name>\ stattfinden sollte, während man den Code selbst unterhalb <Adapter-Verzeichnis>\, außerhalb von .dev-server\, entwickelt.

Die Doku geht wohl nicht näher darauf ein: https://github.com/ioBroker/dev-server#visual-studio-code

[Apollon77]

Naja effektiv kopiert der dev-Server den Adapter genau in das genannte Verzeichnis ... und dort wird es ausgeführt ... es geht also ggf nicht anders ... odert kann man dem Adater das irgendwie "Mappen"?

[Acgua]

@Apollon77 - das dachte ich mir dann auch, als ich das so zusammenfasste. Ausführung müsste ja dann unter <Adapter-Verzeichnis>\main.js zum Debuggen, aber das entspricht ja nicht dem Konzept vom dev-server, oder?

Falls bestätigt, ergänze ich die Doku unter https://github.com/ioBroker/dev-server#visual-studio-code entsprechend, also dass Debugging/Breakpoints unterhalb <Adapter-Verzeichnis>\.dev-server\default\node_modules\iobroker.<Adapter-Name>\ zu erfolgen hat, und nicht <Adapter-Verzeichnis>\, während Entwicklung weiterhin unter <Adapter-Verzeichnis>\main.js etc. zu machen ist (und Entwicklung/Coding keinesfalls unter <Adapter-Verzeichnis>\.dev-server\.

[oweitman]

@Apollon77
kann man dem Adater das irgendwie "Mappen"?

Das Mappen erfolgt über die erzeugten sourcemaps.
Aber genau da scheint der Wurm drin zu sein

Evtl sollten wir Mal Versionen und Einstellungen
Aller Komponenten zwischen dem wo es funktioniert und wo nicht vergleichen

[dirkhe]

Ich habe das gleiche Problem unter Linux, Folgendermassen funktioniert es bei mir:

Terminal 1
dev-server run
Terminal 2
node --inspect=0.0.0.0:9229 .dev-server/default/node_modules/<Adapter-name>/ --logs --force
In VS code launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "attach to ioBroker-Adapter",
      "address": "127.0.0.1",
      "port": 9229,
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "${workspaceFolder}/.dev-server/default/node_modules/${workspaceFolderBasename}",
      "smartStep": true,
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
}

Wichtig! Bei Verwendung von workspaceFolderBasename muß das Quellverzeichnis klein geschrieben werden, also nicht ioBroker.Xxx sondern iobroker.xxx

Ich habe gerade festgestellt, dass auch dev-server watch funtioniert und dann ohne Terminal 2 direkt attach der o.g. config aufzurufen

[LembkeM]

Hi,
ich habe das im VSCode versucht.
Ich sehe im Terminal auch, dass der dev-server gestartet ist und die Ports sind weitergeleitet.

Ich bekomme die Meldung
Debugger listening on ws://127.0.0.1:9229/57e27cb1-024b-4002-8f26-b32de90af3ae
Und dann
Debugger attached.

Allerdings kann ich keinen Breakepoint setzten.
Den dev-server kann ich auf meinem Desktop über die url http://localhost:8081/#tab-intro erfolgreich aufrufen.
Also das sollte passen.

[stevenengland]

Ich habe das gleiche Problem unter Linux, Folgendermassen funktioniert es bei mir:

Terminal 1 dev-server run Terminal 2 node --inspect=0.0.0.0:9229 .dev-server/default/node_modules/<Adapter-name>/ --logs --force In VS code launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "attach to ioBroker-Adapter",
      "address": "127.0.0.1",
      "port": 9229,
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "${workspaceFolder}/.dev-server/default/node_modules/${workspaceFolderBasename}",
      "smartStep": true,
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
}

Wichtig! Bei Verwendung von workspaceFolderBasename muß das Quellverzeichnis klein geschrieben werden, also nicht ioBroker.Xxx sondern iobroker.xxx

Ich habe gerade festgestellt, dass auch dev-server watch funtioniert und dann ohne Terminal 2 direkt attach der o.g. config aufzurufen

dev-server debug --wait funktioniert auch. Vorteil hierbei ist u.a. dass der Adapter mit der Initiatalisierung wartet, bis man einen Debugger attached, also z. B. einen, den man in launch.json konfiguriert hat.

[stevenengland]

Bei AlCalzone habe ich darüber hinaus noch diesen Ansatz gefunden, der bei mir funktioniert:

{
	"name": "Debug TS adapter",
	"port": 9229,
	"request": "attach",
	"skipFiles": [
		"<node_internals>/**"
	],
	"type": "node",
	"resolveSourceMapLocations": [
		"${workspaceFolder}/**",
		// only exclude node_modules from the workspace folder
		// If we exclude node_modules from .dev-server/..., we don't get sourcemaps
		"!${workspaceFolder}/node_modules/**"
	],
	"sourceMapPathOverrides": {
		"../src/*": "${workspaceFolder}/src/*"
	}
}

[stevenengland]

Jetzt noch für interessierte folgende Erweiterung: Mit der Konfiguration (beide funktionieren, daher lege ich beide auf Halde, falls einmal mit einer davon etwas nicht funktionieren sollte)

• startet der Adapter (dev-server debug --wait) als Hintergrundprozess
• wird der Debugger automatisch an den Adapter-Prozess gehangen, sobald dieser aufnahmefähig ist
• wird der Adapter-Prozess automatisch mit beendet, wenn man den Debug-Prozess beendet.

// launch.json
{
      "type": "node",
      "request": "attach",
      "name": "Attach to ioBroker Adapter (1)",
      "address": "127.0.0.1",
      "port": 9229,
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "${workspaceFolder}/.dev-server/default/node_modules/iobroker.gjsm/",
      "smartStep": true,
      "skipFiles": ["<node_internals>/**"],
      "preLaunchTask": "preLaunchTask_startDevServer", // Start dev server before attaching a debugger to it
      "postDebugTask": "postDebug_KillAll", // Kill all tasks after debugging
      "continueOnAttach": true // This is needed to prevent the debugger from stopping on the first line
    },
    {
      "name": "Attach to ioBroker Adapter (2)",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "node",
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        // only exclude node_modules from the workspace folder
        // If we exclude node_modules from .dev-server/..., we don't get sourcemaps
        "!${workspaceFolder}/node_modules/**"
      ],
      "sourceMapPathOverrides": {
        "../src/*": "${workspaceFolder}/src/*"
      },
      "preLaunchTask": "preLaunchTask_startDevServer", // Start dev server before attaching a debugger to it
      "postDebugTask": "postDebug_KillAll", // Kill all tasks after debugging
      "continueOnAttach": true // This is needed to prevent the debugger from stopping on the first line
    }

// tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "devserver:debug", // <-- from package.json <-- scripts: dev-server debug --wait
      "label": "preLaunchTask_startDevServer",
      "isBackground": true,
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "problemMatcher": {
        "pattern": {
          "regexp": "^$"
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "devserver:debug",
          "endsPattern": "Debugger is now waiting on process id"
        }
      }
    },
    {
      "label": "postDebug_KillChoice",
      "type": "process",
      "command": [
        "${command:workbench.action.tasks.terminate}",
        "${command:workbench.action.acceptSelectedQuickOpenItem}"
      ]
    },
    {
      "label": "postDebug_KillAll",
      "command": "echo ${input:terminate}",
      "type": "shell",
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "terminate",
      "type": "command",
      "command": "workbench.action.tasks.terminate",
      "args": "terminateAll"
    }
  ]
}