Tauri 2.0をフロント(js側)含めてVSCodeでデバッグしてみる
環境構築については下記記事で別途まとめています。
Tauri公式にも一応手順がまとめられています。
基本的にはTauri公式のサンプルを元にしていますが、自分なりに修正＆追加などを行っています。
VSCodeプラグイン
下記プラグインが必要なので、まずはVSCodeに追加しておきます。
最終的な設定ファイル
設定さえ分かればOKな方向けに、まずは設定を載せておきます。
内容の説明は後述しています。
{
"version": "0.2.0",
"configurations": [
{
"type": "lldb",
"request": "launch",
"name": "Tauri Dev Debug",
"cargo": {
"args": ["build", "--manifest-path=./src-tauri/Cargo.toml", "--no-default-features"]
},
"preLaunchTask": "ui:dev:start",
"postDebugTask": "ui:dev:stop",
"env": {
"WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS": "--remote-debugging-port=1422"
}
},
{
"type": "lldb",
"request": "launch",
"name": "Tauri Prod Debug",
"cargo": {
"args": ["build", "--release", "--manifest-path=./src-tauri/Cargo.toml"]
},
"preLaunchTask": "ui:build"
},
{
"name": "Attach to Webview",
"port": 1422,
"request": "attach",
"type": "chrome",
"webRoot": "${workspaceFolder}"
}
],
"compounds": [
{
"name": "Tauri Dev All",
"configurations": ["Tauri Dev Debug", "Attach to Webview"]
}
]
}
{
"version": "2.0.0",
"tasks": [
{
"label": "ui:dev:start",
"type": "shell",
"isBackground": true,
"command": "yarn",
"args": ["dev"],
"problemMatcher": {
"owner": "custom",
"pattern": {
"regexp": "^$"
},
"background": {
"activeOnStart": true,
"beginsPattern": "^.*",
"endsPattern": "endsPattern": "^.*Starting\\.\\.\\."
}
}
},
{
"label": "ui:dev:stop",
"type": "shell",
"command": "echo ${input:terminate}"
},
{
"label": "ui:build",
"type": "shell",
"command": "yarn",
"args": ["build"]
}
],
"inputs": [
{
"id": "terminate",
"type": "command",
"command": "workbench.action.tasks.terminate",
"args": "ui:dev:start"
}
]
}
設定ファイルの解説
ちょこちょこ修正＆追加しているのでその説明です。
preLaunchTask / postDebugTask
preLaunchTaskでは、フロント側を開発モード(yarn dev)で立ち上げています。
公式のサンプルではpostDebugTaskは設定されていないのですが、デバッグを終了した際にpreLaunchTaskで立ち上げたフロントも終了させたいので設定しています。
ui:dev:startタスク
フロント側を開発モード(yarn dev)で立ち上げるタスクです。
このタスクはバックグラウンドで立ち上げたままにするのですが、公式サンプルのまま(problemMatcherの指定なし)だとタスクの終了を待ってしまうので、problemMatcherを追加しています。
自分も詳しいわけではないのですが、重要なのは"endsPattern": "endsPattern": "^.*Starting\\.\\.\\."の部分で、自分の場合はNext.jsなので、Starting...という出力をトリガーにタスクの完了(バックグラウンドへ移行)とみなすように設定しています。
ui:dev:stopタスク
inputsの内容と合わせて、デバッグ終了時にui:dev:startタスクも終了させる設定になります。
フロント側のデバッグ設定
公式サンプルではRust側のデバッグしかできないので、フロント(js)側のデバッグ設定を追加しています。
Webviewにアタッチできるようにポートを設定
Tauriのデバッグ起動の環境変数に下記を設定します。
"WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS": "--remote-debugging-port=1422"
※ポートは変更してもらって構いません。
アタッチするデバッグ設定
"Attach to Webview"としてポート1422にアタッチするデバッグ設定を追加しています。
（これは単純にフロント系をアタッチしてデバッグする設定です。
これで、"Tauri Dev Debug"でTauriをデバッグ起動した後に、"Attach to Webview"でアタッチすることでフロント側もデバッグできるようになります。
全てをまとめて実施するように"Tauri Dev All"を定義しています。
下記の部分です。
{
"name": "Tauri Dev All",
"configurations": ["Tauri Dev Debug", "Attach to Webview"]
}
Discussion