I have downloaded Visual Studio Code for Mac, installed the ExtendScript and have used it to debug a few stand-alone .jsx scripts. So far so good. However, I cannot figure out how to debug an extension. I'm using a copy of the PhotoshopEvents CEP panel from the Samples folder (let's call it myPSEvents) and I'm modifying it. My workflow right now is:
Change something in myPSEvents
Switch to Photoshop 2019
Close the myPSEvents panel
Open the myPSEvents panel
Check the results and either go back to step 1 or, if it's a right old mess, go to step 6
Open Chrome, do the localhost:8011 and check their debugger / DOM inspector etc. (my HTML is a bit rusty)
Obviously, I would like to do the debugging in VSCode, but I can't get it to work. I suspect it has to do with the configurations in launch.json.
I have added two folders to my workspace. The first is the standalone scripts folder: ~/Documenten/Adobe Scripts. The launch.json looks like this:
"configurations": [
{
"type": "extendscript-debug",
"request": "launch",
"name": "Some tests",
"program": "${workspaceFolder}/PS_tests.jsx",
"stopOnEntry": false
},
This works fine. I can debug the script, set breakpoints, etc.
The second folder in my workspace is the CEP folder: ~Library/Application Support/Adobe/CEP/extensions. It contains myPSEvents, a modified copy of PhotoshopEvents extension. This launch.json looks like this:
"configurations": [
{
"type": "extendscript-debug",
"request": "launch",
"name": "myPSEvents Panel",
"program": "${workspaceFolder}/myPSEvents/",
"stopOnEntry": false
},
{
"type": "extendscript-debug",
"request": "launch",
"name": "PhotoshopEvents 'Your first panel'",
"program": "${workspaceFolder}/PhotoshopEvents/client/index.js",
"stopOnEntry": false
},
{
"type": "extendscript-debug",
"request": "launch",
"name": "PhotoshopEvents Original",
"program": "${workspaceFolder}/PhotoshopEvents/js/main.js",
"stopOnEntry": false
}
]
Trying to use these configurations results in various errors:
Configuration PhotoshopEvents 'Your First Panel' (${workspaceFolder}/PhotoshopEvents/client/index.js)
Starting /Users/me/Library/Application Support/Adobe/CEP/extensions/PhotoshopEvents/client/index.js in target: photoshop-130.064 and engine: main.
Runtime Error: Error Code# 22: CSInterface heeft geen constructor @ file '~/Library/Application%20Support/Adobe/CEP/extensions/PhotoshopEvents/client/index.js' [line:2, col:1]
Configuration PhotoshopEvents Original: (${workspaceFolder}/PhotoshopEvents/js/main.js)
alert box saying: (#15)Cannot execute script in target engine 'main'!
no problems reported in the Problems section of the VSCode console
The same (#15) error I got for the myPSEvents panel configuration, until I shortened the program path to ${workspaceFolder}/myPSEvents/". VSCode then no longer threw errors, but did no debugging either. It does activate Photoshop, but that's it: breakpoints are ignored, an undeclared variable used as parameter, a missing semi-colon at the end of a line of code -- VSCode could not care less.
My question then: is VSCode capable of debugging CEP extensions? If so, what am I doing wrong? If not, could one use it to debug parts of it, say the .js / .jsx communication?
... View more