VSCode Debugging Problem

Phaser 3
1

I’m having an odd problem trying to debug in VSCode. I’m developing the game with TypeScript, and I have source mapping turned on. I have an Index.ts, Game.ts, Scene.ts and a few others that subclass GameObjects. The problem I’m having is that I’m able to set breakpoints in Index.ts and Game.ts and they work fine, but any of the other files like Scene.ts and the subclassed GameObjects, the breakpoints won’t set and if I hover over them I get a message “Unbound Breakpoint”.

I am able to set breakpoints in all the files just fine in the Chrome debugging tools, but I’d really love to be able to do all the debugging in VSCode.

Any thoughts? I’m glad to add more info like the code in the various files if it’s helpful, but wanted to start with a simpler post if it’s a simple “oh just add this to your launch file” or something. I’m a long time game developer, but very new to Phaser, TypeScript, and all the web dev around it (tons of Unity and custom C++ stuff is what I’ve done previously.)

Thanks for any tips!

2

Hi
What bundler do you use? and show us your launch.json please

3

I’m using webpack. The launch.json is just the default pwa-chrome (I start the webpack devserver with npm start separately.)

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Local Browser",
      "url": "http://localhost:3000/?debugger=true",
      "webRoot": "${workspaceFolder}/src/"
    }
  ]
}
4

Here’s what i use with webpack, on ubuntu with Chromium. I like to debug with vscode too, but the configuration is often tedious…

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "runtimeExecutable": "/usr/bin/chromium-browser",  // <-- probably not needed for you
            "runtimeArgs": [
                "--new-window",
                "--remote-debugging-port=9222",
                "-user-data-dir=\"/${workspaceFolder}/DevProfile\"",
                "--disable-background-networking"
            ]
        }
    ]
}
5

Thanks. Alas, no love with this configuration. I’ve pretty much given up at this point and just debug in the Chrome tools. Not the end of the world by any means.