# Visual Studio CodeでIllustratorのスクリプトを書く時に便利な拡張機能「ExtendScript Debugger」

URL: https://webrandum.net/vscode-extendscript-debugger/
公開日: 2019-05-31
更新日: 2020-04-12
カテゴリー: 作業効率化
タグ: JSX, Visual Studio Code
出典: Webrandum（著者: サイトウ マサカズ）

昔はAdobe製品のスクリプトを書く時にExtendScript Toolkitというアプリケーションを使用して、書いたり最終的な書き出しを行っていたそうなのですが、すでに開発は終了し、その上最新のMacだと動かないらしく（そもそも自分の場合はエラーが出てインストールもできませんでした）、代わりにVisual Studio Codeの拡張機能を公式が出していました。

というわけで今回はその拡張機能についてまとめておきます。

## ExtendScript Debugger

「ExtendScript」と検索すると、「ExtendScript Debugger」という拡張機能も出てきますが、こちらが公式で出しているデバッガーです。

![ExtendScript Debugger](https://webrandum.net/mskz/wp-content/uploads/2019/05/image_1-6-1024x615.png)

インストールすると、スクリプトの開発をする上で便利な機能を使えるようになります。

- スクリプトのデバッグ アプリケーションを選択してスクリプトを実行

- 変数で取得している値を表示できる

- コードを難読化した状態で書き出せる（バイナリとして書き出し）

### スクリプトのデバッグを行う

下のメニューバーに「ターゲットアプリケーションを選択」というテキストが表示されるようになるので、それをクリックして、Adobeのアプリケーションを指定します。

![ターゲットアプリケーションの選択](https://webrandum.net/mskz/wp-content/uploads/2019/05/image_2-6-1024x615.png)

アプリケーションの選択をしたら、［デバッグ］→［デバッグの開始］を選択します。

![ExtendScript Debugを選択](https://webrandum.net/mskz/wp-content/uploads/2019/05/image_4-14-1024x624.png)

あとはデバッグが開始されます。ウインドウ上の方にデバッグコントローラが表示され、スクリプトの「停止」「ブレークポイント間の移動」ができます。

デバッグ前にあらかじめ行番号の左のスペースをクリックして、ブレークポイントの設定をしておくと、その位置でスクリプトが一時停止してくれます。

![ExtendScript Debug画面](https://webrandum.net/mskz/wp-content/uploads/2019/05/image_5-7-1024x624.png)

他にもサイドバーには「Global」と「Local」の変数の中身が見れたり、何かエラーがあれば「出力タブ」にエラー内容が表示されたりします。

### バイナリとして書き出し

右クリックして「バイナリとして書き出し…」を選択すると、コードを難読化した状態（JSXBIN）で書き出す事ができます。

ただし、ファイル単体で開いていると失敗してしまうので、プロジェクトフォルダとしてJSXファイルを開いておく必要があります。

![jsxの難読化](https://webrandum.net/mskz/wp-content/uploads/2019/05/image_3-5-1024x617.png)

## 最後に

自分のメインのテキストエディタですし、ここまでデバッグができるのであればIllustratorのスクリプトを書く時はVisual Studio Code一択になりそうです。