Generator Development Environment Setup
Adobe Generator is powered by a NodeJS interpreter and scripts that are packaged with Adobe Photoshop CC. But, for Generator development, it's easiest to run your own, separate NodeJS interpreter, and to point Photoshop to that instead of its built-in NodeJS interpreter. And, even if you don't want to do Generator development, you might still want to do this in order to run the very latest version of the Generator sources, including all the most recent bug fixes. This document explains how to set up, run and debug Generator locally.
Download and install the following packages:
Open a terminal window on a Mac, or a GitBash prompt on Windows, and type node --version, npm --version and git --version to confirm that node, the node package manager npm, and git are installed correctly.
Open the Photoshop preferences dialog, and go to the Plug-Ins panel. We need to disable the built-in Generator instance and allow our own NodeJS interpreter to connect to Photoshop.
- Disable the "Enable Generator" checkbox
- Enable the "Enable Remote Connections" checkbox
- Change the password to "password" without the quotes.
- Restart Photoshop
Adobe Generator, as is shipped with Adobe Photoshop CC, consists of two packages:
- Generator Core, which provides basic functionality for NodeJS scripts to interact with Photoshop, and to run and manage Generator plug-ins; and
- Generator Image Assets, which is a Generator plug-in that writes images assets to disk for appropriately annotated layers.
Instructions for installing both of these components are below. If you're developing your own Generator plug-in, it isn't strictly necessary to install the Image Assets plug-in, although understanding how that plug-in works might be useful!
From your terminal or GitBash prompt, enter the following commands:
-
$ mkdir generator-- Make a new directory for all the Generator sources. -
$ cd generator-- Enter that directory. -
$ git clone https://github.com/adobe-photoshop/generator-core.git-- Download a copy of the Generator Core JavaScript sources from Github into the localgenerator/generator-coredirectory. -
$ cd generator-core-- Enter thegenerator-coredirectory. - (OPTIONAL)
$ git checkout some_branch_name-- Switch to a particular source branch. -
$ npm install-- Download and install JavaScript source dependencies into thegenerator/generator-core/node_modulesdirectory.
-
$ cd ..-- Enter the top-levelgeneratordirectory. -
$ mkdir plugins-- Make a subdirectory into which plug-ins will be installed. -
$ cd plugins-- Enter the plug-ins directory. -
$ git clone https://github.com/adobe-photoshop/generator-assets.git-- Download a copy of the Generator Image Assets JavaScript sources from Github into the localgenerator/plugins/generator-assetsdirectory. -
$ cd generator-assets-- Enter the Image Assets directory - (OPTIONAL)
$ git checkout some_branch_name-- Switch to a particular source branch. -
$ npm install-- Download and install JavaScript source dependencies into thegenerator/plugins/generator-assets/node_modulesdirectory.
From your terminal or GitBash prompt, enter the Generator Core directory. If you're following the instructions above, you can do that with:
cd ../../generator-core
Next, start the NodeJS interpreter, pointing it to both the main source file for Generator Core (app.js) and the folder that contains Generator plug-ins to be loaded (../plugins)
node app.js -v -f ../plugins
If Generator successfully started up, you'll see messages on your terminal that look something like this:
[debug:core 10:17:52.791 generator.js:1102:21] Loading plugin: generator-assets
[debug:core 10:17:52.842 generator.js:1116:21] Plugin loaded: generator-assets
If you prefer not to see debug log messages in the console, omit the "-v" option. You can then tail -f the logs in the generator log file
And, if you have a document open in Photoshop, you'll see a new "Image Assets" menu item in the "Generate" menu. It should look like this:
The first disabled "Image Assets" menu is from the disabled built-in Generator. The second enabled "Image Assets" menu is from the node process you just launched.
You can stop Generator by ending the node process, e.g., by typing control-C in the terminal. If you exit the node process, the menu item(s) for that process will go away. If you skip the step of disabling the built-in Generator process (mentioned in "Change Generator Settings in Photoshop" above), things will get really confusing, because both processes will try to act on your image. Doing this is certainly not supported, so please don't file a bug about it.
Generator will also exit whenever the Photoshop application exits. If you restart Photoshop, you'll also have to restart Generator using the node command above.
You can use the node-inspector program to debug the Generator core or its plugins. The node-inspector program runs as a persistent background process and is accessed via a web browser. Install it system-wide with the npm command:
$ sudo npm install -g node-inspector
To use the debugger, first open a new terminal and launch node-inspector:
$ node-inspector
You'll see output that looks like this:
> Node Inspector v0.7.3
> Visit [http://127.0.0.1:8080/debug?port=5858](http://127.0.0.1:8080/debug?port=5858) to start debugging.
Note that node-inspector will continue to run while we debug Generator.
Next, back in the other terminal, re-launch Generator with debugging enabled:
$ node --debug app.js -v -f ../plugins
Note the additional --debug flag.
Finally, launch a web browser and navigate to the node-inspector URL above. You should see an interface that looks very similar to Chrome Developer Tools:
You can use the node-inspector interface to set breakpoints and inspect memory and the call stack as Generator executes. For more information on debugging, visit the Chrome Developer Tools and node-inspector sites.