この記事では、ヘッドレスブラウザ(Chrome)でRailsアプリのJavaScriptをデバッグする方法を紹介します。
この方法を用いると、ヘッドレスブラウザでも通常のChrome DevToolsのデバッグと同じようにページのライブビューを表示しながらデバッグすることが可能です。
1. 開発環境
- Ruby：3.1.0
- Rails：6.1.4.7
- capybara：3.39.1
- selenium-webdriver：4.9.1
- webdrivers：5.2.0
- VSCode：1.81.1
- Chrome：116.0.5845.96
- MacBook Pro (13-inch, 2020)
- macOS Ventura 13.4.1
2. 背景
とあるRailsアプリに以下のJavaScriptの機能を実装しました。
この実装に関連したシステムテストを作成しました。
作成したテストは通常のブラウザ(chrome)上では正常に動作する一方、ヘッドレスブラウザ(headless_chrome)上ではテストが失敗するという現象が発生しました。
ヘッドレスブラウザでのみテストが失敗する原因を特定するため、まずは実装したJavaScriptの機能がヘッドレスブラウザ上でどのように動作するかをデバッグする必要がありました。
しかし、ヘッドレスブラウザはGUIを持たないため、通常であれば画面を見ながらのデバッグはできません。
そこで、今回紹介するヘッドレスモードでChromeを起動してリモートデバッグを行う方法で、ヘッドレスブラウザでも通常のブラウザと同じようにデバッグすることができます。
3. ヘッドレスモードでChromeを起動してリモートデバッグ
3-1. rails serverを起動
まずはrails serverを起動します。
$ bin/rails s
3-2. ヘッドレスモードでChromeを起動
次に、ヘッドレスモードでChromeを起動します。
$ chrome --headless=new --remote-debugging-port=9222 --user-data-dir=remote-debug-profile http://localhost:3000 DevTools listening on ws://127.0.0.1:9222/devtools/browser/9b3ebe40-4fde-4336-8ea7-d1bf424bc76b
カレントディレクトリにChromeのユーザープロファイルを保存するremote-debug-profileディレクトリが作成されます。
3-3. chromeブラウザを起動
通常のChromeブラウザを起動して、以下のようにchrome://inspectにアクセスし、DecicesのConfigure...をクリックします。
3-4. IPアドレスとポート番号を入力
以下のウィンドウのIP address and portの箇所に、127.0.0.1:9222を入力して、Doneを選択します。
3-5. リモートターゲットを選択してinspect
Remote Targetに起動中のRailsアプリの欄が表示されるので、inspectをクリックします。
3-6. Chrome DevToolsでデバッグ
リモートのヘッドレスターゲットのChrome DevToolsのウィンドウが表示されます。
あとは通常のやり方(Debug JavaScript - Chrome for Developers)でデバッグできます。
以上で、RailsアプリのJavaScriptをヘッドレスブラウザ(Chrome)でデバッグできるようになりました。
【参考】
