Skip to content

Generator Development Environment Setup

Jump to bottom
Cory McIlroy edited this page Jun 1, 2023 · 15 revisions

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.

Prerequisites

Download and install the following packages:

  1. NodeJS
  2. Git (or GitBash on Windows)
  • Photoshop currently provides Node.js v18.13.0

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.

Change Generator Settings in Photoshop

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.

  1. Disable the "Enable Generator" checkbox
  2. Enable the "Enable Remote Connections" checkbox
  3. Change the password to "password" without the quotes.
  4. Restart Photoshop

Install Generator Sources

Adobe Generator, as is shipped with Adobe Photoshop CC, consists of two packages:

  1. Generator Core, which provides basic functionality for NodeJS scripts to interact with Photoshop, and to run and manage Generator plug-ins; and
  2. 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!

Install Generator Core

From your terminal or GitBash prompt, enter the following commands:

  1. $ mkdir generator -- Make a new directory for all the Generator sources.
  2. $ cd generator -- Enter that directory.
  3. $ git clone https://github.com/adobe-photoshop/generator-core.git -- Download a copy of the Generator Core JavaScript sources from Github into the local generator/generator-core directory.
  4. $ cd generator-core -- Enter the generator-core directory.
  5. (OPTIONAL) $ git checkout some_branch_name -- Switch to a particular source branch.
  6. $ npm install -- Download and install JavaScript source dependencies into the generator/generator-core/node_modules directory.

Install Generator Image Assets

  1. $ cd .. -- Enter the top-level generator directory.
  2. $ mkdir plugins -- Make a subdirectory into which plug-ins will be installed.
  3. $ cd plugins -- Enter the plug-ins directory.
  4. $ git clone https://github.com/adobe-photoshop/generator-assets.git -- Download a copy of the Generator Image Assets JavaScript sources from Github into the local generator/plugins/generator-assets directory.
  5. $ cd generator-assets -- Enter the Image Assets directory
  6. (OPTIONAL) $ git checkout some_branch_name -- Switch to a particular source branch.
  7. $ npm install -- Download and install JavaScript source dependencies into the generator/plugins/generator-assets/node_modules directory.

Run Generator

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 (~/src/plugins).
IMPORTANT As of October 2020, the provided directory must be an absolute path and not contain symlinked subdirectories. See bug #421 for more info.

node app.js -v -f ~/src/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:

Generate menu with development assets plugin loaded

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.

Debug Generator

With recent versions of node.js and chrome, you can simply start node with the node --inspect option and use chrome's inspect feature chrome://inspect/#devices.

Alternate (node 4) instructions...

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 ~/src/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: node-inspector

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.

Clone this wiki locally