Visual Studio Code を利用して Unity アプリをデバッグする

Visual Studio Code 0.10 にて、サードパーティによる機能拡張がサポートされました。

- [Extending Visual Studio Code](https://code.visualstudio.com/docs/extensions/overview)

これに伴って、Unity デバッガの機能拡張が公開されました。

- [Unity-Technologies/vscode-unity-debug](https://github.com/Unity-Technologies/vscode-unity-debug)

今回は、この機能拡張を利用して Unity アプリをざっくりとデバッグしてみることにしましょう。

## Getting Started

Visual Studio Code のインストールから、Unity デバッガの機能拡張の初期設定については、こちらの記事に書いてある通りにやりましょう。スクリーンショット付きなので、楽勝です。

- [VS Code Unity Debugger Extension Preview | Unity Community](http://forum.unity3d.com/threads/vs-code-unity-debugger-extension-preview.369775/)

## ブレークポイントで止める

まずは、おもむろに、ソースコードの行数表示の隣りの辺りをクリックしてみましょう。ブレークポイントが付いたり消えたりしますね。それでは、好きなところにブレークポイントを張ってみましょう。そして、Unity でアプリを実行したあとに、デバッガタブにあるデバッグ開始ボタンを押下しましょう。

<img width="1792" alt="debug_start.png (832.6 kB)" src="https://img.esa.io/uploads/production/attachments/1050/2015/12/07/2374/c6de32e9-dc2f-4544-8f6a-8baa6701b0ca.png">

これでデバッグを始める準備は完了です。アプリを操作して、ブレークポイントで止めてみましょう。

<img width="1792" alt="stop_breakpoint.png (854.2 kB)" src="https://img.esa.io/uploads/production/attachments/1050/2015/12/07/2374/5cfa94c6-95de-4519-8820-0f12ba283f5d.png">

ブレークポイントで処理が止まると、自動的に Visual Studio Code に制御が移ります。ブレークポイントで止まっている行が黄色く表示されていますね。

## デバッグしてみる

デバッグ中は、画面中央上部にデバッガパネルが表示されます。

![debugger_panel.png (136.4 kB)](https://img.esa.io/uploads/production/attachments/1050/2015/12/07/2374/5d2bb40e-f849-486f-8c95-41484429871b.png)

デバッガパネルの使い方は、大体、こんな感じになります。

| 名称 | コマンド | 説明 |
| --- | --- | --- |
| Continue | F5 | 一時停止している処理を再開して、次のブレークポイントまで進める |
| Step Over | F10 | 同一スコープ内にあるコードを一行ずつ進める |
| Step Into | F11 | スコープを限定しないでコードを一行ずつ進める |
| Step Out | Sfhit + F11 | 現在、実行しているメソッドの呼び出し元までコードを進める |
| Reconnect | - | 何らかの要因で Unity アプリとの接続が切断されたときに、再接続する？<br />使い方よく分かってないので、知ってるひといたら教えて下さい |
| Disconnect | - | Unity アプリとの接続を切断してデバッグを終了する |

これらを駆使して、デバッグを進めましょう。

## 変数を見る

`VARIABLES` ビューで確認出来ます。トグルキーをどんどん開くことで、クラス内部が持つ変数まで見ることが出来ます。

<img width="343" alt="variables.png (297.9 kB)" src="https://img.esa.io/uploads/production/attachments/1050/2015/12/07/2374/a8076cd5-cd21-4f59-aaf5-da3ca457d9b0.png">

## 変数の変化を監視する

特定の変数名上で右クリックから表示されるコンテキストメニューから `Debug: Add to Watch` を選択することで、変化を監視することが出来ます。監視対象に設定した変数は、`WATCH` ビューからいつでも確認出来ます。特定の値の変化を追い続けるときに便利ですね。

<img width="344" alt="watch.png (72.2 kB)" src="https://img.esa.io/uploads/production/attachments/1050/2015/12/07/2374/39b40739-84e4-4f1b-b9e6-4dbcd16b1e2d.png">

## コールスタックを確認する

`CALLSTACK` ビューで確認出来ます。クリックすることで、コードが存在する場合のみ、呼び出し元のコードを表示することが出来ます。

<img width="342" alt="callstack.png (180.2 kB)" src="https://img.esa.io/uploads/production/attachments/1050/2015/12/07/2374/ec6aacc9-4091-49ca-a3ee-27c9b08acaa6.png">

## ブレークポイントを確認する

`BREAKPOINTS` ビューで確認出来ます。

<img width="344" alt="breakpoints.png (32.6 kB)" src="https://img.esa.io/uploads/production/attachments/1050/2015/12/07/2374/2108b196-9422-4eee-b036-7c6cc4d5a52c.png">

一時的に全てのブレークポイントを無効化したり、不要になったブレークポイントを消したりすることが出来るっぽいです。

## デバッグコンソール

デバッグコンソールを起動すると、対話的にコマンドを実行することが出来ます。値を書き換えたりも出来ます。

<img width="639" alt="console.png (100.7 kB)" src="https://img.esa.io/uploads/production/attachments/1050/2015/12/07/2374/00c10380-e9ea-4945-98ec-ee9d9ba07d24.png">

## まとめ

まぁまぁ、普通にデバッグは出来る感じでいいですね。Visual Studio Code は何より軽くてサクサク動きますし、自動補完も効きますし、機能拡張もリリースされて、今後、更に活気付いてくると思うので、ヨサがあります。

## 合わせて読みたい

- [【Unity5】Visual Studio Codeを使ってデバッグする - 神様は有給消化中です。](http://appleorbit.hatenablog.com/entry/2015/09/27/105151)