PAGE TOP

アトトックラボ

20180720

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

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

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

Debug View

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

Debug View

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

Debug View

ブレークポイントの設定

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

Debug View

実行

アプリを起動

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

Debug View

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

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

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

Debug View

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

Debug View

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

Debug View

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

Debug View

お問い合わせはお問い合わせフォームかお電話でご連絡ください。
Btn mail
Btn tel

アトトックラボとは?

株式会社アトトック のメンバーが技術の話、デザインの話、キャラクターの話、ときどき脱線してガジェットの話やライフハックの話など好きなことを書いています。


最近の記事


タグ