search

ioBroker / dev-server

MIT License
14 stars 9 forks source link

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

Open Acgua opened 2 years ago

Acgua commented 2 years ago

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:

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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 commented 1 year ago

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 commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

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)

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