DTPab

DTPにまつわるあれこれ

JXAのデバッグにSafariのWEBインスペクタが使える

はじめに

JXAをスクリプトエディタで開発する場合、コンソールに情報を書き出せるのでまだいいのですが、Automatorに直接JXAを書いているときはデバッグしにくいですよね。スクリプトエディタのコンソールも型の判別とかは結構難しい(というか面倒くさい)。
実はJXA(開発元はApple)が公式にデバッグ方法を用意しているので、それを利用したほうが少し幸せになれます。設定は非常に簡単なのでセットアップの仕方を説明します。

公式ドキュメント

JavaScript for Automation Release Notesにデバッグに関する記述があります。macOS 10.11から更新されてませんが、10.14.6 Mojaveでも同じように動かすことができていますのでとりあえずは大丈夫。なはず。

記事執筆時点のマシン環境

macOS 10.14.6 Mojave
Safari 13.1.1

そう、Safariが必要です。

JXAデバッグでWEBインスペクタを利用する手順

  1. Safariを起動する
  2. Safariからその設定をオンにする
  3. JXAにdebuggerを記述する
  4. スクリプトを実行する

という流れになります。

SafariのWEBインスペクタをオンにする

Safariを起動し、開発タブからJSContextsのWebインスペクタを自動的に表示をオンにします。

f:id:uske_S:20200703090444p:plain
JSContextsのWebインスペクタを自動的に表示

もし開発タブがメニューバーに表示されていなければ、環境設定の詳細タブから図のチェックボックスをオンにします。

f:id:uske_S:20200703090708p:plain
メニューバーに"開発"メニューを表示

Safari側の設定はこれでおしまいです。Safariは起動しておいてください(ウィンドウは開いてなくても大丈夫です)。

JXAにdebuggerを記述する

スクリプトエディタでもAutomationのサービスでもやり方は同じです。コードの中にdebuggerを記述してください。

f:id:uske_S:20200703091217p:plain
コード中にdebuggerと記述する

スクリプトを実行する

スクリプトを実行すると、WEBインスペクタが立ち上がり、スクリプトがdebuggerの場所をブレークポイントとして止まります。

f:id:uske_S:20200703091730p:plain
WEBインスペクタ

コンソールタブではブラウザやVSCodeのコンソールと同じように変数などを参照することができて便利です。

f:id:uske_S:20200703092120p:plain
コンソール
うまくコンソールに結果が表示されないときは末尾にセミコロン;を付けるといいみたいです。

Automatorでもデバッグできる

f:id:uske_S:20200703092544p:plain
AutomatorのサービスからでもWEBインスペクタが立ち上がる
ただしAutomatorのコードにdebuggerの記述が残っていると、サービスとして利用した際に毎回WEBインスペクタが立ち上がってしまうので注意してください。

おわりに

こんな感じでWEBインスペクタを使うとJXAのデバッグが非常に簡単になります。個人的には変数やプロパティに何があるかとか、その型が何であるかとか、そういうのが俯瞰できるだけで大助かりです。