Skip to content

i18n(ja) "Dev/Debug" section #3269

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 28, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions src/content/docs/ja/develop/Debug/crabnebula-devtools.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
title: CrabNebula DevTools
sidebar:
badge:
text: New
variant: tip
i18nReady: true
---

import { Image } from 'astro:assets';
import devToolsPrint from '@assets/develop/Debug/crabnebula-devtools.png';

[クラブネビュラ CrabNebula](https://crabnebula.dev/) 社は、Tauri プロジェクトとのパートナーシップの一環として、Tauri 用のフリー(無償/自由利用)の [DevTools](https://crabnebula.dev/devtools/) アプリケーションを提供しています。このアプリケーションを使用すると、埋め込まれたアセット、Tauri 構成ファイル、ログ、スパンを取り込み、Web フロントエンドを提供することで、データをリアルタイムでシームレスに視覚化できるように Tauri アプリを補強できます。

> > > 《訳注》 **クラブネビュラ** Tauri の公式パートナー企業名。Crab(“蟹”)+ Nebura(星雲)の意。Rust(蟹)・Tauri(おうし座)・CrabNebula(かに星雲)、という流れ。

CrabNebula DevTools では、ペイロード(伝送データ本体)や応答、内部ログ、実行期間などを含む Tauri のイベントやコマンド用の特別なインターフェースを用いて、アプリのログ・イベント(依存関係からのログを含みます)を検査し、コマンド呼び出しのパフォーマンスと Tauri API の全体的な使用状況を追跡できます。

CrabNebula DevTools を有効化するには、devtools クレートをインストールします:

```sh frame=none
cargo add [email protected]
```

そして、メイン関数でできるだけ早くプラグインを初期化します:

```rust
fn main() {
// これはアプリ実行のできるだけ早い段階で呼び出す必要があります
#[cfg(debug_assertions)] // 開発ビルドへの導入のみを有効にします
let devtools = tauri_plugin_devtools::init();

let mut builder = tauri::Builder::default();

#[cfg(debug_assertions)]
{
builder = builder.plugin(devtools);
}

builder
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
```

その後、通常どおりアプリを実行します。すべてが正しく設定されていれば、devtools は次のメッセージを出力します:

<Image src={devToolsPrint} alt="DevTools message on terminal" />

:::note
この件では、デバッグ・アプリケーション用の devtools プラグインのみを初期化しています。この方法が推奨されます。
:::

詳細については、[CrabNebula DevTools](https://docs.crabnebula.dev/devtools/get-started/) のドキュメントを参照してください。

<div style="text-align: right">
【※ この日本語版は、「Feb 22, 2025 英語版」に基づいています】
</div>
162 changes: 162 additions & 0 deletions src/content/docs/ja/develop/Debug/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
---
title: デバッグ
sidebar:
label: 概要
order: 10
i18nReady: true
---

import CommandTabs from '@components/CommandTabs.astro';

Tauri には多くの動作箇所があるので、デバッグが必要となる問題に遭遇する可能性があります。エラーの詳細が出力される場所は多数あり、しかも Tauri にはデバッグ・プロセスをより容易にするツールもいくつか備わっています。

## 開発専用コード

デバッグ用のツールキットの中で最も便利なツールの一つは、コードにデバッグ・ステートメントを追加する機能です。ただし、こうした機能が本番環境にまで紛れ込むことは、通常、望ましくありません。ここで、「開発モードで実行しているかどうか」を確認する機能が役立ちます。

### Rust では

```rs frame=none
fn main() {
// 現在のインスタンスが `tauri dev` で開始されたかどうか。
#[cfg(dev)]
{
// `tauri dev` 専用のコードを記載
}
if cfg!(dev) {
// `tauri dev` 専用のコードを記載
} else {
// `tauri build` 専用のコードを記載
}
let is_dev: bool = tauri::is_dev();

// デバッグ・アサーションが有効化されているかどうか。これは `tauri dev` と `tauri build --debug` で「true」になります。
#[cfg(debug_assertions)]
{
// デバッグ専用のコードを記載
}
if cfg!(debug_assertions) {
// デバッグ専用のコードを記載
} else {
// 本番専用コードを記載
}
}
```

> > > 《訳注》 **デバッグ・アサーション** debug assertions。プログラム中にそこで満たされるべき条件(アサーション)を記述して実行時にチェックする仕組み。

{/* TODO: js version */}

## Rust コンソール

エラーを確認する最初の場所は「Rust コンソール」です。これは、(`tauri dev` などを実行する)ターミナル内にあります。次のコードを使用すると、Rust ファイル内からコンソールに何らかの情報を出力できます:

```rust frame=none
println!("Message from Rust: {}", msg);
```

時には作成した Rust コードにエラーが発生することがありますが、Rust コンパイラーが多くの情報を提供してくれます。たとえば、もし `tauri dev` がクラッシュした時などは、次のように再実行可能です。Linux および macOS では:

```shell frame=none
RUST_BACKTRACE=1 tauri dev
```

Windows(PowerShell)ではこのようになります:

```powershell frame=none
$env:RUST_BACKTRACE=1
tauri dev
```

このコマンドは、詳細なスタック・トレースを提供します。
総合的に見ると、Rust コンパイラーは、問題に関する詳細な情報を提供してくれるので、問題の解決に役立ちます。たとえば:

```bash frame=none
error[E0425]: cannot find value `sun` in this scope
--> src/main.rs:11:5
|
11 | sun += i.to_string().parse::<u64>().unwrap();
| ^^^ help: a local variable with a similar name exists: `sum`

error: aborting due to previous error

For more information about this error, try `rustc --explain E0425`.
```

> > > 《訳注》 **スタック・トレース** stack trace。プログラムのエラー発生時に、そのエラーに至るまでの関数の呼び出し履歴やメソッドなどを記録したもの。詳しくは [Wikipedia](https://ja.wikipedia.org/wiki/スタックトレース) を参照してください。

## WebView コンソール

WebView を右クリックし、 `Inspect Element`(要素を検査)を選択します。これにより、使い慣れた Chrome や Firefox の開発ツールに似た「Web インスペクター」が開きます。
Linux と Windows ではショートカット `Ctrl + Shift + i` を、macOS では `Command + Option + i` を使用しても、この「インスペクター」を開くこともできます。

「インスペクター」はプラットフォーム固有であり、Linux では 「webkit2gtk WebInspector」、macOS では「Safari のインスペクター」、Windows では「Microsoft Edge DevTools」をレンダリングします。

### プログラムから Devtools を開く

インスペクター・ウィンドウの見えやすさを調整するには、 [`WebviewWindow::open_devtools`] および [`WebviewWindow::close_devtools`] 関数を使用します:

```rust
tauri::Builder::default()
.setup(|app| {
#[cfg(debug_assertions)] // このコードは、デバッグ・ビルドにのみ記載してください。
{
let window = app.get_webview_window("main").unwrap();
window.open_devtools();
window.close_devtools();
}
Ok(())
});
```

### 本番環境でのインスペクターの使用

インスペクターは、デフォルトでは、開発とデバッグ・ビルドでのみ有効化されていますので、本番環境での利用には Cargo 機能を使用して有効にする必要があります。

#### デバッグ・ビルドの作成

デバッグ・ビルドを作成するには、`tauri build --debug` コマンドを実行します。

<CommandTabs
npm="npm run tauri build -- --debug"
yarn="yarn tauri build --debug"
pnpm="pnpm tauri build --debug"
deno="deno task tauri build --debug"
bun="bun tauri build --debug"
cargo="cargo tauri build --debug"
/>

通常のビルドや開発プロセスと同様に、このコマンドを初めて実行したときにはビルドに多少時間がかかりますが、それ以後の実行では大幅に高速になります。最終的にバンドルされたアプリでは開発コンソールが有効になっており、`src-tauri/target/debug/bundle` に配置されます。

また、ターミナルからビルドされたアプリを実行して、Rust コンパイラのメモ(エラーの場合)や `println` メッセージを表示することもできます。`src-tauri/target/(release|debug)/[アプリ名]` ファイルを参照して、コンソールで直接実行するか、ファイルシステム内の実行可能ファイル自体をダブルクリックします(原注: この方法ではエラーが発生するとコンソールが閉じます)。

##### Devtools 機能の有効化

:::danger

devtools API は、macOS では「プライベート」です。macOS でプライベート API を使用すると、そのアプリケーションは App Store に受理されなくなります。

> > > 《訳注》 **プライベート** private。変数や定数、関数、メソッドなどが、それが定義された範囲の中でしか呼び出し・参照ができないこと(外部からは呼び出しできないこと)。閉じた空間の中(「家の中」のような)でのみ有効な状態。

:::

**プロダクション・ビルド**(製品版ビルド)で devtools を有効化するには、`src-tauri/Cargo.toml` ファイルの Cargo 機能「`devtools`」を有効にする必要があります:

```toml
[dependencies]
tauri = { version = "...", features = ["...", "devtools"] }
```

## Core プロセスのデバッグ

Core プロセスは Rust によって作動しているため、GDB または LLDB を使用してデバッグできます。「LLDB VS Code 拡張機能」を使用して Tauri アプリケーションの Core プロセスをデバッグする方法については、[VS Code でのデバッグ] ガイドを参照してください。

> > > 《訳注》 **GDB** The GNU Project Debugger の略。[GNUデバッガ](https://ja.wikipedia.org/wiki/GNUデバッガ) > > > **LLDB** The LLDB Debugger。次世代高性能デバッガ。

[VS Code でのデバッグ]: /ja/develop/debug/vscode/
[`WebviewWindow::open_devtools`]: https://docs.rs/tauri/2.0.0/tauri/webview/struct.WebviewWindow.html#method.open_devtools
[`WebviewWindow::close_devtools`]: https://docs.rs/tauri/2.0.0/tauri/webview/struct.WebviewWindow.html#method.close_devtools

<div style="text-align: right">
【※ この日本語版は、「Mar 29, 2025 英語版」に基づいています】
</div>
135 changes: 135 additions & 0 deletions src/content/docs/ja/develop/Debug/neovim.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
---
title: Neovim エディターでのデバッグ
i18nReady: true
---

Neovim エディターで Rust コードをデバッグするために使用できるプラグインは数多くあります。この章では、`nvim-dap` といくつかの追加プラグインを設定して Tauri アプリケーションをデバッグする方法を説明します。

> > > 《訳注》 **dap** [Debug Adapter Protocol](https://microsoft.github.io/debug-adapter-protocol/) の略。開発ツール(IDE やエディターなど)とデバッガー間で使用される抽象プロトコル。

### 事前準備

`nvim-dap` の拡張機能には `codelldb` バイナリが必要です。[Github サイト](https://github.com/vadimcn/codelldb/releases) からご自分のシステムに適合するバージョンをダウンロードし、解凍してください。次項「`nvim-dap` の設定」に必要です。

> > > 《訳注》 **codelldb** LLDBデバッガをVSCodeで使用するための拡張機能。

### nvim-dap の設定

[`nvim-dap`](https://github.com/mfussenegger/nvim-dap) および [`nvim-dap-ui`](https://github.com/rcarriga/nvim-dap-ui) の両プラグインをインストールします。github のページに記載されている指示に従うか、あるいはお気に入りのプラグイン・マネージャーを使用して実施してください。
なお、`nvim-dap-ui` には `nvim-nio` プラグインが必要であることに注意してください。

次に、「Neovim 設定」でプラグインを設定します:

```lua title="init.lua"
local dap = require("dap")

dap.adapters.codelldb = {
type = 'server',
port = "${port}",
executable = {
-- このパスは、ご自分のシステムに合わせて変更してください!
command = '/opt/codelldb/adapter/codelldb',
args = {"--port", "${port}"},
}
}

dap.configurations.rust= {
{
name = "Launch file",
type = "codelldb",
request = "launch",
program = function()
return vim.fn.input('Path to executable: ', vim.fn.getcwd() .. '/target/debug/', 'file')
end,
cwd = '${workspaceFolder}',
stopOnEntry = false
},
}
```

この「設定」では、デバッガーを起動するたびに「デバッグを行なう Tauri App バイナリを指定する」ように求められます。

オプションとして、「`nvim-dap-ui` プラグイン」を設定して、デバッグ・セッションが開始および停止するたびに「デバッガー・ビューを自動的に切り替える」ように指定することもできます:

```lua title="init.lua"
local dapui = require("dapui")
dapui.setup()

dap.listeners.before.attach.dapui_config = function()
dapui.open()
end
dap.listeners.before.launch.dapui_config = function()
dapui.open()
end
dap.listeners.before.event_terminated.dapui_config = function()
dapui.close()
end
dap.listeners.before.event_exited.dapui_config = function()
dapui.close()
end

```

最後に、エディターでブレークポイントを表示するデフォルトの方法を変更できます:

```lua title="init.lua"
vim.fn.sign_define('DapBreakpoint',{ text ='🟥', texthl ='', linehl ='', numhl =''})
vim.fn.sign_define('DapStopped',{ text ='▶️', texthl ='', linehl ='', numhl =''})
```

### 開発サーバーの起動

アプリの起動に Tauri CLI を使用していないため、開発サーバーは自動的には起動しません。Neovim から開発サーバーの状態を制御するには、[overseer プラグイン](https://github.com/stevearc/overseer.nvim/tree/master) が利用できます。

バックグラウンドで実行されているタスクを制御する最良の方法は、[VS Code スタイルのタスク設定](https://github.com/stevearc/overseer.nvim/blob/master/doc/guides.md#vs-code-tasks) を使用することです。これを行なうには、プロジェクトのディレクトリに `.vscode/tasks.json` ファイルを作成してください。

以下に、`trunk` を使用したプロジェクトの「タスク設定」例を示します。

```json title=".vscode/tasks.json"
{
"version": "2.0.0",
"tasks": [
{
"type": "process",
"label": "dev server",
"command": "trunk",
"args": ["serve"],
"isBackground": true,
"presentation": {
"revealProblems": "onProblem"
},
"problemMatcher": {
"pattern": {
"regexp": "^error:.*",
"file": 1,
"line": 2
},
"background": {
"activeOnStart": false,
"beginsPattern": ".*Rebuilding.*",
"endsPattern": ".*server listening at:.*"
}
}
}
]
}
```

### キーへのコマンド割り当ての例

以下に、デバッグ・セッションを開始および制御するためのキー・バインディング(キーへの機能や記号、コマンドの割り当て)の例を示します。

```lua title="init.lua"
vim.keymap.set('n', '<F5>', function() dap.continue() end)
vim.keymap.set('n', '<F6>', function() dap.disconnect({ terminateDebuggee = true }) end)
vim.keymap.set('n', '<F10>', function() dap.step_over() end)
vim.keymap.set('n', '<F11>', function() dap.step_into() end)
vim.keymap.set('n', '<F12>', function() dap.step_out() end)
vim.keymap.set('n', '<Leader>b', function() dap.toggle_breakpoint() end)
vim.keymap.set('n', '<Leader>o', function() overseer.toggle() end)
vim.keymap.set('n', '<Leader>R', function() overseer.run_template() end)
```

<div style="text-align: right">
【※ この日本語版は、「Dec 22, 2024 英語版」に基づいています】
</div>
Loading