弊社の開発メンバーは、AtomやVisual Studio Code、Emacsなどそれぞれが好きなエディタを使用してRailsのアプリ開発を行なっています。

私は以前はAtomを使っていましたが、Atomにプラグインを入れすぎたからか重くなったので
ここ１年くらいはVisual Studio Codeを使っています。
Railsのデバッグはpryです。

Visual Studio Codeを使っていると右側にDebuggingアイコンが表示されています。
今まであまり気にしていなかったのですが
これ、どうやって使うんだと思い使ってみました。

デバッガーをインストール

ruby-debug-ideとdebaseをインストールします。

必要なGemをGemfileに追加

ruby-debug-ideとdebaseをGemfileに追加します。

  gem "ruby-debug-ide"
  gem "debase"

bundle install

$ bundle install --path vendor/bundle

ruby-debug-ideをインストール

gem install ruby-debug-ide

アプリを実行してみる

構成の追加

Visual Studio codeの左側のDebuggingアイコンを選択するとデバッグビューが表示されます。
デバッグビューには変数、ウォッチ式、コールスタック、ブレークポイントがあり、上部のプルダウンメニューに「構成がありません」表示されています。

このプルダウンメニューから「構成の追加...」を選択すると環境（言語）が表示されるのでRubyを選択します。

Rails serverを選択

Rubyを選択すると、.vscode/launch.jsonが作成されデバッグビュー上部のプルダウンメニューに下記の項目が表示されます。

• Debug Local File
• Listen for rdebug-ide
• Rails server
• RSpec - all
• RSpec - active spec file only
• Cucumber

Railsのアプリをデバッグしたいので「Rails server」を選択します。

ブレークポイントの設定

ブレークポイントを設定したいソースを開きブレークポイントを設定したい行番号の左側をクリックすると、ブレークポイントが設定されデバッグビューのブレークポイントに表示されます。

実行

アプリを起動

デバッグビューの上部にある▶︎の実行ボタンをクリックするとアプリケーションが起動し、デバッグコンソールにログが出力されます。

ブレークポイントを設定したページを開く

ブレークポイントを設定したページを開くとブレークポイントを設定したところで停止し、デバッグビューに変数の状態が表示されます。

変数を右クリックするとメニューが表示されます。

「デバッグ:ウォッチに追加」を選択すると変数がウォッチ式に追加され状態を確認できます。

続行、ステップオーバー、ステップイン、ステップアウト、再起動、停止ボタンでデバッグを続けます。

デバッグコンソールの下の入力エリアに変数名を入力しエンターキーを押すと、デナッグコンソールに変数の状態を表示できます。

---