Wednesday, May 27, 2020

Debugging TypeScript Phaser Apps Server and Client-side Using VS Code

I’m using the Phaser game development platform to teach my kids some video game design and programming concepts (I previously used LEGO to draw my daughter into building game sprites). As a new Phaser user, I'm finding there isn't enough writing out there about using the Phaser 3 HTML5 game development platform with TypeScript, so I feel I should add my 0.02c. My first contribution is about debugging with breakpoints in Phaser and Visual Studio Code (VSCode).

Note: You can read more about setting up VSCode for TypeScript debugging on the Microsoft site, but you will need to make sure you have "sourceMap": true in your tsconfig.json file.

Most likely, if you're using Phaser for a multi-player game, you're probably using Node.js and Express to fire up a server for the Phaser client-side code. I found this complicated debugging with breakpoints in VS Code, and I haven't been able to get a single configuration to hit breakpoints in both the server and client-side code. This makes sense, but I still thought it would be handled more easily.

If I launch a debugger for the server, any breakpoints I've set in my client-side code show "Breakpoint set but not yet bound" or the more direct error, "Breakpoint ignored because generated code not found (source map problem?)" My workaround is to launch the debugger depending on which breakpoints I need.

Server-side debugging

To debug the server, use VSCode attach to process and choose the dist/server.js process.

VS Code server-side breakpoint Geeklit Blog


Client-side debugging

To debug the client (uses Visual Studio Code Chrome debugger extension). Use VSCode to launch the debugger with the Launch client-side task.

Here is the entire launch.json file that supports both client and server-side debugging with breakpoints: 

{
    // Use IntelliSense to learn about possible 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 client-side: localhost:8080",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080/index.html",
            "webRoot": "${workspaceFolder}/dist/client"
        },
        {
            "name": "Attach to Process dist/server.js",
            "type": "node",
            "request": "attach",
            "processId": "${command:PickProcess}",
            "port": 8080
        }
    ]
}

Tuesday, May 19, 2020

Running NPM in Windows Terminal Ubuntu profile

I got some nasty errors when I tried to use NPM and Node.js in the new Windows Terminal for Windows 10 (which BTW has a cool split-pane feature that might just make it my new goto terminal).

The errors looked like this:

 not foundram Files/nodejs/npm: 3: /mnt/c/Program Files/nodejs/npm:
: not foundram Files/nodejs/npm: 5: /mnt/c/Program Files/nodejs/npm:
/mnt/c/Program Files/nodejs/npm: 6: /mnt/c/Program Files/nodejs/npm: Syntax error: word unexpected (expecting "in")

Here's the fix

$ sudo apt-get update
$ sudo apt-get install -y nodejs
$ sudo apt-get install build-essential
$ sudo apt get install npm
**CLOSE AND REOPEN TERMINAL**

I found it here: https://github.com/microsoft/WSL/issues/1512

BTW -- example split-pane keys: Alt+Shift+-, Alt+Shift+= will split horizontally and vertically.