Elixir Desktop で JavaScript 側をデバッグする（console.log の表示など）

はじめに

Elixir Desktop を使うと、 Elixir で macOS や Windows 、 iOS 、 Android まで、さまざまな環境で動くアプリを実装できます

仕組みとしては、 Phoenix LiveView を使って実装した Web ページを WebView 上で動作させる、というような感じです

基本的に処理は Elixir で書きますが、どうしても画面処理で JavaScript が必要な箇所が出てきます

Elixir 側は IO.inspect を使えば変数の内容などを確認できますが、 JavaScript の console.log はどうやって確認すれば良いか、というのが本記事の内容です

サンプルアプリケーションの起動

サンプルアプリをクローンしてきます

git clone https://github.com/elixir-desktop/desktop-example-app.git
cd desktop-example-app

Elixir や Erlang について、 asdf を使って .tool-versions に記載されたバージョンをインストールします

asdf plugin-add erlang
asdf plugin-add elixir
asdf install

asdf を使わない場合は以下の各バージョンを個別にインストールしてください

• Erlang: 25.0.4
• Elixir: 1.13.4 OTP 25

依存モジュールをインストールします

mix deps.get

アプリケーションを起動します

mix phx.server

Elixir のデバッグ

Elixir の場合は単純に任意の場所で IO.inspect を使えば良いだけです

例えば、サンプルアプリの ↩︎ ボタンをクリックしたときの text の内容が見たければ以下のようになります

lib/todo_web/live/todo_live.ex

...
  def handle_event("add", %{"text" => text}, socket) do
+   IO.inspect(text, label: "text")
    TodoApp.Todo.add_todo(text, "todo")

    Desktop.Window.show_notification(TodoWindow, "Added todo: #{text}",
      callback: &notification_event/1
    )

    {:noreply, socket}
  end
...

この状態でサンプルアプリの ↩︎ ボタンをクリックすれば、 mix phx.server を実行したターミナルに以下のように表示されます

text: "Hello, World!"

JavaScript のデバッグ

では、 JavaScript はどうすれば良いでしょうか

例えば、 JavaScript 側の処理を以下のようにしたとします

assets/js/app.js

...
let Hooks = {}
Hooks.Header = {
  mounted() {
    console.log("header mounted!")
  }
}

let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})
...

lib/todo_web/live/todo_live.html.leex

<div class="header" id="header" phx-hook="Header">
...

こうすると、アプリ表示時に "header mounted!" がコンソール表示されるはずです

しかし、 Elixir Desktop で開いたアプリには開発者ツールがないため、 console.log の表示結果が見えません

もちろん、 Elixir を実行したターミナルにも表示されません

こういうときのために、 Elixir Desktop にはアプリケーションをブラウザで開く機能があります

Elixir Desktop のアプリを開いているとき、左上のメニューから Extra |> Open Browser を開いてください

そうすると、ブラウザで http://localhost:<ランダムなポート番号>/?k=... が開き、アプリと同じ画面を見ることができます

当然、ここで開発者ツールを開けば console.log の内容を確認することができます

これでスタイルの確認やレスポンシブ表示の確認、ネットワークのシミュレーションなども自由にできますね

オブザーバー

左上のメニューから Extra |> Show Observer を開くと、以下のような画面でメモリ使用状況やプロセスの一覧などが確認できます

まとめ

Elixir Desktop にはアプリ開発のための便利な機能が色々搭載されています

使いこなせれば、かなり効率よくアプリが実装できるはずです