アトトック代表の開発ブログ

プログラミングや会社のこと、写真、自転車のことなど書いてます。

Visual Studio Codeでruby-debug-ideを使ってデバッグ

会社では開発メンバーそれぞれが好きなエディタを使ってRailsアプリ開発を行なっています。
以前はAtomを使っていましたが、Atomプラグインを入れすぎたからか重くなったので ここ1年くらいはVisual Studio Codeを使いデバッグは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アイコンを選択するとデバッグビューが表示されます。 デバッグビューには変数、ウォッチ式、コールスタック、ブレークポイントがあり、上部のプルダウンメニューに「構成がありません」表示されています。

f:id:kurusaki:20180720035210p:plain

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

f:id:kurusaki:20180720035233p:plain

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」を選択します。

f:id:kurusaki:20180720035330p:plain

ブレークポイントの設定

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

f:id:kurusaki:20180720035350p:plain

実行

アプリを起動

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

f:id:kurusaki:20180720035414p:plain

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

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

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

f:id:kurusaki:20180720035438p:plain

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

f:id:kurusaki:20180720035501p:plain

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

f:id:kurusaki:20180720035519p:plain

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

f:id:kurusaki:20180720035534p:plain





久々にIDEのデバッガを使ってみました。

今後はpryよりpryとruby-debug-ideを使うことが多くなりそうです。