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

## はじめに

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

https://github.com/elixir-desktop/desktop

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

https://github.com/phoenixframework/phoenix_live_view

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

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

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

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

https://github.com/elixir-desktop/desktop-example-app

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

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

https://asdf-vm.com/

```bash
asdf plugin-add erlang
asdf plugin-add elixir
asdf install
```

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

- Erlang: 25.0.4
- Elixir: 1.13.4 OTP 25

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

```bash
mix deps.get
```

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

```bash
mix phx.server
```

![ElixirDesktopアプリ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/818324e1-56d9-cc45-95a4-ce23be83878c.png)

## Elixir のデバッグ

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

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

lib/todo_web/live/todo_live.ex

```diff_elixir
...
  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

```javascript
...
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

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

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

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

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

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

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

![ElixirDesktopメニュー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/314cc2c4-0d83-c863-7ed4-183b036e578b.png)

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

![スクリーンショット 2023-03-07 13.39.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/a9504637-06f8-7f3a-324e-99efa57b54d9.png)

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

![スクリーンショット 2023-03-07 13.40.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/2dbc97fc-c837-4745-3f6f-a077f3a65cac.png)

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

## オブザーバー

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

![スクリーンショット 2023-03-07 13.42.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/c3cadc5a-3f3d-0077-f89e-7817430122d8.png)

## まとめ

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

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