UZUMAKI TechBlog

VSCodeでDockerを使ったRailsを開発しよう~Ruby3.1以降 Debug編~

概要

開発者のマシンで開発環境を構築する際にDocker及びDocker composeを使って開発することが一般的になりました。いままではターミナルからdocker composeコマンドを実行してテストや動作確認をしていましたが、VS CodeのDev Containers拡張を使いよりVS Codeで便利に開発する方法を提案します。
今回はRuby3.1のdebug.gemを使ったRailsプロジェクトで、VS Codeのデバッグ機能をDev Containersと一緒に使う方法を紹介します。

今回紹介する機能のセットアップ方法は下記リンクの前回の記事を参考にしてください。

VSCodeでDockerを使ってRailsを開発しよう~Dev Containers編~https://blog.uzumaki-inc.jp/vscodedockerrailsdev-containers

目的

VS CodeとDockerを使ってRailsを開発している際により便利にします(以下 コンテナと記載されている箇所はDockerコンテナ及びDocker Composeで起動したコンテナ群を指します)

  • VS Codeのデバッグ機能を使ってブレークポイントをGUIで設定することでRubyMineのデバッガのようなデバッグ体験する
  • Ruby3.1以降で動いているRailsプロジェクトでdebug.gem(rdbg)を通してデバッグ実行方法を確立する

対象読者

VSCodeを使うRailsエンジニア

本文

準備

本記事のサンプルコードは下記URL(vscodeタグ)にあります

GitHub - konyu/base_rails at vscodehttps://github.com/konyu/base_rails/tree/vscode

前提条件

  • M2 CPUのMac
  • Docker desktop for mac: 4.16.2
  • Ruby: 3.2.1
  • Rails: 7.0.4
  • MySQL: 8
  • ※ 細かいバージョンはDockerfile、docker-compose.ymlに記載
  • rails new コマンドで適当なRailsプロジェクトを作成し、Post, Commentモデルをscaffoldで作成ずみ

環境構築については一つ前のBlogを参考にしてください。
今回必要な拡張機能のVSCode rdbg Ruby Debugger** **のインストールもしています。

VSCodeでDockerを使ってRailsを開発しよう~Dev Containers編~https://blog.uzumaki-inc.jp/vscodedockerrailsdev-containers

debug.gemを利用したデバッグ設定

Ruby3.1から導入されたdebug.gemを使った設定を説明します。

※ ワークアラウンド的なこともしており、不明な点もあるのでご承知おきください。launch.json 内のコマンドで bundle exec railsはうまく動かないがbin/rails なら動くなどまだ不明な点があります

最初にVS Codeの右側のパネルにあるデバッグ部分で利用する .vscode/launch.json を作成します。

{
  "version": "0.2.0",
  "configurations": [
    {
      //Rails serverを起動します
      "name": "Debug Rails",
      "type": "rdbg",
      "request": "launch",
      // "command": "bundle exec rails", //bundle exec rails だとデバッガで止まらない
      "command": "bin/rails",
      "script": "s",
      "args": ["-b", "0.0.0.0"]
    },
    {
      // アクティブになっているRspecファイルのテストを実行します
      "name": "Debug Rspec with current file",
      "type": "rdbg",
      "request": "launch",
      "command": "bundle exec rspec",
      "script": "${file}",
      "args": [],
      // 実行コマンドをウインドウで確認。特定行の実行などオプションを指定しやすくする
      "askParameters": true
    }
  ]
}

Railsをデバッグ起動する

Run and DebugのDebug Railsを選択して実行すると、Railsが起動し、ブレイクポイントで止めることができます。

Rspecをデバッグする

対象のテストコードのあるファイルをエディタの最前面に表示してから、Debug Rspec with current file を選択すると、そのテストコードを実行します。

Tips デバッグ実行のショートカット

F5で現在アクティブになっている方を実行します。

またやShift+F5でデバッガで止めることなく実行できます。

考察

TerminalでRails serverの起動やRspecの実行する場合のPros/Consを比較します

Pros

  • ブレークポイントを一時的に有効/無効を制御できるので binding.debug 行をコードに挿入する場合だと必ず止まってしまうので、調査しやすい
    • 特にRails serverを起動してバグの原因の調査をする場合に便利
    • 一旦ループの中でブレークポイントを無効するようなシチュエーションのときに便利

  • GUIでStep Overなどデバッグで必要な機能を実行できるので直感的、またF10などショートカットっもあるのでこのあたりも便利

Cons

  • デバッグコンソールで、変数や、メソッド実行するためのパネルに移動したり、ターミナルを表示するのにマウスの操作をするのが面倒
    • 実際、MacのVS codeのショートカットを調整して対策しています

まとめ

Docker(Docker Compose)を利用したRailsプロジェクトのローカル開発環境において、Ruby3.1から導入されたdebug.gemを使ったRailsのデバッグ方法を提案しました。

debug.gemを使ったRailsのデバッグ方法は調べてみても、なかなかこれという方法にたどりつかなかったので自らやり方を確立できました。

参考リンク

← 記事一覧へ