弊社エンジニアの記事になります。

はじめに

今回はdocker環境のRailsをVSCodeからデバッグする方法を解説します。
VSCodeをインストールしており、docker環境のRailsの構築が完了している前提で話を進めていきます。

以上の環境が整って入ればVSCodeでデバッグをするのに必要なことは以下になります。

必要なこと

debug gemを導入

VSCode拡張機能「VSCode rdbg Ruby Debugger」を導入

docker-compose.ymlにデバッグ用の設定を追加

VSCodeデバッグ用の設定ファイルを作成

VSCodeデバッグの通信の仕組み

VSCodeでデバッグをするにはVSCodeとアプリケーションを繋ぐ必要があります。

ブレークポイントを設定し、処理が止まった所でアプリケーションから変数の値などを受け取りエディタに表示をします。

図としては以下のような形になります。

画像引用： VSCode公式

ただこれでは、プログラミング言語ごとにエディタに送信されるデータが異なるため、エディタ側で複数の異なる仕様に合わせてUIの表示などを実装しなければいけません。

その対応策として以下の「Debug Adapter Protocol」というプロトコルが生まれたようです。

画像引用： VSCode公式

アプリケーションのデバッガーとの間に「Debug Adapter」という仲介役を配置します。

「Debug Adapter」はアプリケーションのデバッガーからデータを受け取り、「エディタ」とはプロトコルの仕様に沿った通信をします。

これにより、エディタはどの言語であっても同じ仕様に沿ったデータを受け取ることができ、言語ごとに何度も仕様を合わせたりする必要がなくなります。

仕組みについての簡単な解説は以上で導入方法の解説に入っていきます。

debug gemを導入

Gemfileに以下を追加しインストールします

1  gem "debug", ">= 1.0.0"

ver1以上にしているのは、公式でver1未満は全く異なる製品と記述があるため最低ver1以上を入れた方が良さそうですね。

vscode拡張機能「VSCode rdbg Ruby Debugger」を導入

VSCode上で「rdbg」と検索し「VSCode rdbg Ruby Debugger」をインストールしましょう。

ここでインストールしたgemと、この拡張機能の役割をご紹介します。
以下のように拡張機能が「Debug Adapter」として仲介役を担い、アプリケーション内のdebug gemと通信をし、エディタとは「Debug Adapter Protocol」でやり取りをしてくれます。

docker-compose.ymlにデバッグ用の設定を追加

debug gemをインストールしただけではデバッグできません。
docker-compose.ymlのRailsコンテナに以下の設定を追加しましょう。

1command: bundle exec rdbg -n --open --host 0.0.0.0 --port 12345 -c -- bin/rails server -b 0.0.0.0

1ports:
2  - "12345:12345"1ports:
2  - "12345:12345"

上記の設定は以下のようなことをしています。

• rdbgコマンドでデバッガーを立ち上げ12345ポートで待機させている
• コンテナ内のデバッガーにアクセスするため12345に対してポートフォワードしている

次にVSCodeでデバッグ実行するための設定ファイルを作成します。

…

記事の続きは下のリンクをクリック！

https://rightcode.co.jp/blogs/44745

エンジニア積極採用中です！

現在、WEBエンジニア、モバイルエンジニア、デザイナー、営業などを積極採用中です！

採用ページはこちら：https://rightcode.co.jp/recruit

社員の声や社風などを知りたい方はこちら：https://rightcode.co.jp/blogs?category=life

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「モバイルエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「営業」などを積極採用中です！

ライトコードは技術力に定評のある受託開発をメインにしているIT企業です。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。

【コーポレートサイト】https://rightcode.co.jp/

【採用募集】https://rightcode.co.jp/recruit（こちらからの応募がスムーズ）

【wantedlyぺージ】https://www.wantedly.com/companies/rightcode