🧰

Procfile.dev を使う場合にデバッガ（vscode-rdbg）を使う

takeyuweb

2024/02/11に公開

Rails

VS Code

tech

vscode-rdbg については過去の記事

デバッガ起動時にrails server を実行するなら上記の記事で動くはず。

tailwindcss-rails cssbundling-rails jsbundling-rails などを使用する場合、Railsアプリの起動は Procfile.dev に記載します。

次のように、 Procfile.dev ではデバッガ付きで起動し、VSCodeのデバッガ起動時は attach のみ行うようにすれば動作します。

設定例

Procfile.dev

web: rdbg --open --nonstop bin/rails -- s -b 0.0.0.0
# 以下はプロジェクトによってそれぞれ
css_application: yarn build:css:application --watch
css_active_admin: yarn build:css:active_admin --watch

.vscode/launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "rdbg",
            "name": "Attach with rdbg",
            "rdbgPath": "rdbg",
            "request": "attach",
        }
    ]
}

使い方

1. bin/dev

$ vscode ➜ /workspaces/rails-myapp (main) $ bin/dev
13:07:04 web.1              | started with pid 147890
13:07:04 css_application.1  | started with pid 147891
13:07:04 css_active_admin.1 | started with pid 147892
13:07:05 css_active_admin.1 | yarn run v1.22.19
13:07:05 css_application.1  | yarn run v1.22.19
13:07:05 css_active_admin.1 | $ tailwindcss -i ./app/assets/stylesheets/active_admin.tailwind.css -o ./app/assets/builds/active_admin.css -c ./tailwind-active_admin.config.js --minify --watch
13:07:05 css_application.1  | $ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css -c ./tailwind-application.config.js --minify --watch
13:07:05 web.1              | DEBUGGER: Debugger can attach via UNIX domain socket (/tmp/user/1000/rdbg-147890)
13:07:05 css_application.1  | 
13:07:05 css_application.1  | Rebuilding...
13:07:05 css_active_admin.1 | 
13:07:05 css_active_admin.1 | Rebuilding...
13:07:05 css_application.1  | 
13:07:05 css_application.1  | Done in 141ms.
13:07:05 web.1              | => Booting Puma
13:07:05 web.1              | => Rails 7.1.3 application starting in development 
13:07:05 web.1              | => Run `bin/rails server --help` for more startup options
13:07:06 web.1              | Puma starting in single mode...
13:07:06 web.1              | * Puma version: 6.4.2 (ruby 3.3.0-p0) ("The Eagle of Durango")
13:07:06 web.1              | *  Min threads: 5
13:07:06 web.1              | *  Max threads: 5
13:07:06 web.1              | *  Environment: development
13:07:06 web.1              | *          PID: 147890
13:07:06 web.1              | * Listening on http://0.0.0.0:3000
13:07:06 web.1              | Use Ctrl-C to stop

2. デバッグの開始 [F5]

コンソールに接続した旨が表示されます。

$ 13:10:32 web.1              | DEBUGGER: Connected.

後は適当にブレークポイントを設定してアクセスすれば、期待した箇所で停止できます。
ブレークポイントに到達

タケユー・ウェブ株式会社Publication

Ruby on Rails や AWS が得意なWebサービス受託開発会社です。中小規模のWebサービスの新規開発の他、他の個人開発者などから引き継いで保守運用を行ったりしています。新規開発、お手伝いや顧問、レガシーなRailsプロジェクトの保守など、ニーズにあわせて対応できます。ご相談ください。

設定例

使い方

1. bin/dev

2. デバッグの開始 [F5]

Discussion