Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Acgua opened this issue Aug 19, 2022 · 9 comments
Open

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

Acgua opened this issue Aug 19, 2022 · 9 comments

Comments

@Acgua
Copy link

Acgua commented Aug 19, 2022

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:
image

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:
image

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

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

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
        },     
    ]
}
  1. In Debugger oben unter "Ausführen und debuggen" den neuen Eintrag "Launch" auswählen.
  2. Debugging mit F5 starten
@Acgua
Copy link
Author

Acgua commented Aug 19, 2022

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
Copy link
Collaborator

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
Copy link
Author

Acgua commented Aug 19, 2022

@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
Copy link

oweitman commented Aug 19, 2022

@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
Copy link

dirkhe commented Sep 12, 2022

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
Copy link

LembkeM commented May 14, 2023

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants