This guide will walk you through the necessary steps to debug client-side code in a CEP extension.
- Set the Debug Mode
- Create a
- Write Contents for the
- Debugging in Chrome
- Troubleshooting common issues
- Next Steps
- Other Resources
This guide will assume that you have completed all steps in the Getting Started with CEP Extensions Guide.
Set the Debug Mode
First, set the following Adobe preference to prevent your host application (Photoshop, InDesign, etc.) from throwing alerts about unsigned extensions. The HTML Extension Cookbook section on Debugging Unsigned Extensions explains this process:
Windows: Open regedit > HKEY_CURRENT_USER/Software/Adobe/CSXS.8, then add a new entry
PlayerDebugModeof type “
string” with the value of “
Mac: In the Terminal, type:
defaults write com.adobe.CSXS.8 PlayerDebugMode 1
Next, create a
.debug file for your extension. The
.debug file needs to be at the top level of your extension’s folder.
.debug file must be a hidden file in order to work. The
. at the front of the file name will make it hidden. The easiest way to create this file is to use the code editing tool of your choice (like Sublime Text or Brackets) to create a new file named
To see your hidden files on Mac, as of MacOS Sierra, you can use the
Command Shift + shortcut.
To see your hidden files on Windows 10, you can expand your view options in a File Explorer window and check the Hidden Files box.
Write Contents for the
.debug file must include the following elements (see notes #1-2 below):
<ExtensionList> <!-- 1 --> <Extension Id="com.example.helloworld"> <HostList> <!-- 2 --> <Host Name="PHXS" Port="8088"/> <Host Name="PHSP" Port="8088"/> </HostList> </Extension> </ExtensionList>
The Extension ID in this
.debugfile above must match the Extenstion ID in your
manifest.xmlfile (see our Getting Started Guide for more information).
List the Host IDs for each app your extension supports, with a corresponding port of your choosing for debugging. In this example, we've listed the Host IDs for Photoshop. The full list of host application ports is available in the CEP Cookbook.
Debugging in Chrome
Open Chrome and go to
http://localhost:8088/ or whichever port you set in your
.debug file in the previous section.
In the example below, the
console.log() message is “I can’t believe you clicked!”. The message originates from the
<script> element in the
Troubleshooting common issues
Getting a "not properly signed" alert
The change in the Set the Debug Mode section is invisible if performed correctly. Otherwise, you’ll get the following error about unsigned extensions:
Don’t worry about signing your extensions until you’re ready to distribute to users.
Getting a blank debug console
If your debug console in Chrome appears blank, check the contents of your
.debug file one more time:
- Does your extension ID in the
.debugfile match what's in
- Are you listing the supported host app(s) correctly with the right Host ID(s)?
- Are you attempting to access
localhoston the same port that you have indicated in your debug console?
If you are still having trouble, try following the steps on this Adobe forum thread.
Now that you've seen the basics, check out these guides and samples that walk you through some common intermediate and advanced topics in building CEP extensions: