Setup
- in
.vscode
folder in your project root, create a filelaunch.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 taskport
with the debug port you're using in your.debug
filewebRoot
with the path to the mainindex.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)