How do you debug the javascript of a vapor project on Visual Studio Code?

Related Projects Vapor
, , ,
1

Hi there!

I started the development of a website with swift and vapor some time ago, after some time I started introducing more javascript and found a bit annoying that I have to debug it always on the browser dev tools.

I've been trying to create a configuration on the launch.json of vscode to try to use the vscode debugger instead, but with no success in that regard, I always get an error binding the breakpoints.

As you see here the break points are not matching the code:

SCR-20241218-niqy
SCR-20241218-niqy1376×300 28.2 KB

When I click on the troubleshoot link, I get to this, it seems it cannot match the code between the url and the file path.

SCR-20241218-nidm
SCR-20241218-nidm2134×624 80.3 KB

I could get the source map overrides to work either:

SCR-20241218-njna
SCR-20241218-njna1650×795 83.1 KB

Hopefully someone knows more than me and can help here.

2

It seems I found the solution!

To make this work will need a tasks in VScode to run the App and a launch option to start a browser (supported by VScode) on debug mode to be able to bind breakpoints for JavaScript.

First add a task to your tasks.json in VScode like this one.
What's important here to make this task run in background is the problemMatcher configuration property.

It just needs some configuration present to allow the background execution. Under the problemMarcher property make sure you have defined pattern with regexp inside and the background with all its properties defined.

It is important to for the beginsPattern and the endsPattern to match the output of your swift run command, meaning if you have changed the product name from App to something else you will need to adjust the messages.

{
  "version": "2.0.0",
  "tasks": [
    ...,
    {
      "label": "swift: Run Debug App in background",
      "detail": "Runs the executable in Background",
      "type": "swift",
      "args": ["run"],
      "env": {},
      "disableTaskQueue": true,
      "dontTriggerTestDiscovery": true,
      "showBuildStatus": "swiftStatus",
      "group": "none",
      "isBackground": true,
      "problemMatcher": {
        "pattern": {
          "regexp": "."
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "^\\s*swift build --product App.*",
          "endsPattern": "^\\s*Build of product 'App' complete!.*"
        }
      }
    }
  ]
}

Now let's configure a launch option to be able to debug JavaScript in our vapor project.

{
  "version": "2.0.0",
  "configurations": [
    ...,
    {
      "name": "Debug in Chrome",
      "request": "launch",
      "type": "chrome",
      "runtimeArgs": [
        "--remote-debugging-port=9222",
        "--user-data-dir=${workspaceFolder:coachingApp}/build/debug/remote-debug-profile"
      ],
      "url": "http://localhost:8080/",
      "webRoot": "${workspaceFolder:coachingApp}/Public",
      "preLaunchTask": "swift: Run Debug App in background",
      "sourceMapPathOverrides": {
        "http://localhost:8080/": "${workspaceFolder:coachingApp}/Public"
      }
    }
  ]
}

Now everything is ready! let's hit debug and check it out.

First add a breakpoint to any JavaScript file you want to debug.

SCR-20250307-kuov
SCR-20250307-kuov1424×160 8.83 KB

Then go to your debug panel and make sure you have selected the launch option "Debug in Chrome", and run clicking on the play button.

SCR-20250307-kuqe
SCR-20250307-kuqe722×1780 38.9 KB

And now see your breakpoints being hit!

SCR-20250307-kzqo
SCR-20250307-kzqo1454×174 17.1 KB

SCR-20250307-kzsg
SCR-20250307-kzsg712×914 50.9 KB

1 Like
3

Hey there!

Actually I just realised this solution does not work as I wanted to. Yes you get JavaScript debug capabilities in a vapor project but you will not be able to debug swift at the same time.

Why? The background task that runs to allow us start the browser and debug JS is not attached to lldb to VScode.

No worries! I found the solution and it is more simple than I thought initially. We'll be needing just ONE launch configurations and NO task to do this.

So add or update your lunch.json configurations like this:


      "name": "Debug App",
      "type": "lldb",
      "request": "launch",
      "sourceLanguages": ["swift"],
      "args": [],
      "cwd": "${workspaceFolder}",
      "program": "${workspaceFolder}/.build/debug/App",
      "preLaunchTask": "swift: Build Debug App",
      "serverReadyAction": {
        "pattern": "Server started on .*:([0-9]+)",
        "uriFormat": "http://localhost:%s",
        "action": "debugWithChrome",
        "webRoot": "${workspaceFolder}/Public"
      }
    }

Now you will be able to debug swift at the same time as JavaScript!

Enjoy!

1 Like