DTPab

印刷やデザイン、アドビ製アプリやスクリプトなど、雑多な技術ブログ

ExtendScript Debugger for VSCodeがリリースされたので簡単にまとめてみた

v1.1.0がリリース(2019年5月26日追記)

この記事はExtendScript Debugger v1.0.0リリース時のものです。
以下の記事にv1.1.0についてのまとめ記事を書きました。こちらもあわせてご覧ください。

uske-s.hatenablog.com

おさらい

2018年11月に発覚したExtendScriptToolkitの不具合の関連で、ESTKのアプリケーション自体の開発は凍結され、VSCodeのプラグインとしてリリースされるということがアナウンスされました。

ExtendScript Debugger Plugin

そして今日、このプラグインが正式にリリースされました。

  • VSCode Marketplace

marketplace.visualstudio.com

  • Adobe Tech Blog

medium.com

導入前に

Windows版はベータ版

現時点でWindows版はまだベータ版のようです。正式にリリースされました。

The Windows version of this plugin should be considered a "Beta", and is provided as-is. Adobe disclaims all warranties, express or implied, including the implied warranties of non-infringement, merchantability, and fitness for a particular purpose.

(要するにまだ動作保証外ですよ、ということ)

プレリリースプログラム参加者へ

プレリリースプログラムを利用していたユーザーは、いったんプレリリース版をアンインストールしてから今回のバージョン1.0.0をインストールしてください。

サポートされた機能

  • VSCodeからAdobeアプリケーションの起動(バージョン指定もできる)
  • コールスタックが表示される*1
  • ブレークポイント$.bp()
  • Photoshopではdebuggerステートメント
  • スクリプトの変数(ローカル/グローバル)を参照できる
  • ステップオーバーやステップインなど、ESTKにあったデバッグコマンド
  • デバッグコンソールにエラーが表示される
  • マウスカーソルをホバーするとプロパティや関数などの詳細を確認できる(JSDocを併用するとさらに有意義)
  • JSXBINファイルへの書き出し(バッチ書き出しも可能)

サポートされない機能

  • プロファイリング(ESTKではヒットカウントやタイミングを表示できた)
  • オブジェクトモデルビューワ
  • オートコンプリート(プロパティ/メソッドの入力補完)
  • スクリプトパネル(ESTKでは登録したフォルダにあるスクリプトを一覧表示できた)

プラグインの使い方

launch.jsonの用意

開発プロジェクト内にlaunch.jsonというファイルが必要になります。
なので、まずはプロジェクトを開きましょう。

f:id:uske_S:20190223232942p:plain

次に、VSCodeの左にあるボタン群から、下図のように操作してください。

f:id:uske_S:20190223232736p:plain

そうすると、開いているプロジェクト(フォルダ)にlaunch.jsonが生成されるはずです。

f:id:uske_S:20190223233227p:plain

このファイルを編集することで、デバッグの挙動を調整することができます。

launch.jsonの設定値

設定値の一覧をオレオレ和訳で載せておきますが、原文はプラグインのSupported launch.json setteings:の部分を参照してください。
間違いや具体的な情報などいただけると幸いです。

Property Type Description Default Value
program string スクリプトへのパス。デフォルトではデバッグ実行時にスクリプト名を訪ねてくるが、それが煩わしければデバッグしたいファイルを指定することで自動でそのスクリプトをデバッグする。例)"${workspaceFolder}/debug.jsx"としてファイル名を指定するか、今開いているファイルであれば"${file}"としてもよい。 ${workspaceFolder}/${command:AskForScriptName}
cwd string デバッグ対象のプログラムへのフォルダパス ${workspaceFolder}
targetSpecifier string デバッグするターゲット指定子?アプリケーション。これを指定しないとengineNameでtagetengineでエンジン名を指定してもtargetengineが生成されない*2。例)"indesign-14.064" empty
engineName string デバッグするエンジン名。設定するとそのターゲットエンジンを生成してデバッグが行われる。上記"targetSpecifier"とセットで指定する。 empty
targetStartedSession boolean 内部使用?開始されたセッションターゲット false
breakXML string 内部使用?ターゲットがセッションを開始した場合の中断XML ""
excludes array 変数表示の除外(ESTKのデータブラウザの表示設定と同義)。"undefined", "builtin", "Function", "prototype"から任意の組み合わせで記述。 [ "undefined", "builtin", "Function", "prototype" ]
maxArrayElements number 配列要素の最大表示。ESTKは20個までで固定だった気がする。 20
trace boolean ExtendScriptのデバッグセッションのログを有効化 true
traceString string ExtendScriptデバッグアダプタの拡張ログを有効化する。値は"V""L""W""E"のいずれか。それぞれVerbose、Log、Warn、Errorを表す。 ""
logFile string このログファイルでのデバッグセッションのログの記録を有効化 ""
dontBreakOnErrors boolean 保護された例外では中断しない true
debugLevel number デバッグレベルの指定。0:中断なし、1:中断、2:即時中断 1
stopOnEntry boolean セッションをすぐに中断するかどうか false

一部直訳のままで理解できてませんが以上がlaunch.jsonの持っている設定値。
"program"はデバッグ実行単位で都度変更するか、指定しておくか、同時複数開発でもなければスクリプトへのパスを記述しておいたほうが楽ですね。
"excludes""maxArrayElements"などを変更できるのはありがたい。

debuggerステートメント

現在はPhotoshopでのみ利用できるようです。詳細は冒頭に載せたAdobe Tech Blogを参照してください。

アップデート情報など

Adobe Tech BlogやDeveloper Newsletterで最新情報がアップされるようです。チェケラ!

*1:コールスタックまで見るようなケースというのは、小規模なスクリプトではあまりないかも。再帰関数などで参照したりします。

*2:Adobe アプリケーション自動化総合フォーラムにてTen_A氏に教わった。感謝!