Help us understand the problem. What is going on with this article?

【Rails】もっと早く知りたかったデバッグ用gem 'better_errors','binding_of_caller'

はじめに

先日伊藤さんのこちらの動画(↓)を見ました。
プログラミング初心者歓迎!「エラーが出ました。どうすればいいですか?」から卒業するための基本と極意 - YouTube

「いや、なんでもっと早く見なかった!」と思うくらい具体的なデバッグ手法が諸々解説されています。

そこで出てきたgem better_errors&binding_of_callerの導入方法と見方について簡単にまとめます。

今まで

  • puts デバッグ
  • binding.pry
  • rails serverのログ

を使ってエラーと闘っていましたが、この2つのgemはもっと早く知りたかったです:sweat_smile:

この記事が役に立つ方

  • エラーに苦しんでいるRails初心者

この記事のメリット

  • デバッグの効率が上がる

環境

  • macOS Catalina 10.15.1
  • zsh: 5.7.1
  • Ruby: 2.6.5
  • Rails: 5.2.3
  • Docker: 19.03.5

better_errorsとは?

デフォルトのエラー画面をわかりやすく整形してくれるgem。

binding_of_callerとは?

上記better_errorsと一緒に使うことで、ブラウザ上でirbを使えるようになるgem。
※本記事では使用方法について触れていません。

導入方法

Gemfile
group :development do
  gem 'better_errors'
  gem 'binding_of_caller'
end

Gemfileに上記追記し、

bundle install

で完了。簡単!

※Dockerを使用している場合はもうひと手間必要

app/config/environments/development.rb
BetterErrors::Middleware.allow_ip! "0.0.0.0/0"

仮想環境を使っている方は、うまく動作しないようです。
私はDockerを使っていますが、上記コードを追記してサーバー再起動で動作しました。
Gem 『Better errors』が動かないとき | HippoBlog

使用例

ArgumentErrorが出ていた場合

form_withを使おうとしたらエラーが出た場合を例にします。

いつもの赤いエラー画面から表示が変わっています。
スクリーンショット 2019-11-28 14.54.16.png

エラーメッセージが最上部にあるのは変わりませんが、
その下に2つタブがあります。これが超便利。

  • Application Frames
  • All Frames

1. Application Frames

最初はApplication Framesが表示されています。
ここでは、自分の書いたコードを対象にエラーに関係する箇所を明示してくれています。
スクリーンショット 2019-11-28 14.54.16.png

2. All Frames

次に、All Framesをクリックすると、自分が書いた箇所以外(gemやActiveSupportなど)まで踏み込んでエラーに関係する箇所が表示されます。

それぞれクリックしていくとコードが表示されます。

例えば今回は、form_withのソースコードまで表示してくれます。
スクリーンショット 2019-11-28 14.55.22.png

form_withの最初の1行を抜き出すとこんな感じです。

def form_with(model: nil, scope: nil, url: nil, format: nil, **options, &block)

これで指定すべき引数がわかり、今回は

「いけね!そういえばmodel:って書き忘れた!」

と気づくことが出来ます。便利!


その他、NoMethodError~ for nil:NilClassとか出ていたら、ブラウザでそのまま変数の中身を確認したり出来て非常に便利です。
スクリーンショット 2019-11-28 15.57.41.png
※画像最下部がコンソールになっています。

おわりに

最後まで読んで頂きありがとうございました:bow_tone1:

デバッグ手法は学び始めの段階でなるべく多くリストアップしておいたほうが効率がいいと思いますが、better_errorsはもっと早く導入していたかったです:sweat_smile:

伊藤さんのYoutube、非常に勉強になるのでまた他の動画も見させて頂きます。

参考にさせて頂いたサイト(いつもありがとうございます)

プログラミング初心者歓迎!「エラーが出ました。どうすればいいですか?」から卒業するための基本と極意 - YouTube
プログラミング初心者歓迎!「エラーが出ました。どうすればいいですか?」から卒業するための基本と極意(解説動画付き) - Qiita
Gem 『Better errors』が動かないとき | HippoBlog
【Rails】better_errorsとbinding_of_callerで自分でエラーを解決できるようになろう【初心者向け】 - Qiita

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away