Debugging JavaScript or TypeScript with VSCode

It is now possible to debug running TypeScript and JavaScript projects.

Pre-Requisites

You will need to set up the following in order to debug a TypeScript or JavaScript project

• Install Visual Studio Code (See also Using TypeScript with External Editors)
• Install the Duktape Debugger from the Visual Studio Code Marketplace

Setting up VSCode for debugging

• Open a new window in VSCode and load the folder with your project root
• You will need to modify your tasks.json file to launch the player as follows, replacing the command path with the path to your install of the Atomic Editor.

If you don't already have a tasks.json in your project, you can create one by typing Tasks: Configure Task Runner in the Command Palette.

{
    "version": "0.1.0",
    "tasks": [
      
        {
            "taskName": "Debug Atomic Player",
            "command": "PATH TO YOUR AtomicEditor Program"
            // eg: "${env.HOME}/AtomicEditor/AtomicEditor.app/Contents/MacOS/AtomicEditor",
            "args": [
                "--player",
                "--debug",
                "--project",
                "${workspaceRoot}"
            ],
            "isBackground": true
        },
        {
            "taskName": "Lauch Atomic Player",
            "command": "PATH TO YOUR AtomicEditor Program",
            // eg: "${env.HOME}/AtomicEditor/AtomicEditor.app/Contents/MacOS/AtomicEditor",
            "args": [
                "--player",
                "--project",
                "${workspaceRoot}"
            ],
            "isBackground": true
        }
    ]
}

• Next you will need to set up a debugger configuration in launch.json
  • In the Command Palette, type Debug: Open launch.json
  • Select Duktape.js as the environment
  • Update the generated file as follows

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach",
            "type": "duk",
            "request": "attach",
            "address": "localhost",
            "port": 9091,
            "localRoot": "${workspaceRoot}/Resources",
            "sourceMaps": false,
            "outDir": "${workspaceRoot}/Resources",
            "stopOnEntry": false,
            "debugLog": true
        }
    ]
}

If you are coding in TypeScript and want to debug the original source files instead of the transpiled JavaScript, set "sourceMaps": true and make sure you turn on sourcemaps in the tsconfig.json:

...
        "inlineSourceMap": false,
        "sourceMap": true
...

Debugging your project

• Launch the editor task ( ctrl/cmd+shift+p > Tasks: Run Task) then select the "Debug Atomic Player" task
• go to debug in vscode and attach (the player will be paused waiting until you attach)
• now you can pause, set breakpoints, view variables, etc.

Set up a shortcut to your task list by updating your keyboard shortcuts in VSCode and adding:

    {
        "key": "shift+cmd+t",
        "command": "workbench.action.tasks.runTask"
    }

This allows you to type shift+cmd+t and a list of all tasks in your tasks.json will appear for you to select from.