Skip to content

Commit 719754b

Browse files
J1-takaivasfvitor
J1-takai
and
vasfvitor
authored
i18n(ja) "Dev/Debug" section (#3269)
Co-authored-by: Vitor Ayres <[email protected]>
1 parent 57b0410 commit 719754b

File tree

5 files changed

+601
-0
lines changed

5 files changed

+601
-0
lines changed

‎src/content/docs/ja/develop/Debug/crabnebula-devtools.mdx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
title: CrabNebula DevTools
3+
sidebar:
4+
badge:
5+
text: New
6+
variant: tip
7+
i18nReady: true
8+
---
9+
10+
import { Image } from 'astro:assets';
11+
import devToolsPrint from '@assets/develop/Debug/crabnebula-devtools.png';
12+
13+
[クラブネビュラ CrabNebula](https://crabnebula.dev/) 社は、Tauri プロジェクトとのパートナーシップの一環として、Tauri 用のフリー（無償／自由利用）の [DevTools](https://crabnebula.dev/devtools/) アプリケーションを提供しています。このアプリケーションを使用すると、埋め込まれたアセット、Tauri 構成ファイル、ログ、スパンを取り込み、Web フロントエンドを提供することで、データをリアルタイムでシームレスに視覚化できるように Tauri アプリを補強できます。
14+
15+
> > > 《訳注》 **クラブネビュラ**　Tauri の公式パートナー企業名。Crab（“蟹”）＋ Nebura（星雲）の意。Rust（蟹）・Tauri（おうし座）・CrabNebula（かに星雲）、という流れ。
16+
17+
CrabNebula DevTools では、ペイロード（伝送データ本体）や応答、内部ログ、実行期間などを含む Tauri のイベントやコマンド用の特別なインターフェースを用いて、アプリのログ・イベント（依存関係からのログを含みます）を検査し、コマンド呼び出しのパフォーマンスと Tauri API の全体的な使用状況を追跡できます。
18+
19+
CrabNebula DevTools を有効化するには、devtools クレートをインストールします：
20+
21+
```sh frame=none
22+
cargo add [email protected]
23+
```
24+
25+
そして、メイン関数でできるだけ早くプラグインを初期化します：
26+
27+
```rust
28+
fn main() {
29+
// これはアプリ実行のできるだけ早い段階で呼び出す必要があります
30+
#[cfg(debug_assertions)] // 開発ビルドへの導入のみを有効にします
31+
let devtools = tauri_plugin_devtools::init();
32+
33+
let mut builder = tauri::Builder::default();
34+
35+
#[cfg(debug_assertions)]
36+
{
37+
builder = builder.plugin(devtools);
38+
}
39+
40+
builder
41+
.run(tauri::generate_context!())
42+
.expect("error while running tauri application");
43+
}
44+
```
45+
46+
その後、通常どおりアプリを実行します。すべてが正しく設定されていれば、devtools は次のメッセージを出力します：
47+
48+
<Image src={devToolsPrint} alt="DevTools message on terminal" />
49+
50+
:::note
51+
この件では、デバッグ・アプリケーション用の devtools プラグインのみを初期化しています。この方法が推奨されます。
52+
:::
53+
54+
詳細については、[CrabNebula DevTools](https://docs.crabnebula.dev/devtools/get-started/) のドキュメントを参照してください。
55+
56+
<div style="text-align: right">
57+
【※ この日本語版は、「Feb 22, 2025 英語版」に基づいています】
58+
</div>

‎src/content/docs/ja/develop/Debug/index.mdx

+162
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
---
2+
title: デバッグ
3+
sidebar:
4+
label: 概要
5+
order: 10
6+
i18nReady: true
7+
---
8+
9+
import CommandTabs from '@components/CommandTabs.astro';
10+
11+
Tauri には多くの動作箇所があるので、デバッグが必要となる問題に遭遇する可能性があります。エラーの詳細が出力される場所は多数あり、しかも Tauri にはデバッグ・プロセスをより容易にするツールもいくつか備わっています。
12+
13+
## 開発専用コード
14+
15+
デバッグ用のツールキットの中で最も便利なツールの一つは、コードにデバッグ・ステートメントを追加する機能です。ただし、こうした機能が本番環境にまで紛れ込むことは、通常、望ましくありません。ここで、「開発モードで実行しているかどうか」を確認する機能が役立ちます。
16+
17+
### Rust では
18+
19+
```rs frame=none
20+
fn main() {
21+
// 現在のインスタンスが `tauri dev` で開始されたかどうか。
22+
#[cfg(dev)]
23+
{
24+
// `tauri dev` 専用のコードを記載
25+
}
26+
if cfg!(dev) {
27+
// `tauri dev` 専用のコードを記載
28+
} else {
29+
// `tauri build` 専用のコードを記載
30+
}
31+
let is_dev: bool = tauri::is_dev();
32+
33+
// デバッグ・アサーションが有効化されているかどうか。これは `tauri dev` と `tauri build --debug` で「true」になります。
34+
#[cfg(debug_assertions)]
35+
{
36+
// デバッグ専用のコードを記載
37+
}
38+
if cfg!(debug_assertions) {
39+
// デバッグ専用のコードを記載
40+
} else {
41+
// 本番専用コードを記載
42+
}
43+
}
44+
```
45+
46+
> > > 《訳注》 **デバッグ・アサーション**　debug assertions。プログラム中にそこで満たされるべき条件（アサーション）を記述して実行時にチェックする仕組み。
47+
48+
{/* TODO: js version */}
49+
50+
## Rust コンソール
51+
52+
エラーを確認する最初の場所は「Rust コンソール」です。これは、（`tauri dev` などを実行する）ターミナル内にあります。次のコードを使用すると、Rust ファイル内からコンソールに何らかの情報を出力できます：
53+
54+
```rust frame=none
55+
println!("Message from Rust: {}", msg);
56+
```
57+
58+
時には作成した Rust コードにエラーが発生することがありますが、Rust コンパイラーが多くの情報を提供してくれます。たとえば、もし `tauri dev` がクラッシュした時などは、次のように再実行可能です。Linux および macOS では：
59+
60+
```shell frame=none
61+
RUST_BACKTRACE=1 tauri dev
62+
```
63+
64+
Windows（PowerShell）ではこのようになります:
65+
66+
```powershell frame=none
67+
$env:RUST_BACKTRACE=1
68+
tauri dev
69+
```
70+
71+
このコマンドは、詳細なスタック・トレースを提供します。
72+
総合的に見ると、Rust コンパイラーは、問題に関する詳細な情報を提供してくれるので、問題の解決に役立ちます。たとえば：
73+
74+
```bash frame=none
75+
error[E0425]: cannot find value `sun` in this scope
76+
--> src/main.rs:11:5
77+
|
78+
11 | sun += i.to_string().parse::<u64>().unwrap();
79+
| ^^^ help: a local variable with a similar name exists: `sum`
80+
81+
error: aborting due to previous error
82+
83+
For more information about this error, try `rustc --explain E0425`.
84+
```
85+
86+
> > > 《訳注》 **スタック・トレース**　stack trace。プログラムのエラー発生時に、そのエラーに至るまでの関数の呼び出し履歴やメソッドなどを記録したもの。詳しくは [Wikipedia](https://ja.wikipedia.org/wiki/スタックトレース) を参照してください。
87+
88+
## WebView コンソール
89+
90+
WebView を右クリックし、 `Inspect Element`（要素を検査）を選択します。これにより、使い慣れた Chrome や Firefox の開発ツールに似た「Web インスペクター」が開きます。
91+
Linux と Windows ではショートカット `Ctrl + Shift + i` を、macOS では `Command + Option + i` を使用しても、この「インスペクター」を開くこともできます。
92+
93+
「インスペクター」はプラットフォーム固有であり、Linux では 「webkit2gtk WebInspector」、macOS では「Safari のインスペクター」、Windows では「Microsoft Edge DevTools」をレンダリングします。
94+
95+
### プログラムから Devtools を開く
96+
97+
インスペクター・ウィンドウの見えやすさを調整するには、 [`WebviewWindow::open_devtools`] および [`WebviewWindow::close_devtools`] 関数を使用します：
98+
99+
```rust
100+
tauri::Builder::default()
101+
.setup(|app| {
102+
#[cfg(debug_assertions)] // このコードは、デバッグ・ビルドにのみ記載してください。
103+
{
104+
let window = app.get_webview_window("main").unwrap();
105+
window.open_devtools();
106+
window.close_devtools();
107+
}
108+
Ok(())
109+
});
110+
```
111+
112+
### 本番環境でのインスペクターの使用
113+
114+
インスペクターは、デフォルトでは、開発とデバッグ・ビルドでのみ有効化されていますので、本番環境での利用には Cargo 機能を使用して有効にする必要があります。
115+
116+
#### デバッグ・ビルドの作成
117+
118+
デバッグ・ビルドを作成するには、`tauri build --debug` コマンドを実行します。
119+
120+
<CommandTabs
121+
npm="npm run tauri build -- --debug"
122+
yarn="yarn tauri build --debug"
123+
pnpm="pnpm tauri build --debug"
124+
deno="deno task tauri build --debug"
125+
bun="bun tauri build --debug"
126+
cargo="cargo tauri build --debug"
127+
/>
128+
129+
通常のビルドや開発プロセスと同様に、このコマンドを初めて実行したときにはビルドに多少時間がかかりますが、それ以後の実行では大幅に高速になります。最終的にバンドルされたアプリでは開発コンソールが有効になっており、`src-tauri/target/debug/bundle` に配置されます。
130+
131+
また、ターミナルからビルドされたアプリを実行して、Rust コンパイラのメモ（エラーの場合）や `println` メッセージを表示することもできます。`src-tauri/target/(release|debug)/[アプリ名]` ファイルを参照して、コンソールで直接実行するか、ファイルシステム内の実行可能ファイル自体をダブルクリックします（原注：　この方法ではエラーが発生するとコンソールが閉じます）。
132+
133+
##### Devtools 機能の有効化
134+
135+
:::danger
136+
137+
devtools API は、macOS では「プライベート」です。macOS でプライベート API を使用すると、そのアプリケーションは App Store に受理されなくなります。
138+
139+
> > > 《訳注》 **プライベート**　private。変数や定数、関数、メソッドなどが、それが定義された範囲の中でしか呼び出し・参照ができないこと（外部からは呼び出しできないこと）。閉じた空間の中（「家の中」のような）でのみ有効な状態。
140+
141+
:::
142+
143+
**プロダクション・ビルド**（製品版ビルド）で devtools を有効化するには、`src-tauri/Cargo.toml` ファイルの Cargo 機能「`devtools`」を有効にする必要があります：
144+
145+
```toml
146+
[dependencies]
147+
tauri = { version = "...", features = ["...", "devtools"] }
148+
```
149+
150+
## Core プロセスのデバッグ
151+
152+
Core プロセスは Rust によって作動しているため、GDB または LLDB を使用してデバッグできます。「LLDB VS Code 拡張機能」を使用して Tauri アプリケーションの Core プロセスをデバッグする方法については、[VS Code でのデバッグ] ガイドを参照してください。
153+
154+
> > > 《訳注》 **GDB**　The GNU Project Debugger の略。[GNUデバッガ](https://ja.wikipedia.org/wiki/GNUデバッガ) > > > **LLDB**　The LLDB Debugger。次世代高性能デバッガ。
155+
156+
[VS Code でのデバッグ]: /ja/develop/debug/vscode/
157+
[`WebviewWindow::open_devtools`]: https://docs.rs/tauri/2.0.0/tauri/webview/struct.WebviewWindow.html#method.open_devtools
158+
[`WebviewWindow::close_devtools`]: https://docs.rs/tauri/2.0.0/tauri/webview/struct.WebviewWindow.html#method.close_devtools
159+
160+
<div style="text-align: right">
161+
【※ この日本語版は、「Mar 29, 2025 英語版」に基づいています】
162+
</div>

‎src/content/docs/ja/develop/Debug/neovim.mdx

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
---
2+
title: Neovim エディターでのデバッグ
3+
i18nReady: true
4+
---
5+
6+
Neovim エディターで Rust コードをデバッグするために使用できるプラグインは数多くあります。この章では、`nvim-dap` といくつかの追加プラグインを設定して Tauri アプリケーションをデバッグする方法を説明します。
7+
8+
> > > 《訳注》 **dap**　[Debug Adapter Protocol](https://microsoft.github.io/debug-adapter-protocol/) の略。開発ツール（IDE やエディターなど）とデバッガー間で使用される抽象プロトコル。
9+
10+
### 事前準備
11+
12+
`nvim-dap` の拡張機能には `codelldb` バイナリが必要です。[Github サイト](https://github.com/vadimcn/codelldb/releases) からご自分のシステムに適合するバージョンをダウンロードし、解凍してください。次項「`nvim-dap` の設定」に必要です。
13+
14+
> > > 《訳注》 **codelldb**　LLDBデバッガをVSCodeで使用するための拡張機能。
15+
16+
### nvim-dap の設定
17+
18+
[`nvim-dap`](https://github.com/mfussenegger/nvim-dap) および [`nvim-dap-ui`](https://github.com/rcarriga/nvim-dap-ui) の両プラグインをインストールします。github のページに記載されている指示に従うか、あるいはお気に入りのプラグイン・マネージャーを使用して実施してください。
19+
なお、`nvim-dap-ui` には `nvim-nio` プラグインが必要であることに注意してください。
20+
21+
次に、「Neovim 設定」でプラグインを設定します：
22+
23+
```lua title="init.lua"
24+
local dap = require("dap")
25+
26+
dap.adapters.codelldb = {
27+
type = 'server',
28+
port = "${port}",
29+
executable = {
30+
-- このパスは、ご自分のシステムに合わせて変更してください！
31+
command = '/opt/codelldb/adapter/codelldb',
32+
args = {"--port", "${port}"},
33+
}
34+
}
35+
36+
dap.configurations.rust= {
37+
{
38+
name = "Launch file",
39+
type = "codelldb",
40+
request = "launch",
41+
program = function()
42+
return vim.fn.input('Path to executable: ', vim.fn.getcwd() .. '/target/debug/', 'file')
43+
end,
44+
cwd = '${workspaceFolder}',
45+
stopOnEntry = false
46+
},
47+
}
48+
```
49+
50+
この「設定」では、デバッガーを起動するたびに「デバッグを行なう Tauri App バイナリを指定する」ように求められます。
51+
52+
オプションとして、「`nvim-dap-ui` プラグイン」を設定して、デバッグ・セッションが開始および停止するたびに「デバッガー・ビューを自動的に切り替える」ように指定することもできます：
53+
54+
```lua title="init.lua"
55+
local dapui = require("dapui")
56+
dapui.setup()
57+
58+
dap.listeners.before.attach.dapui_config = function()
59+
dapui.open()
60+
end
61+
dap.listeners.before.launch.dapui_config = function()
62+
dapui.open()
63+
end
64+
dap.listeners.before.event_terminated.dapui_config = function()
65+
dapui.close()
66+
end
67+
dap.listeners.before.event_exited.dapui_config = function()
68+
dapui.close()
69+
end
70+
71+
```
72+
73+
最後に、エディターでブレークポイントを表示するデフォルトの方法を変更できます：
74+
75+
```lua title="init.lua"
76+
vim.fn.sign_define('DapBreakpoint',{ text ='🟥', texthl ='', linehl ='', numhl =''})
77+
vim.fn.sign_define('DapStopped',{ text ='▶️', texthl ='', linehl ='', numhl =''})
78+
```
79+
80+
### 開発サーバーの起動
81+
82+
アプリの起動に Tauri CLI を使用していないため、開発サーバーは自動的には起動しません。Neovim から開発サーバーの状態を制御するには、[overseer プラグイン](https://github.com/stevearc/overseer.nvim/tree/master) が利用できます。
83+
84+
バックグラウンドで実行されているタスクを制御する最良の方法は、[VS Code スタイルのタスク設定](https://github.com/stevearc/overseer.nvim/blob/master/doc/guides.md#vs-code-tasks)　を使用することです。これを行なうには、プロジェクトのディレクトリに `.vscode/tasks.json` ファイルを作成してください。
85+
86+
以下に、`trunk` を使用したプロジェクトの「タスク設定」例を示します。
87+
88+
```json title=".vscode/tasks.json"
89+
{
90+
"version": "2.0.0",
91+
"tasks": [
92+
{
93+
"type": "process",
94+
"label": "dev server",
95+
"command": "trunk",
96+
"args": ["serve"],
97+
"isBackground": true,
98+
"presentation": {
99+
"revealProblems": "onProblem"
100+
},
101+
"problemMatcher": {
102+
"pattern": {
103+
"regexp": "^error:.*",
104+
"file": 1,
105+
"line": 2
106+
},
107+
"background": {
108+
"activeOnStart": false,
109+
"beginsPattern": ".*Rebuilding.*",
110+
"endsPattern": ".*server listening at:.*"
111+
}
112+
}
113+
}
114+
]
115+
}
116+
```
117+
118+
### キーへのコマンド割り当ての例
119+
120+
以下に、デバッグ・セッションを開始および制御するためのキー・バインディング（キーへの機能や記号、コマンドの割り当て）の例を示します。
121+
122+
```lua title="init.lua"
123+
vim.keymap.set('n', '<F5>', function() dap.continue() end)
124+
vim.keymap.set('n', '<F6>', function() dap.disconnect({ terminateDebuggee = true }) end)
125+
vim.keymap.set('n', '<F10>', function() dap.step_over() end)
126+
vim.keymap.set('n', '<F11>', function() dap.step_into() end)
127+
vim.keymap.set('n', '<F12>', function() dap.step_out() end)
128+
vim.keymap.set('n', '<Leader>b', function() dap.toggle_breakpoint() end)
129+
vim.keymap.set('n', '<Leader>o', function() overseer.toggle() end)
130+
vim.keymap.set('n', '<Leader>R', function() overseer.run_template() end)
131+
```
132+
133+
<div style="text-align: right">
134+
【※ この日本語版は、「Dec 22, 2024 英語版」に基づいています】
135+
</div>

0 commit comments

Comments
 (0)