CEP Debugging in vscode

Setup

in .vscode folder in your project root, create a file launch.json

{
  "version": "0.1.0",
  "configurations": [
    {
      "name": "[Your Tool] Debugger",
      "type": "chrome",
      "request": "attach",
      "port": 8092,
      "webRoot": "${workspaceRoot}/dist/panel/index.html",
      "sourceMapPathOverrides": {
        "../../../*": "${workspaceRoot}/*"
      }
    }
  ]
}

Replace:

name with whatever you want to call the debugger task
port with the debug port you're using in your .debug file
webRoot with the path to the main index.html page from the root folder of your project

To run

launch host app
launch host panel
in vscode, go to the Debugger tab, choose the name of the task specified, and hit 'play' to start the debugging environment

To use

any console output that would have been visible in chrome debugger tools is now output to vscode's Debug Console
breakpoints and step-through now let you work in the code directly
you can navigate the data browser & call stack as you would expect. Yay, debugging!

Caveats

It's been a while since I've used this, and I think there are probably issues if you're using any sort of transpiler or concatenation.

Although if you're outputting sourcemaps it should Just Work (for the www components, not extendscript)

zlovatt/CEP Debugging in vscode.md