Debug JSX of a Illustrator CEP extension

Hi Guy,

I use the following techniques.

(a) Console

1) I include a console in the html with a logging function and a rewrite of the $.writeln function so it logs to the console display.

See GitHub - Trevor-/console  You can in your extension include the relevant parts from that repo or just use the repo as a base to your extensions.

The crucial parts you need to copy are.

1) The logging function console/com.creative-scripts.console/jsx at master · Trevor-/console · GitHub

You must change the com.creative-scripts.console.__log in the lines (currently 19 and 27) . See 3) Below

$.dispatch('com.creative-scripts.console.__log', [message, style, __class, elementType, consoleID].join(ARRAY_SPLIT));

and

$.dispatch('com.creative-scripts.console.__log', [message, style, __class, elementType, consoleID].join(ARRAY_SPLIT));

2) The jsx runner console/console.js at master · Trevor-/console · GitHub

You can use this as a standalone see http://creative-scripts.com/jsx-js/  This is the method for loading the jsx scripts or running snippets. See the link for setting up a button to reload the extension and you can make buttons to reload the jsx scripts.

3) The console funtion console/console.js at master · Trevor-/console · GitHub You can remove the not relevant parts from it.

You must change the com.creative-scripts.console.__log in the line (currently 152) .

csInterface.addEventListener('com.creative-scripts.console.__log', jsxLog);

The com.creative-scripts.console.__log both in this file and in the jsx file mentioned in 1) above should be be changed the same thing and something unique to the extension something like com.galroy.fab.extension.00001.console.__log would be good making sure to change for each extension.

4) You must include the Vue file console/vue.min.js at master · Trevor-/console · GitHub

5) In your HTML include the relevant files and the app div See console/index.html at master · Trevor-/console · GitHub

What do you gain from the above is an console that you can interact with your extensions jsx.

You can see I've typed into the extension to identify a selected part and output the result with a red background (Can use any valid css in the second parameter).

One output the to the console from any of the jsx files or calls you make.

(b) Alert

A lot more primitive with no option to interact but worth mentioning.

(c) Logging

Again no option to interact but very useful. http://creative-scripts.com/logging-with-a-smile/

(d) vsCode

If you have access to pre-release you can get the extended script plugin for vsCode if note you can run the code on sublime text or the estk or cstk.

Granularize  i.e. break up the jsx code into testable files / functions and test them out out side of the extensions environment.

If you are working with InDesign and presumably InCopy then you can actually access the extensions target engine from the debug apps. Unfortunatly you can't do that with the other Adobe apps.

HTH

Trevor