CEP Debugging in vscode

CEP Debugging in vscode.md

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)