MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    How to Debug with Visual Studio Code

    Scheduled Pinned Locked Moved Forum
    7 Posts 2 Posters 1.3k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ViDiBiV Offline
      ViDiBi
      last edited by

      Hi everybody!

      I’m very new to the MagicMirror Project but wanted to develop my own Module, since I got everything running on my Pi :-)

      Now I’d like to use Visual Studio Code to debug existing Modules and then develop my own module. Therefore I need a bit of assistance:

      I copied the MagicMirror Files to a folder and was able to run “npm install” with Power Shell and used this launch.json which I found in the forum to get it run in electron brwoser:

      {
          // Use IntelliSense to learn about possible Node.js debug attributes.
          // Hover to view descriptions of existing attributes.
          // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
          "version": "0.2.0",
          "configurations": [
              {
                  "name": "Launch",
                  "type": "node",
                  "request": "launch",
                  "program": "${workspaceRoot}\\js\\electron.js",
                  "stopOnEntry": false,
                  "args": [],
                  "cwd": "${workspaceRoot}",
                  "runtimeExecutable": "${workspaceRoot}\\node_modules\\.bin\\electron",
                  "runtimeArgs": [
                      ".",
                      "--enable-logging"
                  ],
                  "env": {},
                  "console": "integratedTerminal",
                  "sourceMaps": false,
                  "outDir": null
              },
              {
                  "name": "Attach",
                  "type": "node",
                  "request": "attach",
                  "port": 5858,
                  "sourceMaps": false,
                  "outDir": null
              }
          ]
      }
      

      Do I need do do anything else because if I add only the clock module it says that the node helper is missing for that module…

      No helper found for module: clock.
      

      Can anyone give me some kind of how to do this?

      Thank you so much!

      Victor

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @ViDiBi
        last edited by sdetweil

        @ViDiBi clock module doesn’t use a node_helper. not required.

        I haven’t been able to use vscode to debug mm modules myself. the browser side still has to use the browser debugger (ctrl-shift-i toggle on/off)

        see my sample module, https://github.com/sdetweil/SampleModule, which implements the mm module spec.
        and uses the module/helper communications, config, timers, and selective display of content

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • ViDiBiV Offline
          ViDiBi
          last edited by

          @sdetweil Thank you for your help :-) I’ll have a look at your module :-)

          There’s one more thing I was trying: I made a breakpoint in the getDom area of a module and if won’t stop in debugging at that point :-( Is this a bug or just not possible?

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @ViDiBi
            last edited by sdetweil

            @ViDiBi if you use the browser debugger it will. I have never been able to get the vscode debugger to work on this app

            I REALLY want to be able to debug from my desktop system to the mm system, as I usually don’t have keyboard/mouse on mm system.

            so far, the ability to use another browser to open mm webpage on my desktop chrome and use browser debugger has worked. but not all apps provide that remoting browser capability.

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil
              last edited by

              but the browser debugger doesn’t work on node_helpers, as they don’t run in browser of course

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • ViDiBiV Offline
                ViDiBi
                last edited by

                But the funny thing is, that within the node_helpers the breakpoint works but in the MMM-ModuleName.ja it doesn’t :-(

                S 1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @ViDiBi
                  last edited by

                  @ViDiBi yeh, you are debugging in process for the node_helper, and not for the browser…

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  • First post
                    Last post
                  Enjoying MagicMirror? Please consider a donation!
                  MagicMirror created by Michael Teeuw.
                  Forum managed by Sam, technical setup by Karsten.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy