Skip to main content
e_v72938608
e_v72938608
Inspiring
August 12, 2019
Answered

How to debug a Photoshop CEP extension with VSCode ExtendScript debugger

  • August 12, 2019
  • 3 replies
  • 14642 views

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:

  1. Change something in myPSEvents
  2. Switch to Photoshop 2019
  3. Close the myPSEvents panel
  4. Open the myPSEvents panel
  5. Check the results and either go back to step 1 or, if it's a right old mess, go to step 6
  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?

    This topic has been closed for replies.
    Correct answer e_v72938608

    @sberic "program": "{$workspaceFolder}/PhotoshopEvents/host/ps.jsx" Thanks, that's good to know. It doesn't actually say anywhere what the configuration should point at and when I changed it, VSCode immediately started complaining again it couldn't find host/ps.jsx -- which is why I started experimenting with other configurations. However, when I restarted the whole shebang, and what with having completely uninstalled the ExtendScript Toolkit, something interesting happened:

    That's the first time I've seen a variable in the debugger. Anyway, it seems there's an issue now with the debugging level -- a line I inherited from PhotoshopEvents.

    3 replies

    sberic
    sberic
    Legend
    August 12, 2019

    e.v72938608​ First off, your confusion/frustration is not your fault. The current version of the VSCode ExtendScript Debugger (ESD) was not built with CEP extensions in mind. That said, it is possible to get limited CEP extension debugging, provided you follow a very specific setup.

    Specifically, the ESD was built to target a simple ExtendScript script that you send to a host application (e.g. Photoshop) to run and complete. This sounds like what your first PS_test.jsx script is (and likely explains why it works okay). However, your second project appears to be based off of the PhotoshopEvents CEP Sample project. The debugging experience here is "asynchronous" insofar as the code you wish to debug isn't triggered when you hit "Start Debugging" but sometime later when you cause the code to run via some interaction with the panel. This thread outlines how the ESD is implemented [at a high level] and outlines how you can get it to cooperate with such a workflow to a limited extent.

    However! Part of your problem is that your three configurations are not pointed at ExtendScript files, but one folder and two JavaScript files. The ESD cannot be used for JavaScript debugging. For that you will either need the cefclient (available here) or a Chrome browser with the correct localhost configuration. The PProPanel sample has good instructions for setting up the HTML/JavaScript-side debugging experience.

    That said, the Chrome/cefclient debugging cannot target ExtendScript (.jsx) files. That is what the ESD is for. To that end, you have to specify an ExtendScript file in the launch configuration's "program" field. For the default PhotoshopEvents CEP panel, this would look like:

    "program": "{$workspaceFolder}/PhotoshopEvents/host/ps.jsx",

    The main takeaway here is that you need to target the correct scripts with the correct debugger:

    1. JavaScript: Chrome or cefclient
    2. ExtendScript: VSCode ExtendScript Debugger (ESD) or ExtendScript Toolkit (ESTK)

    Unfortunately, due to the current architecture/implementation of the ESD it is not possible to set up a Compound Launch Configuration in VSCode to get a full debugging experience.

      e_v72938608
      e_v72938608AuthorCorrect answer
      Inspiring
      August 12, 2019

      @sberic "program": "{$workspaceFolder}/PhotoshopEvents/host/ps.jsx" Thanks, that's good to know. It doesn't actually say anywhere what the configuration should point at and when I changed it, VSCode immediately started complaining again it couldn't find host/ps.jsx -- which is why I started experimenting with other configurations. However, when I restarted the whole shebang, and what with having completely uninstalled the ExtendScript Toolkit, something interesting happened:

      That's the first time I've seen a variable in the debugger. Anyway, it seems there's an issue now with the debugging level -- a line I inherited from PhotoshopEvents.

      sberic
      sberic
      Legend
      August 12, 2019

      e.v72938608​ The following line:

      $.level = 2; debugger;

      is a compressed version of this:

      $.level = 2;  // Puts this ExtendScript "Engine" into Full Debug Mode.
      debugger;     // Causes an attached/listening debugger to pause on this line.

      The level property of the Dollar ($) object adjusts the current debugging level. A value of 2 means "full debug mode".

      The debugger statement triggers the debugger.

      It is important to recall that ExtendScript is a highly customized version of ECMAScript 3 (a spec from which older JavaScript versions are also derived). The debugger statement is just one of those pieces of the ExtendScript language that is shared with [older] JavaScript.

      You can remove that line (or those lines as shown above) without any issue. That is simply there to drop you into a debug session if ESTK is configured (or if you have ESD setup in juuuuuust the right way).

        Justin Taylor-Hyper Brew
        Community Expert
        Justin Taylor-Hyper BrewCommunity Expert
        Community Expert
        August 12, 2019

        Try launching your app from the VS Code ExtendScript debugger instead of attaching to an existing process, I've had more luck with that.

        Sometimes strict syntax errors can throw ambiguous error messages as well. Try testing with a basic file ("alert(123);" for example) till you get it working and then go from there.

        Also, make sure you're debugging our CEP/JS side of your extension in Chrome Dev Tools and only your ExtendScript side in VS Code. I know some people have set up both in VS Code, but keeping it separate is a lot more clear when you're getting stuff set up initially.

        e_v72938608
        e_v72938608Author
        Inspiring
        August 12, 2019

        @justintaylor "Also, make sure you're debugging our CEP/JS side of your extension in Chrome Dev Tools and only your ExtendScript side in VS Code. I know some people have set up both in VS Code, but keeping it separate is a lot more clear when you're getting stuff set up initially." Uhm, I'm not sure what you mean. I've added the extensions folder to the workspace, that includes the .html and .js code. As for debugging in Chrome, no idea how that thing works either. Is there any way I could do this in Xcode?

        Justin Taylor-Hyper Brew
        Community Expert
        Justin Taylor-Hyper BrewCommunity Expert
        Community Expert
        August 12, 2019

        Nope, don't use Xcode, Chrome Dev tools come with CEP panels since they're essentially Chrome browsers (built off of the CEF framework).

        You need to enable playerDebugMode, create a .debug file with a port for your panel, and then restart your app and launch your panel, then navigate to that port in Chrome with localhost:8000 (or whatever port # you picked).

        Follow the cookbook and look at the examples for more details on each of these steps.

        erinferinferinf
        Adobe Employee
        erinferinferinf
        Adobe Employee
        August 12, 2019

        Hi there!

        Have you gone through all the official troubleshooting steps below? (I hate to be didactic, but have to ask.)

        The following steps are good standard troubleshooting, as well as troubleshooting "Error #15 Can't initialize target."

        • Make sure the ESTK stand-alone application is closed
        • Close the target application (example: Photoshop)
        • Close Visual Studio Code
        • Make sure there are no VS "Code Helper" processes in the Activity Monitor (Mac) or Task Manager (Windows)
        • Restart Visual Studio Code
        • Does it work then?
        • If not, does a reboot help?

        Here are a couple of other things people have tried:

        • Try putting double slashes in your file path (escaping it in a different way)
        • Check which version of VSCode you're running, the plugin doesn't work with old versions.
        • Close the desktop ESTK app.

        According to sberic​ "True debugging" may not be possible in the VSCode plugin as it exists today. Additionally, there are two debug modes at the moment, an active mode and a passive mode, so it depends a bit on the debug level you've set.

        I have filed at least one bug specific to how the breakpoints are being passed over ( UXP-10381 ).

        Give the thread above a read and try out the troubleshooting steps and let me know how it works out.

        e_v72938608
        e_v72938608Author
        Inspiring
        August 12, 2019

        @ErinF I've followed all the steps and I've uninstalled ExtendScript Toolkit, both versions, then restarted again. Unfortunately, the problems are still there. But the Activity Monitor (MacOS Mojave) did yield something of interest. When I closed Photoshop and VSCode, there was no trace of Code Helper. But when I started up VSCode (and through VSCode, Photoshop 2019),  Activity Monitor showed a lot of Code Helper instances, including one unresponsive on.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices