VSCodeにshデバッガ構築してデバッグする方法(Windows)

shをデバッグするのに、デバッガを利用できないものだと思っていませんか？！

だがしかし！実はできるんです！

そう・・・VSCodeならね！！

サーバサイドエンジニアの方はsh使う人もたくさんいて一度はデバッガとかないかなーとか思ったことあると思います

実は私もそのうちの一人でした

今回はVSCodeでデバッガ構築を行い、shをデバッグできるようにする方法についてを紹介します

この記事を読むことでVSCodeでshのデバッガ構築が簡単にできるようになるので、是非一度構築してみてはどうでしょうか？

VSCodeにshデバッガ構築してデバッグする方法(Windows)

WSL(Windows Subsystem for Linux)の導入
- Windowsの場合、これ入れないとVSCodeに怒られます
- VMWare使ってる人は注意、これを使えるようにするとVMWareが動かなくなります→後述します
WSLのdistributionを導入する
VSCodeプラグインをインストールする
- Bash Debug
- Remote – WSL
さぁSHデバッグをしよう

WSL(Windows Subsystem for Linux)の導入

検索窓で「Windowsの機能の有効化または無効化」を入力してクリック

「Linux用Windowsサブシステム」と「仮想マシンプラットフォーム」を選択してOKをクリック

必要な変更が完了になったら、再起動します

Windowsの場合、これ入れないとVSCodeに怒られます

VSCodeのBash Debugプラグインで、WSLが有効になっていないとSHのデバッガが動作しないので実施は必須です

VMWare使ってる人は注意、これを使えるようにするとVMWareが動かなくなります→後述します

すでにVMWareを使っている方は注意が必要です

この機能を有効にしているとVMWareが動きません

同時に使用することはできないのでVMWareを使いたい方はこれをオフにしてください

WSLのdistributionを導入する

本家サイトの「Downloading distros」から好きなdistributionをダウンロードする※今回はUbuntu 20.04を選択
- 本家サイト → https://docs.microsoft.com/en-us/windows/wsl/install-manual#downloading-distros
ダウンロードした「Ubuntu_2004.2020.424.0_x64.appx」をダブルクリックで実行
インストールをクリック

起動されるとこんな感じのエラーが出ます

WslRegisterDistribution failed with error: 0xc03a001a
Error: 0xc03a001a

実際に出たエラーは以下

これを解決してくれてるものがありました

Go to C:\Users\user name\AppData\Local\Packages folder. If not apparent, it’s probably hidden. Once inside directory, search subdirectory with ‘ubuntu’ string/keyword. Once located, right click the directory > Advanced > uncheck the compression > Apply. Now the ubuntu directory should have the arrows removed, which means you should have a better chance at actually running the distro install.
https://github.com/microsoft/WSL/issues/5325

要するに、以下のディレクトリに移動して

C:\Users\ユーザ名\AppData\Local\Packages

Ubuntuを検索して出てきたフォルダを「右クリック>プロパティ」をクリック

詳細設定をクリック

開くと以下のようになっているので、「内容を圧縮してディスク領域を節約する」のチェックを外してOKをクリック

その後適用をクリックすると以下の画面が出るのでOKをクリック

Windowsアイコンをクリックして、Ubuntu 20.04 LTSがあるはずなので、クリック

今度は成功します

usernameとpassword、再度passwordを打つと成功します

VSCodeプラグインをインストールする

VSCodeで以下のプラグインを入れます

Bash Debug

Remote – WSL

拡張機能（プラグイン）のインストール方法がわからない方はこちらのサイトが参考になります

【VSCode】拡張機能をインストール・削除する方法と、有効・無効を切り替える方法

さぁSHデバッグをしよう

準備ができたところでいよいよSHデバッグをしていきます

SHTESTというフォルダに「echo.sh」というファイルをつくります

echo "test1";
echo "test2";
echo "test3";

デバッグに必要なファイルを生成していきます
VSCodeのデバッグアイコンをクリック

「launch.jsonファイルを作成します」をクリック

「Bash Debug」をクリック

.vscode > launch.jsonが生成されます
この状態が出来たらSHデバッグの準備ができてます

ブレークポイントを張ります（赤枠部をクリックすると赤●の点がつきます）

F5で実行します（このときデバッグコンソールも出しておきましょう、下にカーソルを当ててドラッグして上に引っ張れば出てきます）

デバッグアイコンをクリックして切り替えると詳細が見れます

ステップオーバーします（赤枠部をクリック）

実行するとデバッグコンソールに結果が表示されます

いかがでしたでしょうか？

VSCodeのデバッガを利用してSHのデバッグが簡単にできましたか？

本記事を読んでいただいて構築するだけでも価値はあるかと思います

実際に私もプロジェクトで運用していてかなり便利と思っています

まずは本記事の通りに環境構築を行って運用してみてはいかがでしょうか