~~NOTOC~~
====== VSCodeでデバッグをする方法 ======
<WRAP center round important 80%>

このページは過去の情報となります。\\
新しいドキュメントは**[[https://developer.virtualcast.jp/vci-docs/manual/scripting/index.html|こちら]]**になります。
</WRAP>

VSCodeは、プログラムのデバッグを助けてくれる**デバッガ（Debugger）**の機能を備えたツールです。\\
デバッガとして利用することで、変数の状態を確認したり、ステップ実行という方法でプログラムの動作を追うことができます。

**[[vscode/tutorial]]**の内容を理解している前提で説明します。

===== 1. バーチャルキャストの設定 =====

<WRAP center box round 95%>
<WRAP half column>
[VCIスクリプトのデバッガーのTPCポート番号]に適切な値を設定してください。\\
推奨値は、**41912**です。\\
[スタジオにデバッグ情報を表示する]にチェックしてください。
</WRAP>

<WRAP half column>
{{ :vscode:vciconfig.png?direct |}}
</WRAP>
</WRAP>


=====2. VSCodeにデバッガのプラグインを追加 =====
<WRAP center box round 95%>

VSCodeを起動後、左のタブから拡張機能を選択して**[MoonSharp]**で検索してください。\\
[MoonSharp Debug]のページが新規のタブで開くので、そこからプラグインをインストールします。

{{ vscode:vci_debugger_1.png?direct&600 |}}
</WRAP>


===== 3. VSCodeでの作業用スクリプトの作成 =====

<WRAP center  box round 95%>
**(1)VSCodeでフォルダを開く**\\
ワークスペースをVSCodeで開きます。
<code>C:/Users/_USER_/AppData/LocalLow/VirtualCast/VirtualCast</code>

上記のパスにある[EmbeddedScriptWorkspace]フォルダーを開きます。\\
フォルダーの開き方は**[[vscode/tutorial]]**でも説明しています。

{{vscode:luapath.png?direct|}}

</WRAP>

<WRAP center round box 95%>
**(2)対象VCIの専用フォルダ作成**\\
バーチャルキャスト上でVCIアイテムを出すと、対象のVCIフォルダが自動生成されます。\\
例えばVCISampleというアイテム名であれば、[VCISample]というフォルダが作成されます。

<wrap notice right>⇒ [[seed:upload]]</wrap>\\

<wrap em>スクリプトのデバッグを行う場合は、エクスポート時にVCIObject の[Script Enable Debugging]にチェックを有効にしてください。</wrap>

</WRAP>


<WRAP center round box 95%>
**(3)main.luaを作成**\\
上記で生成されたフォルダに[main.lua]を作成します。\\
[EmbeddedScriptWorkspace/template.lua]をコピーして[main.lua]にファイル名を変更するのがお勧めです。

{{ vci:vci_sample_intro3.png?direct }}

ここで作成した[main.lua]が**作業用スクリプト**となり、編集結果がバーチャルキャスト上で逐次反映されるようになります。

</WRAP>

===== 4. 設定ファイルを作成する =====
[EmbeddedScriptWorkspace] フォルダの直下に [.vscode] のフォルダを作成し、その中に [launch.json] を作成する必要があります。\\
( [launch.json] がデバッガの設定ファイルになります)

<WRAP center box round 95%>
<WRAP half column>
** (1)フォルダーをエクスプローラーで表示する **

[EmbeddedScriptWorkspace]フォルダーをエクスプローラーで表示します。\\
既にVSCodeで [EmbeddedScriptWorkspace] フォルダを開いてる場合は、VSCodeのワークスペース上で右クリックからメニューを開いて[エクスプローラーで表示します]を押すと、開くことができます。
</WRAP>
<WRAP half column>
{{vscode:vci_debugger_2.png?direct|}}
</WRAP>
</WRAP>

<WRAP center box round 95%>
<WRAP half column>
** (2)[EmbeddedScriptWorkspace] に [.vscode] という名前のフォルダを作成する **

[EmbeddedScriptWorkspace] フォルダの直下に [.vscode] というフォルダを作成してください。\\
</WRAP>
<WRAP half column>
{{vscode:vci_debugger_3.png?direct|}}
</WRAP>
</WRAP>


<WRAP center box round 95%>
** (3)[.vscode]フォルダの中に[launch.json]を新規作成 **

[.vscode]フォルダの中でメニューを開き、[新規作成 > テキストドキュメント] を作成し、できたファイルを ''launch.json'' にリネームしてください。\\
※もしくは、下記の[launch.json]ファイルをダウンロードして[.vscode]内に保存してもよいです。

</WRAP>


<WRAP center box round 95%>
** (4)[launch.json]の中に下記をコピー＆ペースト **

先ほど作った[launch.json]ファイルを開いて、下記のテキストをコピー＆ペーストして保存します。\\

※補足ですが…公式のリファレンスは ''"debugServer": 41912,'' の記述箇所が間違ってます。\\
上記の[launch.json]は修正した内容になっています。\\
[[https://marketplace.visualstudio.com/items?itemName=xanathar.moonsharp-debug|MoonSharp Debug]]
</WRAP>

<file json launch.json>
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "MoonSharp Attach",
            "type": "moonsharp-debug",
            "request": "attach",
            "debugServer": 41912,
            "HELP": "Please set 'debugServer':41912 (or whatever port you ar connecting to) right after the 'version' field in this json."
        }
    ]
}
</file>



===== 5.デバッガを使用する手順 =====


バーチャルキャストにスクリプトを含むVCIを取り出します。\\
VCIスクリプトを含むVCIをアップロードしてください。

<wrap em>スクリプトのデバッグを行う場合は、エクスポート時にVCIObject の[Script Enable Debugging]にチェックを有効にしてください。</wrap>

==== デバッガの使い方 ====

<WRAP center box round 95%>
<WRAP half column>
デバッグを行うVCIをバーチャルキャストで取り出します。\\
その後、VSCodeの[実行 > デバッグ開始]からデバッガを起動します。
</WRAP>
<WRAP half column>
{{ vscode:vscode_debug.png?direct |}}
</WRAP>
</WRAP>

<WRAP center box round 95%>


行番号の左をクリックすると、ブレークポイントの設定ができます。\\
ブレークポイントとは、**ブレークポイントの行までプログラムが実行された場合一時停止する箇所** です。

下記の例では ''onGrab()'' の中にブレークポイントが設定されています。\\
つかんだ後、本来なら3回の ''print()'' が実行されるはずですが、実行されてないと思います。\\
VSCodeのデバッガツールから、ステップ実行させる事でプログラムが処理されます。\\
終了させる時は、左の赤いコンセントのアイコンでデバッガの実行を終了します。

デバッグコンソールや、左のバーを見る事で変数の状態を確認したりできるので print関数では追いづらい細かい挙動もチェックできます。

{{vscode:vci_debugger_7.png?direct&|}}

</WRAP>

デバッグが終了してVCIを公開する場合、<wrap em>VCIObject の[Script Enable Debugging]にチェックを無効にして出力し直さなければ、スクリプトが参照できる状態で公開されてしまいますので注意しましょう。</wrap>