💨

VSCodeを使ってデバッグ環境を充実化してみた

2022/10/09に公開約3,200字

こんにちは、わたる です。

はじめに

筆者が幾つか記事にした golang を動作させる環境は下記になります。

  • VirtualBox 6.1.38
  • Ubuntu 18.04 LTS(ゲストOS)
  • ホスト OS は Windows 10

今まで筆者のデバッグはソース編集はターミナルからの vim、golang を実行させる場合は VirtualBox にログインを行って go run を実行させていましたが、まぁ、何と申しますか、令和の世の中で 平成ひとケタ代のデバッグ方式 を行っており、少々古臭く無知の極み…。

で、筆者のホスト OS には既にみんな大好き Visual Studio Code をインストールしていたのに気づいたので、ちょっとこれを使って少しだけデバッグ環境を充実させてみました。

参考:
【設定爆速】VS CodeのRemote Developmentを使ってSSH接続したEC2上のファイルを編集する

環境構築

導入した VSCode 拡張機能は Remote Development です。
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

Remote Development は 3 つの機能が入るのですが、今回使うのはそのうちの Remote SSH になります。

ホスト OS に設定しておくもの

以下の ssh config を用意し、C:\User\ユーザ名\.ssh\config というファイル名で保存しておきます。

Host wataru
    User ここにログインユーザ名を入れる
    Hostname ここにゲスト OS の IP アドレスを入れる
    IdentityFile ~/.ssh/id_rsa
    ServerAliveInterval  60

この config があると VSCode を立ち上げてからリモートエクスプローラーを表示させ、「SSH ターゲット」を選ぶと以下のような形で接続先が出てきます。
リモートエクスプローラー

作ったリモートのターゲットを選び、一番最初だけパスワードを入れるとターミナルが表示されます。

また、プログラムもこの状態で Ctrl + o で開けようとすると接続先のターゲットからファイルを開こうとするのでこのままソースを開いて編集し、ターミナルから go run コマンドを打ち込むことで実行が可能になります。

画像を表示させる場合

これで golang のプログラムがテキスト表示をさせるだけでしたらこれでよいのですが、前回の拙記事 のように GUI を表示させたい場合はホスト OS 側では表示されません。

幾つか手段はあるようですが、手軽だったので VcXsrv を導入してみましたのでその手順等を軽く紹介いたします。
参考:
VcXsrv(Xサーバー)をWindowsにインストールしLinuxのGUIをリモート操作する設定方法

インストール

公式サイト からインストーラーをダウンロードして実行、

そのまま「Next」を押し、

ここもそのまま「Install」を押してインストールを行ってください。

セットアップ

VcXsrv を起動すると、以下のような画面になります。

ここは「Multiple windows」が選択されていると思いますので、何もせずに「次へ」

ここも「Start no client」が選択されていると思いますので、この画面のまま「次へ」

「Disable access control」のチェックが外れている場合はチェックを入れて「次へ」[1]


このまま「完了」を押すと起動します。[2]

ゲスト OS 側の設定

ゲスト OS の画面設定はゲスト OS で何とか表示しようとするので、環境変数を設定する必要があります。
VSCode のターミナルから、下記を入れてください。

export DISPLAY=ホストOSのIPアドレス:0.0

お試し

これで設定完了。VSCode のターミナルから xclock & と入れてみましょう。ホスト OS の画面に

が出たら成功です。

使ってみる

さて、前回の記事で作ったヒストグラムを表示する golang のプログラムを実行させてみると、

と、ホスト OS 側に画面が表示されました。[3]

まとめ

今回は VSCode を使って今あるデバッグ環境を少しだけ充実化させてみました。
VSCode の拡張機能には go のデバッグ機能もあるようですので、さらにデバッガを発動させてあんじょうデバッグ出来るようですので、上手く構築出来たら、また記事にしたいと思います。
この記事で皆さまの開発環境が少しでも便利になっていただけると幸いです。

脚注
  1. 外れていたままでも C:\Program Files\VcXsrv\X0.hosts を編集すれば出来ますがこちらの方が楽なので…。 ↩︎

  2. Windows の場合ですが、ステータスバーに「X」みたいなアイコンが表示されます。 ↩︎

  3. histogramの方の画面は少し拡大して分かりやすくしています。 ↩︎

Discussion

ログインするとコメントできます